VUE脚手架cliLWH8011的博客-

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与$

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":"u5c0fu7c73u7535u89c64A 32u82f1u5bf8",   "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'] 映射方法带命名空间