vue生命周期：

Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。

1、beforeCreate

　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。

2、created

　　实例已经创建完成之后被调用。在这一步，实例已经完成以下的配置：数据观测，属性和方法的运算，watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。

3、beforeMount

　　在挂载开始之前被调用：相关的render函数首次被调用。

　　该钩子在服务器端渲染期间不被调用。

4、mounted

　　el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素，当mounted被调用时vm.$el也在文档内。

　　该钩子在服务端渲染期间不被调用。

5、beforeUpdate

　　数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。

　　你可以在这个钩子中进一步第更改状态，这不会触发附加的重渲染过程。

　　该钩子在服务端渲染期间不被调用。

6、updated

　　由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

　　当这个钩子被调用时，组件DOM已经更新，所以你现在可以执行依赖于DOM的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

　　该钩子在服务端渲染期间不被调用。

7、activated

　　keep-alive组件激活时调用。

　　该钩子在服务器端渲染期间不被调用。

8、deactivated

　　keep-alive组件停用时调用。

　　该钩子在服务端渲染期间不被调用。

9、beforeDestroy 【类似于React生命周期的componentWillUnmount】

　　实例销毁之间调用。在这一步，实例仍然完全可用。

　　该钩子在服务端渲染期间不被调用。

10、destroyed

　　Vue实例销毁后调用。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

　　该钩子在服务端渲染不会被调用。

router生命周期

vue-router提供了三个钩子，beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave。

beforeRouterEnter是讲道理是在最开始执行的，这个时候应该是没有$el，没有挂载，没有this的。所以这个时候就没有所谓的数据了，父组件子组件都没有。但是很多时候我们要在这里面操作data。我们会传入一个vm来获取this，这个时候路由next里面的函数就要等到挂载完成以后才会执行。如果不传入vm这时候beforeRouterEnter是最先执行的。

beforeRouterEnter（to,from,next){

　　next(vm=>{

            //自己的代码

　　})

}

router拦截器

登录拦截逻辑

第一步：路由拦截

首先在定义路由的时候就需要多添加一个自定义字段requireAuth，用于判断该路由的访问是否需要登录。如果用户已经登录，则顺利进入路由， 

否则就进入登录页面。在路由管理页面添加meta字段

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const routes = [

{

path: '/',

name: "欢迎",

meta: {

            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的

        },

component: resolve => require(["../components/Hello.vue"], resolve)

},

{

path: '/login',

name: "登录",

/*meta: {

            requireAuth: false,  // 添加该字段，表示进入这个路由是需要登录的

        },*/

component: resolve => require(["../view/login/login.vue"], resolve)

}

]

export default new Router({

    base: "/",

    routes

})

定义完路由后，我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。。所以在main.js加上

router.beforeEach((to, from, next) => {

    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限

        if (store.state.token) {  // 通过vuex state获取当前的token是否存在

            next();

        }

        else {

            next({

                path: '/login',

                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由

            })

        }

    }

    else {

        next();

    }

})

每个钩子方法接收三个参数： 

* to: Route: 即将要进入的目标 路由对象 

* from: Route: 当前导航正要离开的路由 

* next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 

* next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。 

* next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。 

* next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

确保要调用 next 方法，否则钩子就不会被 resolved。

其中，to.meta中是我们自定义的数据，其中就包括我们刚刚定义的requireAuth字段。通过这个字段来判断该路由是否需要登录权限。需要的话，同时当前应用不存在token，则跳转到登录页面，进行登录。登录成功后跳转到目标路由。

完成后，我们可以在登录页面。控制用户登录成功后,vuex的token状态改变就可以了

<script>

export default {

  methods:{

    login(){

      this.$store.commit('setToken','true');    //改变token状态

      let redirect = decodeURIComponent(this.$route.query.redirect || '/');  获取登录成功后要跳转的路由。

      this.$router.push({

        path: redirect

      })

    }

  }

}

</script>

axios拦截器

service.interceptors.request.use(config => {

//发送请求时拦截

}, error => {  //请求错误处理

    app.$vux.toast.show({

        type: 'warn',

        text: error

    });

    Promise.reject(error)

});

service.interceptors.response.use(

    response => { 

//返回拦截

    error => {  //响应错误处理

    }

);

vue环境配置，开发、正式、测试在有些情况下需要分别配置，可减少很多每次打包操作，操作如下

想实现通过不同的命令，打包调用不同环境的API，实现实现前端自动化部署。

前端自动化部署工程比较复杂，这里只介绍通过不同的命令，打包的时候调用不同环境的API，

例如：

npm run build 调用开发环境接口，打包开发环境

npm run build:test 调用测试环境接口，打包测试环境

npm run build:prod 调用生产环境接口，打包生产环境

vue项目用vue-cli脚手架安装完成之后，生成的项目中会有build,config这两个文件夹

1、在build文件下新建webpack.test.conf.js

在build文件下新建webpack.test.conf.js，将webpack.prod.conf.js内容复制过来。

修改webpack.test.conf.js文件

将const env = require('../config/prod.env')；

修改为：const env = require('../config/test.env')；

2、在config文件下新建test.env.js

在config文件下新建test.env.js，将prod.env.js内容复制过来；

分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT，

dev.env.js

test.env.js

prod.env.js

3、在build文件下新建test.js

把build.js 内容复制到test.js

将

constwebpackConfig =require('./webpack.prod.conf')

修改为：

constwebpackConfig =require('./webpack.test.conf')

4、修改package.json

配置axios请求的时候，接口地址直接调用 process.env.API_ROOT 就好了，

打包的时候执行 npm run build:test就是调用的测试接口地址

vue组件懒加载

链接：https://www.cnblogs.com/zhanyishu/p/6587571.html

vue权限控制

链接：https://mp.weixin.qq.com/s/frAxVsMwpIHDVel_98GC5A

vue-cli3.0配置

链接：https://www.cnblogs.com/sinosaurus/p/10294399.html

vue配置开发，测试，生产环境api

链接：https://segmentfault.com/a/1190000016664571?tdsourcetag=s_pctim_aiomsg