安装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>
