VUE脚手架cli

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

脚手架安装

1.安装node.js 进入官网下载(安装过程全部默认)

2.测试node是否安装成功，打开cmd，输入node -v，出现版本号即安装成功，检测npm安装，npm -v

3.配置下载源

• 全局安装nrm(npm i nrm -g)
• 注册淘宝下载源(nrm use tao)
• 通过nrm ls可以查看所有的源

4.安装vue脚手架

• npm install @vue/cli -g
• 测试vue是否安装成功,vue -V
• 创建vue的项目,vue create 项目名

5.选择预设

• Manually select features 自定义预设

1. Babel 将高级版本ES转换为浏览器识别的JS语法
2. TypeScript JS的超集，提供了JS面向对象支持
3. Progressive Web App (PWA) Support PWA使应用向原生APP
4. Router 路由请求所对应的地址
5. Vuex 数据状态管理器、用于多页面传参
6. CSS Pre-processors CSS预处理
7. Linter / Formatter 代码检查工具
8. Unit Testing 单元测试
9. E2E Testing 端端测试

• 选择路由模式

Hash模式 no

• 选择css预处理器

Less

• 选择插件的配置存放

选择In package.json

• 是否保存预设
  N不保存

vue组件的组成

• 一个组件就是一个.vue文件

<template></template>
<script></script>
<style></style>

• template 模板 只有一个根节点
• script业务逻辑

export default {
    name:"",
    data(){
        return {
            
        }
    },
    methods:{}
}

• style css的样式

1. app.vue 里面的css默认是公用的css
2. 通过 使用

vue使用组件

1. 编写.vue组件‘
2. 导入组件

import Counter from 'xxx'

3. 注册 components:{Counter}
4. 使用

组件的生命周期

1. 创建前后

• beforeCreate
• created 组件创建完毕 可以获取到实例的this，通常网络请求，定时器在这里执行

2. 挂载前后

• beforeMount
• mounted 挂载完毕-组件已经首次渲染到页面 可以访问到dom节点 ref

3. 更新前后

• beforeUpdate
• updated

4. 销毁前后

• beforeDestroy 移除定时器,事件等
• destroyed

$route与$router的区别

• $router 整个路由实例 存放有路由切换的相关方法(主要存放方法) push replace go forward back
• $route 当前路由页面 存放路由页面相关信息 meta,query,params,path,name

vue路由是如何实现传递参数

• params路由参数/produce/:id/:name,$route.params.id
• query查询 /produce?name=xxxxx $route.query.name
• meta元素 meta:{auth:true} $route.meta.auth

路由守卫的方法有哪些

1.组件内部

• beforeRouteEnter(to,from,next){}//进入路由前执行的方法
• beforeRouteLeave(to,from,next){}//离开路由前执行的方法
• beforeRouteUpdate(to,from,next){}//路由更新前执行的方法

2.路由独享

• beforeEnter(to,from,next){}//写在route下的index.js中的路由中

{
    path: '/produce/:id',
    name: 'Produce',
    component: Produce,
	beforeEnter(to,from,next){Bus.$emit("showtabs",false);next();},
	meta:{
		auth:0
	}
 },

3.全局路由守卫

• router.beforEach((to,from,next)=>{})
• router.afterEach((to,from,next)=>{})

router.beforeEach((to,from,next)=>{
	var user = sessionStorage.getItem("user")||"{}";
	user = JSON.parse(user);//将user数据转换为对象
	to.meta.auth==undefined?to.meta.auth=-1:'';
	if(to.meta.auth<=-1){
		next(true);
	}else{
		if(user.M_ID){
			if(user.M_Rank>=to.meta.auth){
				next(true);
			}else{
				alert("只有会员才可以查看!");
				next("/mine");
			}
		}else{
			next("/login?redirect="+to.path)
		}
		next(true);
	}
	
})

参数说明

• to 要进入的路由
• from 从哪个路由进入
• next 下一步操作
• next() next(false) next(true) next(url)

this说明

before路由守卫里面没有this

next(vm=>{vm是this})

cookie、sessionStorage、localStorage传递

cookie可以设置过期；大小设置；api操作复杂；
每次http请求都会发送到服务器端；服务器端也能设置cookie(后端与前端交互的必备佳品)

localStorage存储的数据会大些；不会被发送到后端；api操作简单；非主动清除不会过期

sessionStorage与localStorage 就是关闭浏览器会清空

vuex

vue的全局状态管理器，实现组件之间跨层传递数据，实现数据与视图响应式更新

需要多个组件使用的数据或者方法时可以将数据方法放在vuex里面

• state状态数据

1. 获取:this.$store.state.xxx||...mapState([xxx,yyy])
2. 相当于vue里面的data

• getters获取

1. 获取：this.$store.getters.xxx||...mapGetters([xxx,yyy])
2. 相当于vue里面的computed

• mutations方法

1. 获取：this.$store.commit(xxx,data)||…mapMutations([xxx,yyy])
2. 相当于vue里面的methods

• actions动作

1. 获取：this.$store.dispatch(xxx,data)||…mapActions([xxx,yyy])
2. 相当于vue里面的methods(异步的)

• modules模块

1. vuex允许我们将store分割成模块(module),每一个模块都有state,mutations,actions,getters

const state = {
	name:"mumu",
	age:18
}

const mutations = {
	ADD_AGE(state,step=1){
		state.age+=step;
	},	
}

const getters = {
	getGoods(state,getters,rootState){
		console.log(state,getters,rootState);
		return getters.goodNum;
	}
}

const actions = {
	addAge(context,arg){
		context.commit('ADD_AGE',arg);
		var good = {"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/ef617fac-7489-436d-b74e-c43582f09633.jpg",
		"num":1,"price":899,"name":"\u5c0f\u7c73\u7535\u89c64A 32\u82f1\u5bf8",
		"goods_id":2172700021,"select":true}
		console.log(context);
		context.commit('addGood',good);
		context.rootState.goods.pop();
	}
}

export default {state,mutations,actions,getters}

2. state:默认带命名空间login$store.state.login.age
3. mutations:默认不带命名空间$store.commit(xxx)
4. actions:默认不带命名空间$store.dispatch(xxx),第一参数context(commit,getters,dispatch,rootState全局state,rootGetters全局的getters)
5. getters：默认不带命名空间,
   访问：

$store.getters.xxx

state 模块的state;getter 全局的getters(包含模块的getters);rootState 全局的state

• 命名空间
  namespaced:true

1. getters

const getters = {
	getGoods(state,getters,rootState){
		console.log(state,getters,rootState);
		return getters.goodNum;
	}
}
//引用
$store.getters['login/getGoods']

2. mutation

const mutations = {
	ADD_AGE(state,step=1){
		state.age+=step;
	},	
}
//引用
$store.commit('login/ADD_AGE')

3. actions 访问全局mutation

context.commit('addGood',good,{root:true});
context.rootState.goods.pop();

本地mutations

context.commit('ADD_AGE',2);

访问actions

$store.dispatch('login/addAge',-2)

映射方法

...mapGetters['login/GetGoods']
映射方法带命名空间