<meta charset="utf-8">
npm: Nodejs下的包管理器（node package manager）。也可以用yarn。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。（帮你快速开始一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库，只需要 npm install就可以安装）
环境搭建
1.node
2.npm（node自带）
3.cnpm
4.vue-cli
5.wabpack npm install webpack webpack-cli -g
6.devtools
VUE的三种引入方式
1.下载vue.js，本地src绝对路径
2.CDN的方式，在线引用，src="https://cdn.boots.com/vue/2.5"
3.vue-cli脚手架的方式。
计算属性与侦听器
computed与watch
computed是监听一个变量的变化，例子里是监听msg变量，参数是新值和旧值。
watch是监听fuction函数中的所有变量的变化，前提是这些变量都包含在VUE示例里面。
v-if、v-else-if、v-else
v-for
v-show
新建VUE工程有两种方法，$ vue create hello-word 和vue-ui ui界面可视化
引入的时候，@符号代表src目录。加上后缀，组成绝对路径。
组件化：思想
什么是组件化？
独立的、可复用的、整体化的
为什么要组件化？
实现功能模块的复用
高执行效率
开发单页面复杂应用，做拆分
如何拆分？
300行原则
复用原则
业务复杂性原则
组件化带来的问题：
组件状态管理（vuex）
多组件的混合使用，多页面，复杂业务（vue-router）
组件间的传参、消息、事件管理（props，emit/on，bus）
组件就是指单文件vue文件，this指的是组件本身。
Vue开发调试：
1.Vue的Chrome插件
2.console.log(),aler()（阻塞），debugger
3.vm实例，window对象绑定。
Vue-router
VueX
vuex的使用可以分为不同程度，如果单纯的想使用全局对象，又要用vuex，那只使用简单的store模式即可。
① 那vuex和全局对象有什么不同
1.vuex状态是响应式的。store中的数据发生变化，相应的组件会得到高效的更新。
2.全局变量可以随时改变其值，通过store.state.count的方式，vuex则不可以，改变store中状态的唯一途径就是显示地提交（commit）mutations（为什么这么做？:这个简单的约定，使代码可读性增强，且给vue带来的一个可以记录状态变化的入口，或者说是媒介）。
通过{{}}模板是无法直接使用store对象的。
在vue根实例注册store选项，vue会将store实例注入到根组件下的所有子组件中，这样子组件都可以以通过this.$store访问到。
②如果store的属性需要运算，使用getters（防止大量引用store时，计算逻辑代码的重复）
简单理解getters和计算属性computed选项基本一致。
const store = new Vuex.Store({ state: { date: new Date() }, getters: { // Getter 接受 state 作为其第一个参数 weekDate: (state) => (fm) => { return moment(state.date).format(fm ? fm : 'dddd'); } } })
可以通过getters选项，对store的state属性进行运算，方式为在getters中添加function，可以传入的参数包括：state属性、其它参数。
使用的时候，通过store.getters.weekDate('MM Do YY')即可。
③那么如何修改store中的state属性呢（只有mutation能动state）
const store = new Vuex.Store({ state: { count: 1 }, mutations: { // 事件类型 type 为 increment increment (state num) { // 变更状态 state.count = num } } })
通过mutations选项，构建function修改state属性。可以自定义参数
调用时必须使用commit关键字。store.commit('increment',100)
mutations中的这个额外的参数，官方称为载荷（payload），提交载荷。
对于修改state属性的mutations方法名称，如果是大项目，最好通过引入常量的方式，使用方式和axios中引用url一样。
另外，mutations的function必须是同步函数，如果是异步，就没法侦听数据的变化了。
④那如果mutatios的函数必须是异步怎么办呢
就要用到action选项，mutations通过commit调用，action通过dispatch调用。
使用action最大的好处就是在action中定义异步函数，然后通过commit触发mutations函数，这样的话所有的状态变更都能追踪的到，无论是同步变更的还是异步变更。
⑤vuex的常用的辅助函数（极简的方式写vuex代码--语法糖）
四个常用辅助函数：mapState、mapGetters、mapMutations、mapActions
分别于vuex四家马车state（状态）、getters（状态值运算）、mutations（同步函数改变状态值）、actions（异步函数改变状态值）
目的就是简化四个选项代码复杂度。
⑥Vuex的管理员Module（大型项目使用）
分支管理，类似router一样的效果。
由于四架马车都是全局命名，所以局部管理略微复杂。
