npm package: 14_vue_component
Description: A Vue.js project
Author: zjp
Latest version: 1.0.0

1.单文件组件
	1.三个部分组成
		1.template
			只能存在一个根元素
		2.script
		3.style
			scoped: 样式只在当前组件内生效
	2.子父级组件交互（通信）
		父->子: props
			数据传递类型限制（验证）
			数据类型验证
			多数据类型验证
			必选项
			默认值
			obj、arr数据类型的默认值（返回Object）
		子->父: emit Event
	3.插槽
		单个插槽
		具名插槽
		作用域插槽（子传父）
			注意：在2.5.0之前,必须使用在template上
	4.动态组件
		keep-alive	<component :is="currentView"></component>
2.css过度与动画
	在CSS 过渡和动画中自动应用 
		过渡类名
			v-enter：进入开始
			v-enter-active；执行过程中
			v-enter-to：结束动画
			v-leave：离开开始
			v-leave-active：离开过程
			v-leave-to：离开结束
	class可以配合使用第三方css动画库，如Animate.css

3.自定义指令
	全局指令
		Vue.directive('focus',{
			inserted: function(el){
				el.focus();
			}
		})
	局部指令
		directives:{
			focus:{
				inserted: function(el){
					el.focus();
				}
			}
		}
Axios
	1.安装 npm install axios
	2.引入加载 
		import Axios from 'axios'
		Vue.prototype.$axios = Axios
	3.请求
		get请求：
			this.$axios("http://localhost:8080/static/mock/data.json",{
		      params:{
		        type:"junshi"
		      }
		    }).then(res=>{
		      console.log(res)
		    }).catch(error=>{
		      console.log(error)
		    })
		psot请求：
			form-data: ?userId=admin&password=123
			x-www-from-urlencoded:{userId: "admin",password: 123}
			注意：axios接受的post请求的格式是from-data格式
			this.$axios.post("http://localhost:8080/login",
		      qs.stringify({
		        user_id:"admin",
		        password: 123
		    })).then(res=>{
		      console.log(res)
		    }).catch(error=>{
		      console.log(error)
		    })
	4.全局的axios默认值
		Axios.defaults.baseURL = 'http://localhost:8080';
		Axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
		Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
	5.拦截器
		在请求then或catch处理前拦截它们

	6.跨域处理 
		1.修改config中的 index.js
			proxyTable: {
		        "/api": {
		            target: "http://localhost:8080",
		            changeOrigin: true,
		            pathRewrite: {
		                '^/api': ''
		            }
		        }
		    },
		2. mian.js 中添加HOST
			Vue.prototype.HOST = '/api'
		3.使用
			this.$axios.pos  t( this.HOST + "/login",
						      {
						        userId: 'admin',
						        password: '123456'
						      }
						      ).then(res=>{
						      console.log(res)
						    }).catch(error=>{
						      console.log(error)
						    });
		注意: 此种跨域解决方案，只能适用于测试阶段，打包的时候，不会具备服务
		不能跨域了，后端解决
Mock: 数据模拟
	1.自己创建JSON文件。使用get请求形式访问数据
		优点： 方便快捷
		缺点：只能存在get请求
	2.项目中集成服务器，模拟各种接口
		优点：模拟真实显示环境
		缺点：泽恩加开发成本
	3.直接使用线上数据
		优点：真实
		缺点：不一定每个项目都存在
	4.数据模拟库moackjs

路由
	1.安装
		npm install vue-router
	2.引用
		import VueRouter from 'vue-router'
		Vue.use(VueRouter);
	3.路由嵌套
		1.children
		2.也要给显示位置（router-view）

ElementUI
	1.安装element-ui
		npm i element-ui -S
	2.安装按需加载的依赖
		npm install babel-plugin-component -D
	3.修改 .babelrc 
		{
		  "presets": [
		    ["env", {
		      "modules": false,
		      "targets": {
		        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
		      }
		    }],
		    "stage-2"
		  ],
		  "plugins": ["transform-vue-jsx", "transform-runtime",[
		      "component",
		      {
		        "libraryName": "element-ui",
		        "styleLibraryName": "theme-chalk"
		      }
		    ]]
		}
	4.引入组件
		import { Button, Select } from 'element-ui';
		Vue.use(Button)
		Vue.use(Select)
	5.使用element-ui
VueX
	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

	开发大型单页面应用时使用

	VueX状态管理
		 view->(dispatch)Action->(Commit) Mutations->(Mutate)State->View
		 注意：Action不是必需品，如果有异步操作才可能用到，否则跨域不使用

		 使用
		 	1.安装
		 		npm install vuex --save
		 	2.引入依赖
		 		import Vuex from 'vuex'
		 		Vue.use(Vuex)
		 	3.创建 store 仓库
		 		const store = new Vuex.Store({
				  state: {
				    count: 0
				  },
				  mutations: {
				    increment (state) {
				      state.count++;
				    },
				    desment(state){
						state.count--;
				    }
				  },
				  actions:{
				  	incrementA(context){
				  		context.commit("increment");
				  	},
				  	desmentA(context){
						context.commit("desment");
				    }
				  }
				})
			4.使用
				获取数据
					this.$store.state.count
				调用 mutations 方法
					this.$store.commit('increment');
				调用 actions 
					this.$store.dispatch("incrementA");
			注意：
				Action 提交的是 mutation. 而不是直接改变状态
				Action 可以包含任意异步操作