Vue项目配置ElementUI、Router、Axios

一、配置ElementUI

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

添加一个按钮测试效果

二、配置Router

1. 默认配置方式

将新增的.vue页面添加到routes数组中即可访问，可以使用import先引入页面，也可以直接在component: () => import( '/views/pages/xxx.vue')的方式引用

import Vue from 'vue'

import VueRouter from 'vue-router'
import HomeView from '/views/pages/HomeView.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import( '/views/pages/AboutView.vue')
    },{
    	path: '/login',
        name: 'login',
        component: () => import( '/views/pages/login.vue')
    }
]

const router = new VueRouter({
    routes
})

export default router

2. 通过目录结构自动生成路由

指定一个目录，遍历目录下所有.vue文件，以实现自动生成路由，

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '/views/pages/HomeView.vue'

Vue.use(VueRouter)

const routes = []


function importAllVue(r){
  r.keys().forEach(key => {
    if (key.split('.')[1]==='/login'){
      routes.push({
        path: (key.split('.'))[1],
        component: ()=>r(key),
      })
    }else {
      routes.push({
        path: (key.split('.'))[1],
        meta: {
          requireAuth: true,
        },
        component: ()=>r(key),
      })
    }
  })

  console.log(routes)
}

importAllVue(require.context('/views/pages', true, /\.vue$/, 'lazy'))

const router = new VueRouter({
  routes
})

// 此处添加路由守卫代码 

export default router

注意：此处遍历中进行了判断，如果时登录页面就不要鉴权，否则都需要鉴权，需在下面拦截器中配置鉴权拦截

3. 路由拦截器配置（官方名称：路由守卫）

添加以下代码以实现登录拦截

/**
 * 路由拦截器
 */
router.beforeEach((to, from, next) => {
  if (to.matched.some(res=>res.meta.requireAuth)){
    console.log('进入鉴权拦截')
    // 检测是否有登录的token
    const token = localStorage.getItem('token')
    if (token){
      // 如果有token 下面可以通过调用获取用户信息接口或其他检测token的接口进行token有效性验证

      next()
    }else {
      // 没有token的情况下可以自动跳转到登录页面
      console.log('没有登录，跳转到登录页面')
      next({ path: '/login' });
    }
  }else{
    console.log('无需鉴权直接跳转')
    next()
  }
})

三、Axios配置

新建是个request.js文件，对axios做配置

// 导入axios
import axios from 'axios'
// 使用element-ui Meseage 做消息提醒
import { Message } from 'element-ui'

const service = axios.create({
    baseURL: 'http://localhost:8080/',
    timeout: 180 * 1000
})

// 请求拦截器
service.interceptors.request.use(config => {
    const token = localStorage.getItem('token');
    if (token) {
        // 请求头中携带token
        config.headers = {
            'token': token
        }
    }
    return config;
})

// 响应拦截器
service.interceptors.response.use(res => {
    // 请求信息码为0返回请求结果
    if (res.data.code === 200) {
        return res.data
    }else { // 否则显示报错信息
        Message.error(res.data.message)
    }
}, error => {
    // 报错是弹出错误信息
    Message.error(error.data.message)
})