安装Vue-Cl（Vue脚手架）
1.全局安装Vue-Cli（注意：可以先改为淘宝国内镜像地址）

npm install -g @vue/cli

安装过程中，可能会产生报错

$ npm install -g truffle
npm ERR! code EEXIST
npm ERR! path E:\software\nn\node.js\node_global\node_modules\truffle\build\cli.bundled.js
npm ERR! dest E:\software\nn\node.js\node_global\truffle.cmd
npm ERR! EEXIST: file already exists, cmd shim 'E:\software\nn\node.js\node_global\node_modules\truffle\build\cli.bundled.js' -> 'E:\software\nn\node.js\node_global\truffle.cmd'
npm ERR! File exists: E:\software\nn\node.js\node_global\truffle.cmd
npm ERR! Remove the existing file and try again, or run npm
npm ERR! with --force to overwrite files recklessly.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     E:\software\nn\node.js\node_cache\_logs\2020-02-06T14_02_17_324Z-debug.log

可以将安装命令更改为

npm install -g @vue/cli --force

2.查看Vue-Cli版本号（显示出版本号，默认脚手架安装成功）

vue --version

初始化文件夹
1.初始化文件
--1.1新建文件夹，打开。
--1.2在终端命令窗口输入指令

vue create demo 

=>enter
会自动生成一个名叫demo的文件夹
2.webpack打包
在终端命令符窗口输入指令

npm run build

3.程序运行
在终端命令符窗口输入指令

npm run serve

==>

 App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.1.59:8081/

=> ctrl+点击链接，可运行程序，打开网页

！！！这样就完成了初始化配置

4.初始化完成后各文件夹的解释
--4.1.package.json 项目描述文件
--4.2.src 源码目录
--4.2--2.1assets 资源目录
--4.2--2.2componets 组件目录
--4.2--2.3App.vue 页面级Vue组件
--4.2--2.4main.js 页面入口Js文件
--4.3.node_modules 依赖的工具包目录
--4.4.pulic 资源目录
注：vue中public与assets的区别
1.相同点
文件夹中的资源在html中使用都是可以的。
2.不同点
使用assets下面的资源，在js中使用的话，路径要经过webpack中的file-loader编译，路径不能直接写。
使用public文件下面的资源，是不会被webpack处理的，它们会被直接复制到最终的打包目录下面，且必须使用绝对路径来引用这些文件。
--2.1.public中的文件，是不会经过编译的，打包后会生成dist文件夹，public中的文件只是复制一遍。因此，public建议放一些外部第三方，自己的文件放在assets，别人的放public中。
--2.2.若把图片放在assets和public中，html页面都可以使用，但是在动态绑定中，assets路径的图片会加载失败（因为webpack使用的是commenJS规范，必须使用require才可以。

创建组件
1.在components文件夹下新建文件Child.vue
注：xxx.vue是vue的单文件组件，每个vue的单文件组件由三个部分组成：
template里面放置模板内容，script里面放置js代码，style里面放置样式
2.新建代码片段(通过设置用户代码片段可以更便捷）
左下角设置=》用户代码片段=》vue.json=》输入代码

"create2": {
        "prefix": "vv2",
        "body": [
          "<template>",
          "<div>",
          "</div>",
          "</template>",
          "<script>",
          "export default {",
          "name:'App'",
          "}",
          "</script>",
          "<style scoped lang='scss'>",
          "</style>"
        ],
        "description": "生成Vue2-template"
    }

3.在Child.vue文件夹中，输入新建好的代码片段vv2,快速创建组件需要的3个要素（模板，js代码，样式）
--3.1.模板

<template>
    <div class="child">
        <h3>{{title}}</h3>
        <hr>
        <p>车名：<input type="text" v-model="car.name"></p>
        <p>车价：<input type="text" v-model="car.price"></p>
        <hr>
        <p>飞机名称：<input type="text" v-model="myPlaneName"></p>
        <p>飞机价格：<input type="text" v-model="myPlanePrice"></p>
    </div>
</template>

--3.2.js代码

<script>
// 每个组件，其实就是一个导出的对象
export default {
    name:'Child',
    props:['car','planeName','planePrice'],
    // 注意：组件里面的data一定要是一个方法，由方法返回一个对象
    data() {
        return {
            title:'我是Child组件',
            //中转父组件传递过来的值
            myPlaneName : this.planeName,
            myPlanePrice : this.planePrice
        }
    },
    watch:{
        myPlaneName(val){
            this.$emit('updatePName',val)
        },
        myPlanePrice(val){
            this.$emit('updatePPrice',val)
        }
    }
}
</script>

--3.3.样式

<style>
    .child{
        border: 1px solid red;
        padding: 10px;
    }
    hr{
        margin: 10px 0;
    }
</style>

4.组件创建完成后，使用组件需要完成3个步骤（在App.vue里操作）
--4.1导入组件

import Child from './components/Child.vue'

--4.2注册组件

export default {
 // name选项定义组件的名称
 name: 'App',
 // 2.注册组件
 components:{
   Child
 }
}

--4.3使用组件

<!-- 3.使用组件 -->
    <Child :car="car" :planeName="planeName" :planePrice="planePrice"
    @updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>

完整代码

<template>
  <div id="app">
    <h2>{{title}}</h2>
    <p>汽车信息：{{car}}</p>
    <p>飞机信息：{{planeName}}-{{planePrice}}</p>
    <!-- 3.使用组件 -->
    <Child :car="car" :planeName="planeName" :planePrice="planePrice"
    @updatePName="planeName=$event" @updatePPrice="planePrice=$event"></Child>
    <Element></Element>
    <Charts></Charts>
  </div>
</template>

<script>
// xxx.vue是vue的单文件组件
// 每个vue的单文件组件由三个部分组成：template里面放置模板内容，script里面放置js代码，style里面放置样式

// 使用组件的步骤：
// 1.导入组件
import Child from './components/Child.vue'
import Element from './components/ELement.vue'
import Charts from './components/Charts.vue'

export default {
  // name选项定义组件的名称
  name: 'App',
  // data选项定义组件的数据
  data() {
    return {
      title:'欢迎学习Vue，月薪过万不是梦',
      //定义一辆车的信息
      car:{
        name:'奔驰',
        price:'50W'
      },
      //飞机信息
      planeName:'波音747',
      planePrice:'10Y'
    }
  },
  // 2.注册组件
  components:{
    Child,
    Element,
    Charts
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
#app {
  border: 1px solid #eee;
  margin: 10px;
  padding: 10px;
}
</style>