基于vue-cli3的vue权限框架搭建

环境搭建事先准备

本文只注重前端的搭建，后端只提及部分
本框架是基于vue-cli3搭建的，首先你需要安装vue-cli脚手架。
新手上路，有什么写错的请指点

• 查看你的版本，cmd命令

vue -V

• 创建你的项目（admin为项目名称）

vue create admin

然后安装你的各种负载，这里不进行详细说明
我的package.json可以进行参考

  "dependencies": {
    "axios": "^0.19.0",
    "babel-plugin-import": "^1.12.2",
    "core-js": "^3.3.2",
    "enquire.js": "^2.1.6",
    "less": "^3.10.3",
    "vue": "^2.6.10",
    "vue-apexcharts": "^1.5.1",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "less-loader": "^5.0.0",
    "lint-staged": "^9.4.2",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "svg-sprite-loader": "^4.1.6",
    "vue-template-compiler": "^2.6.10"
  },

• 配置vue.config.js
  在vue-cli3以后，目录结构十分精简，那么我们的配置写在哪里？
  官方文档有说明，在项目根目录下面新建vue.config.js文件
  以下我的配置，可以结合官网文档参考一下

const path = require('path') // 引入path模块
function resolve (dir) {
  return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径
}

module.exports = {
  publicPath: '/', // 基本路径
  outputDir: 'dist', // 输出文件目录
  lintOnSave: true, // eslint-loader 是否在保存的时候检查
  productionSourceMap: true, // 生产环境是否生成 sourceMap 文件
  // css相关配置
  css: {
    extract: true, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps
    modules: false,
    loaderOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'link-color': '#1DA57A',
          'border-radius-base': '2px'
        },
        javascriptEnabled: true
      }
    }
  },
  chainWebpack: config => {
    // 配置路径别名
    config.resolve.alias
      .set('@&#