Vue-cli的介绍与安装

1.vue-cli介绍

Vue-cli是Vue的脚手架工具，能够帮助我们搞定目录结构、本地调试、代码部署、热加载、单元测试等。

2.安装

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

3.项目文件介绍

.eslintignore: 忽略语法检查的语法检查

.eslintrc.js: eslint的配置文件

.gitignore: git忽略这些文件

index.html: 入口html文件

package.json: 项目的描述文件，内部就是一个JSON对象，该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称，version是版本等。

4.项目运行机制

index.html：

<div id="app"></div> 用来挂载 。./src/main.js里的实例化new Vue({el： ‘#app’})

./src/main.js:

import Vue from 'vue'  引入依赖文件 , new Vue({})实例化中：

// ES5  render: function (h) {    return h(App);  }; // ES6render: h => h(App)

h作为createElement的缩写，相当于Vue1.x中 components: { App } ，对应html <app></app>

app.vue:

import  Header from './xx/xx'

export default {

  components: { Header }

}

必须通过components注册组件，否则无法使用