vue-admin: 一套干净的企业数据管理系统/运营平台模版，完成了菜单管理、用户管理、角色管理和权限管理四个基础模块，技术栈使用的是vue,element-ui, axios。

# 项目介绍
此项目为企业数据管理系统的前端部分，后端部分请参考[springboot-admin](https://gitee.com/lazymk-cg-templates/springboot-admin)，项目实现了菜单管理、用户管理、角色管理和权限管理四个基础模块，菜单管理结合动态路由实现了菜单的自由添加。通过指令实现了结合用户权限配置做菜单和按钮的权限控制。如有问题可加入交流群：877957236

# 使用步骤

执行以下步骤前请确保已安装NODE环境和Java环境

1. 克隆后端项目代码（Java）并启动，详情请参考[springboot-admin](https://gitee.com/lazymk-cg-templates/springboot-admin)
2. 克隆此仓库代码
3. 在此项目根目录下执行`npm install`
4. 在此项目根目录下运行`npm run dev`

超级管理员账号：admin，密码：123123

# 项目预览
![在这里插入图片描述](doc/images/menu1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](doc/images/menu2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](doc/images/user1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](doc/images/user2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](doc/images/role1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](doc/images/role2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](doc/images/role3.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE=,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](doc/images/permission1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI2Mjc4NjE=,size_16,color_FFFFFF,t_70)

# 目录说明
- build: 打包逻辑，通过npm run build时执行该目录下的build.js
- config: 配置文件目录
- dist: 打包后的目录，用于发布。（在执行npm run build后产生）
- src/assets/constants: 常量文件目录
- src/assets/api: 存放接口定义文件
- src/assets/style: 存放样式文件
- src/assets/utils: 存放工具文件
- src/components: 存放项目自定义组件文件
- src/pages: 存放项目页面文件
- src/router: 存放Vue路由配置
- src/filters: 存放自定义过滤器
- src/directives: 存放自定义指令
- src/layouts: 存放布局组件
- static: 存放静态文件，通过`项目域名/static`可直接访问该目录下的资源

# 环境配置
#### 环境运行命令
- 开发环境: `npm run dev`
- 测试环境: `npm run build-test`
- 生产环境: `npm run build`

#### 环境配置文件

- config/dev.env.js
- config/test.env.js
- config/prod.env.js

在配置文件中配置的属性，可通过`process.env.属性名`获取，可参考src/page/Index.vue。
其中，非开发环境命令运行后将产生dist目录，dist目录则为发布内容，将其发布至nginx或其他服务器即可。

# API本地代理配置
接口本地代理配置在config/index.js中，代码如下：
```javascript
module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:9000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    ...
  }
}
```

# 懒加载
采用import方法即可。详细用法请参考[Vue Router懒加载部分](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97)和[Webpack代码分离](https://webpack.docschina.org/guides/code-splitting/)

# API调用
- 接口调用采用axios，axios的默认配置信息在src/assets/utils/axios.js文件中。为了统一处理请求，我们为其做一层封装，详情请查看src/assets/utils/request.js。
- 关于request.js的使用，可以参考src/pages/Index.vue和src/assets/service/IndexService.js。

# 代码格式化
运行`npm run fix`即可，将自动根据ESLint配置进行代码格式化。

# ESLint的启动和关闭
ESLint的启动和禁用在config/index.js文件中配置，如下：
```javascript
module.exports = {
  dev: {
    useEslint: false, // 为false时表示禁用
    ...
  },
  ...
}
```
在关闭ESLint的情况下，仍可以运行`npm run fix`进行代码格式化。

Kin/vue-admin

简介

发行版

贡献者

近期动态

Kin/vue-admin .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

Kin/vue-admin