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'
  1. 注册 components:{Counter}
  2. 使用

组件的生命周期

  1. 创建前后
  • beforeCreate
  • created 组件创建完毕 可以获取到实例的this,通常网络请求,定时器在这里执行
  1. 挂载前后
  • beforeMount
  • mounted 挂载完毕-组件已经首次渲染到页面 可以访问到dom节点 ref
  1. 更新前后
  • beforeUpdate
  • updated
  1. 销毁前后
  • beforeDestroy 移除定时器,事件等
  • destroyed

r o u t e 与 route与 routerouter的区别

  • $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}
  1. state:默认带命名空间login$store.state.login.age
  2. mutations:默认不带命名空间$store.commit(xxx)
  3. actions:默认不带命名空间$store.dispatch(xxx),第一参数context(commit,getters,dispatch,rootState全局state,rootGetters全局的getters)
  4. 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']
  1. mutation
const mutations = {
	ADD_AGE(state,step=1){
		state.age+=step;
	},	
}
//引用
$store.commit('login/ADD_AGE')
  1. 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']
映射方法带命名空间
©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页