搭建Vue项目

初始化Vue前端项目

# 安装 Vue-cli 3.0 脚手架工具
npm install -g @vue/cli
# 安装完成后，输入 vue -V 查看是否安装成功 
vue create 

# 其他命令
npm install
npm run serve
npm run build
npm run lint

安装插件

npm i vuex -S
npm i element-ui -S
npm i font-awesome -S

# if use sass
npm install node-sass --save-dev
npm install sass --save-dev
npm install sass-loader --save-dev

# if use stylus
npm install stylus --save-dev
npm install stylus-loader --save-dev

npm i axios -D

封装 token.js

export const tokenKey = 'X-Auth-Token';

export const setStore = (name, content) => {
    if (!name) return;
    if (typeof content !== 'string') {
        content = JSON.stringify(content)
    }
    window.localStorage.setItem(name, content)
};

export const getStore = name => {
    if (!name) return;
    return window.localStorage.getItem(name)
};

export const removeStore = name => {
    if (!name) return;
    window.localStorage.removeItem(name)
};

export const getToken = () => getStore(tokenKey);

export const setToken = () => setStore(tokenKey);

export const removeToken = () => removeStore(tokenKey);

封装 axios

import axios from 'axios'
import {Message} from 'element-ui'
import Util from './index';
import {getToken} from './token'

if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = 'http://127.0.0.1:8081'
} else if (process.env === 'production') {
    axios.defaults.baseURL = 'https://netease2.bluej.cn/';
}

axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

axios.interceptors.request.use(config => {
    let token = getToken();
    if (!Util.isNullOrBlank(token)) {
        // 自定义header，后台需要进行校验
        let header = {version: 1.0, source: 'Web', token: token};
        config.headers['X-Auth-Token'] = JSON.stringify(header)
    }
    return config
}, err => {
    Message.error({message: '请求错误!'});
    return Promise.reject(err)
});

axios.interceptors.response.use(response => {
    const data = response.data
    if (data.code === 0) {
        return data.result
    }
    if (data.message !== null) {
        Message.error(data.message);
    } else {
        Message.error("未知错误!");
    }
    return Promise.reject(null)
}, error => {
    Message.error({message: '请求错误!'})
    return Promise.reject(error)
})

export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, params).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    });
}

export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err)
        })
    });
}

动态路由

const whiteList = ['/login', '/register'];//白名单
router.beforeEach((to, from, next) => {
    if (whiteList.indexOf(to.path) !== -1) {
        next();
        return
    }
    if (Util.isNullOrBlank(getToken())) {
        next('/login')
    } else {
        Util.initMenu(router, store);
        next();
    }
});

util.initMenu = (router, store) => {
    if (store.getters.routes.length > 0) {
        return
    }
    apiGetMenus().then(routes => {
        let fmtRoutes = formatRoutes(routes);
        router.addRoutes(fmtRoutes);
        store.commit('SET_ROUTES', fmtRoutes);
    })
};

export const formatRoutes = (routes) => {
    let fmRoutes = [];
    routes.forEach(router => {
        let {path, component, name, meta, iconCls, children} = router;
        if (children && children instanceof Array) {
            children = formatRoutes(children);
        }
        let fmRouter = {
            path: path,
            component: () => import('@/components/' + component),
            name: name,
            iconCls: iconCls,
            meta: meta,
            children: children
        };
        fmRoutes.push(fmRouter);
    });
    return fmRoutes;
};