三、vue脚手架工具vue-cli的使用

1.vue-cli构建

　　vue-cli工具构建：https://blog.csdn.net/u013182762/article/details/53021374

　　npm的镜像替换成淘宝

2.项目运行

在项目目录中，运行命令 npm run dev ，也可以运行npm run start（在package.json文件中可以看到），项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）

3.项目分析

目录结构：http://www.runoob.com/vue2/vue-directory-structure.html

我们只关注src下的

 main.js是整个项目的入口文件，创建了一个vue实例

　　挂载点：#app，

　　注册了一个局部组件：App，采用es6的语法import app from './App'，引入了App组件在当前路径下App.vue

　　　　components: { App }说明：components: { App :  App }，如果建和值相同，可以简写components: { App }

　　模板是App组件的内容<App/>

　　　　template: '<div><App/></div>':外层的div可以省略，显示的内容为App组件的template

在index.html上定义了app挂载点

App.vue：单文件组件包含三部分，template、script、style

 注意：

　　1.在template下只能有一个最外层的包裹标签，如果写多个编译会报错，可以把多个标签元素包裹在一个根标签下面；

　　2.export也是es6的语法，在vue实例中以前data是一个对象，而在vue-cli中data是一个函数，而且可以简写data : function (){}为data (){}，其他也可以简写

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App , test it .'
    }
  },
  components:{
  },
  methods:{
  }
}

　　3.组件的调用可以通过import引入，并且在export中通过components进行声明

import TodoItem from './components/TodoItem.vue';

components:{
            'todo-item': TodoItem
        },

　　4.在style上可以添加scoped来声明此样式为局部样式，只在这个组件的范围有效，不会影响全局样式，建议单页面开发一般加上scoped

<style scoped>