vue+webpack 优化
一. 异步加载
1.异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用
路由配置：
2. 按需加载-选择性加载依赖包
二. 使用keep-alive
keep-alive组件，用来缓存组件,避免多次加载相应的组件,减少性能消耗
三 webpack相关
webpack提供了http-proxy-middleware解决跨域问题
webpack提供了css打包去重的一些方法：optimize-css-assets-webpack-plugin
打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 cdn 直接引入到根目录的 index.html 中
四 v-show，v-if 的使用
频繁切换的使用 v-show（display控制），不频繁切换的使用 v-if（移除和添加）
五 循环调用子组件时添加 key
六、 不要在模板里面写过多表达式
通过methods 或computed 封装方法（好处：可被重复调用 复用性高）
挂载点 模板 实例 实例中数据、方法、事件
el : 挂载点
template: 模板
new Vue ：实例
{{ msg }}：插值表达式 还可以使用 v-text v-html显示数据
v-on:click => @click
总结：
1. new 一个vue对象的时候可以设置它的属性 最重要的属性包括 data、methods、watch
2. data 代表vue对象的数据 methods表示vue对象的方法 watch设置了对象监听的方法
3. vue对象里的设置通过html指令进行关联
4. 重要的指令：v-text 渲染数据
v-if 控制显示
v-on 绑定事件
v-for 循环渲染
属性绑定 和双向数据绑定
1. 属性绑定
v-bind:title => :title
2. 双向绑定 v-model
计算属性 和 侦听器
v-if v-show v-for
v-if 隐藏显示 是清除dom元素
v-show 隐藏显示 是给dom元素添加display:none; 属性实现的
v-for 循环内容的展示 加上：key 属性 增加效率
vue组件 todolist
1. 组件定义
2. 组件拆分
3. 组件与实例的关系
每一个组件都是一个vue实例 每个实例也就是一个VUE的组件
如果一个Vue的实例没有模板template，它就会找到它的挂载点，把挂载点里的DOM标签当做Vue的实例模板
任何一个vue项目都是由千千万万的vue实例组成的
组件包括：props,template,method
实例包括：el,data,template,method
4. 组件中删除操作
vue-cli 使用（脚手架工具）
单文件组件编码方式