基于vue-cli@3.0搭建管理系统项目并进行配置优化

项目说明

本示例根据vue-cli@2.0项目进一步优化,使用vue-cli@3.0搭建；

主要针对项目结构和权限管理进行优化。github地址

运行前先server文件夹通过node启动express(使用express简单模拟登陆和获取用户信息接口)

node app.js

主要实现功能

1. 使用express模拟用户数据；

2. 重新封装axios请求

3. 用户权限管理，动态生成侧边栏和面包屑导航；

4. 在vue中使用过滤器filters；

5. IE兼容处理、移除console；

项目目录：

├─public
├─server
└─src
    ├─api
    ├─assets
    ├─components
    ├─filters
    ├─router
    ├─store
    ├─utils
    └─views
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│  vue.config.js

环境搭建

#全局安装vue-cli
cnpm install -g @vue/cli
#创建项目hello-world
vue create hello-world

配置环境变量的baseURL

在src/api/config文件夹下新建env.js文件

let baseUrl = '';

const env = process.env
if (env.NODE_ENV == 'development') {
    baseUrl = `https://easy-mock.com/mock/5d672a8e8fe5585a2803432f/vueAdmin`; // 开发环境地址
} else if (env.NODE_ENV == 'production') {
    baseUrl = `https://api.xxxxxx.cn`; //生产环境地址
} else if (env.NODE_ENV == 'test') {
    baseUrl = `https://api.xxxxxx.cn`; //测试环境地址
}

export {
    baseUrl,
    env
}

在重新封装的axios中引入

import {baseUrl} from '@/api/config/env'

// 创建axios实例
const service = axios.create({
    baseURL:baseUrl, //配置的开发环境和线上环境地址
    timeout: 5000 // 请求超时时间
})

---

IE兼容处理、移除console

//安装依赖
cnpm install @babel/polyfill -s
cnpm install babel-plugin-transform-remove-console -s

配置babel.config.js

const plugins = []
if (process.env.NODE_ENV === 'production') {
  // 移除console.log
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.array.iterator',
        'es6.promise',
        'es7.promise.finally',
        'es6.symbol',
        'es6.array.find-index',
        'es7.array.includes',
        'es6.string.includes',
        'es6.array.find',
        'es6.object.assign'
      ]
    }]
  ],
  plugins
}

具体权限管理和动态生成侧边栏请查看源代码或者下方参考文章。

参考文章：

vue中关于router，vuex，axios，api，utils的一些常用配置

vue-cli3 项目从搭建优化到docker部署

vue-cil 3.0 配置说明