Vue vue-cli脚手架

Vue 脚手架vue-cli

官方配置的关于vue的各种功能，就叫做脚手架； 

步骤：
1、安装vue-cli 只需要安装一次;
①使用npm安装：npm install -g @vue/cli
②或者使用yarn安装 yarn global add @vue/cli
2、创建项目
vue create 项目名称
注意，项目文件中不要出现vue.js这个文件，要不然安装的时候，会不停的弹出vue.js，建议找一个空文件夹
3、安装的时候需要注意一个问题，第 一步需要使用上下键切换安装选项，不要选择第一个default配置，因为会有eslint, 一个不小心，比如多个空格就出现语法错误报错。选择Manually select features
4、选择配置项，按空格选中;

手动配置 vue-router
1、安装 npm install vue-router
2、引入 import VueRouter from ‘vue-router’
3、使用 Vue.use(VueRouter);
4、需要配置router ->route.js
5、在页面引入一个

其实不用自己配，我们在创建vue项目的时候，选择router选项，可以直接搭好路由;

Vuex

状态管理容器，能够管理你的数据状态。 用于复杂的页面，一个数据多个页面 或者多个路由共享（互相交互）时，多层级数据交互时可以使用vuex

手动配置Vuex步骤

1、下载

		npm install vuex

2、建一个store文件夹，建一个store.js文件：

		①引vue和vuex;
		②Vue.use(Vuex)
		③export default new Vuex.Store({			
			
			state:{//你想要哪些数据被所有组件直接拿到，就把这些数据放在state下
						count:0;// 初始化状态 
		*** 注意：改变state中的引用类型的数据必须要让数据直接发生变化。比如：	
						arr: [{id: xx,num:123}]  => [{id: xx,num:12456}] 
						State.arr = [...state.arr]	
						
					// view层引用：$store.state.count
					
				},
				
			mutations:{
					//改变数据的方法...在mutations下的操作都是同步的。异步使用actions;			
						add(state){		//这里的state就是初始化状态，
								.....此处为改变state.xxx数据的代码
									}	
							}，
	    	getters:{	//等同于computed,当数据发生变化的时候派生出另一个"事务"，这个时候使用getters
						  //view层使用   this.$store.getters.xxx
						  
					toDou:(state)=>{
			            let arr = JSON.parse(JSON.stringify(state.ary));
			            return arr.map(e=>{
			                if(e.num<10){
			                    e.num = '0'+e.num
			                }else{
			                    e.num = '' + e.num
			                }
			                return e;
			            });
    			}
			},
			
		  actions:{
	        actionsadd(context,n){	
	        //异步的方法名 context固定写，n为传参。
	        //只要是这个数据状态需要很多组件使用，并且此数据还是后台请求的数据。需要用actions
	        //view 层使用：`this.$store.dispatch('actionsName', 传参)`
	        
	          setTimeout(() => {
	                context.commit('add',n);
	            }, 1500);
	        }
		 }
	})

5.在main.js中，

		new Vue({
		  store,
		  render: h => h(App),
		}).$mount('#app')

在输出分发时候可以使用辅助函数来简化你的操作（不用也行）,

实测：mapMutations,mapActions 不好用，坑多。。不用也罢

App.vue文件中：

<script>
	import {mapState,mapGetters} from 'vuex';
	export default {
	  name:'app',
	  methods:{
	      fn(){
	        // this.$store.commit({
	        //   type:'add',
	        //   n:1
	        // });
	        this.$store.dispatch('actionsadd',{n:1});
	      }
	  },
	  computed:{
	    ...mapState(['count'])
	  }
	}
</script>