安装Vue-Cl（Vue脚手架）&初始化文件夹&创建组件

安装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": [
          "",
          "",
          ""
        ],
        "description": "生成Vue2-template"
    }

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

--3.2.js代码

--3.3.样式

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

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

--4.2注册组件

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

--4.3使用组件

完整代码