vue-cli 是一套完整的，辅助我们快速配置webpack的工具，
具体安装参考官网：https://cli.vuejs.org/zh/guide/
如下是通过vue-cli 创建的一个vue 项目
vue 项目的运行流程
在工程化项目中，vue要做的事情： 通过main.js 把App.vue 渲染到 public/index.html的指定区域中
1、App.vue 用来编写待渲染的模板接口
2、index.html中需要预留一个el区域
3、main.js把App.vue渲染到了index.html所预留的区域中
Vue 组件
使用组件的三个步骤
第一步：导入组件
// import 后面的名字可以自定义
import HelloWorld from './components/HelloWorld'
第二步： 在 components 中声明这个
export default {
name: 'App',
data(){
return{
msg :'欢迎使用 VUE'
}
},
// 通过 components 注册的是 私有子组件
components: {
// 标准的 组件引用， 如果名称是一样的， 可以简写，不要key(例如Right组件)
'HelloWorld' : HelloWorld,Right,
}
}
在components 中声明的组件是私有 子组件，不能在其他地方使用
注册全局组件
注册全局组件，那么在其他Vue页面也都可以使用这个组件，
在main.js 中 导入组件， 并使用 Vue.component 方法注册
import HelloWorld from './components/HelloWorld'
// 注册全局组件， 前面的名称可以自定义，后面的参数是组件名称
Vue.component('HelloWorld',HelloWorld)
第三步： 以标签的形式使用组件
在模板标签中使用组件时，如果组件命名是 首字母大写的形式，那么在使用的时候，可以两种方式使用如下：
// 1、 字母全部小写，并以大写字母为分割，中间以- 为分割使用
<hello-world :msg="msg"></hello-world>
// 2、直接以注册的名称使用
<HelloWorld :msg="msg"></HelloWorld>
自定义组件中声明外接变量
在自定义组件中，需要对外提供一个变量，方便使用组件时，修改组件里面的数据，需要用到 props 属性
props 是组件的自定义属性 ， 在封装通用组件的时候， 合理使用props可以提高组件的复用性
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: ["msg"]
}
</script>
通过打印当前组件对象this,可以查知道，props 里面声明的变量，也会出现在this对象里面， 所以在页面中可以直接使用。
需要注意的地方：
1、props 声明的变量虽然可以直接使用， 但是这里的变量是只读的，如果修改，在控制台会报错，但不影响使用 ；如果要在当前组件中，修改传进来的数据，那么可以在data中声明一个变量，把传进来的变量值赋值给data中的变量：
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
// 在当前组件中， 直接使用和修改myMsg 变量即可
myMsg : this.msg
}
}
}
2、用数组的形式，声明有局限性，建议用对象的形式声明
export default {
// VUE 规定， props 封装的属性是只读的，不能直接修改里面属性的值
props:{
msg:{
// 给一个默认值（在使用改组件时，可以不传这个参数）
default:'12',
// 限定类型（Number 、 String 、Object）, 只能传指定的类型
type:String,
// 限定这个参数是否必须，如果是true, 那么在使用时，必须添加这个属性参数
require:true
}
},
data(){
return{
myMsg:this.msg
}
}
}
组件之间的样式冲突
由于vue 文件都会编译成js css 用于到 一个html 文件中，所以如果在某个vue 中定义了一个公共的 样式（h3{color:red}），那么在其他 多个vue 页面中使用到这个公共组件(h3) ， 就会有影响。
解决思路：给当前vue组件都添加一个 唯一属性， 并在样式中也组合属性使用例如： h3[data-v-123]{color:red} , 那么就会限定只有<h3 data-v-123></h3> 且带有data-v-123 属性的标签生效
vue 也为我们提供了这个解决方案，就是在 style 标签添加一个属性 scoped
// 这样在编译的过程中， 就会给每个元素添加一个随机属性，且在样式里面也添加这个随机属性
<style lang="less" scoped>
.leftDiv{
width: 100px;
height: 100px;
background-color: aliceblue;
}
h3{
color: red;
}
</style>
如果当前vue页面中引用了第三方的组件， 同时修改了第三方组件中的部分元素的样式，使用scoped ，也会让第三方组件中的元素样式失效，那么可以在指定的样式前面添加一个 /deep/ 样式穿透
/deep/ 样式穿透
<style lang="less" scoped>
.leftDiv{
width: 100px;
height: 100px;
background-color: aliceblue;
}
/deep/h3{
color: red;
}
</style>
这样编译器，会在当前vue页面生成 特殊的样式
[dev-v-123] h3{ color : red }
这样是一个组合样式， 那么在子组件中的h3标签组件， 也能生效
生命周期
beforeCreate
这个方法，只是实例化了组件， 组件的data 、methods、props 等等所有属性都不能使用
created
这个方法中， 初始化了组件的数据，组件的data、methods、props等等属性都可以使用，常在这个方法中请求网络
beforeMount
这个方法中，内存中的组件还没渲染到页面上， 不能通过docoument 去操作页面元素
mounted
这个方法 ， 会把内存中的组件元素渲染到页面上，可以操作dom结构了
beforeUpdate
当data里面的数据发生变化的时候，会调用这个函数，此时data里面的数据已经发生过了改变，但是dom上对应的元素还是旧数据，即最新的数据还没有渲染到页面上
Update
data最新的数据已经渲染到页面上
beforeDestory
准备删除组件，调用的函数，此时还没有开始删除
destroyed
v-if 条件表达式，条件为false，就会删除组件
删除组件
组件间数据传输
第一种情况： 父向子组件传数据
通过子组件自定义属性的方式(props)传递
传递基础类型和Object 对象类型的区别
基础类型，是把数据复制一份，传递给子自福建
对象类型，是把对象的引用传递给子组件
第二种情况：子组件向父组件传数据
在子组件中调用 this.$emit()方法
// 子组件 方法
methods:{
changeCount(){
this.count ++
// 第一个参数是自定义的监听事件名称，第二个是传递的参数对象（可以是基础数据(countChangeXX)，也可以是object对象）
this.$emit("countChangeXX",this.count)
}
},
// 父组件 方法
// .. 在父组件，使用子组件的时候， 通过@指令绑定子组件中this.$emit 定义的监听事件名称(countChangeXX)，然后绑定一个回调函数 （curCountFun）
<Counter v-if="flag" :counter="12" @countChangeXX="curCountFun"></Counter>
//
methods:{
curCountFun(val){
// 在父组件这里， 就可以拿到子组件的数据了
this.curCount = val
}
},
第三种情况：兄弟组件之间的数据传输
