https://github.com/zhangbinhub/acp-admin
使用vue全家桶(Vue+Vue-router+Vuex+axios)、ElementUI 样式库构建的前端项目。该项目是前后端分离架构中的“前端部分”
https://github.com/zhangbinhub/acp-admin
axios cropperjs echarts element-plus nodejs vue-cli3 vue-cli4 vue-router vue3 vuex
Last synced: about 1 year ago
JSON representation
使用vue全家桶(Vue+Vue-router+Vuex+axios)、ElementUI 样式库构建的前端项目。该项目是前后端分离架构中的“前端部分”
- Host: GitHub
- URL: https://github.com/zhangbinhub/acp-admin
- Owner: zhangbinhub
- License: apache-2.0
- Created: 2018-12-14T15:23:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-12T13:11:05.000Z (over 4 years ago)
- Last Synced: 2025-03-31T19:12:21.664Z (over 1 year ago)
- Topics: axios, cropperjs, echarts, element-plus, nodejs, vue-cli3, vue-cli4, vue-router, vue3, vuex
- Language: Vue
- Homepage:
- Size: 12.5 MB
- Stars: 27
- Watchers: 2
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# acp-admin
**此工程已不再更新，由于某些不可抗因素，已转移至https://gitee.com/zhangbinhub/acp-admin**
###### v5.1.3 [版本更新日志](doc/version_history.md)
## 浏览器兼容性
> 由于js-base64 3.0及以上版本不再支持IE，因此从4.2.0开始不再支持IE
支持的浏览器：
- Chrome latest（推荐，完美）
- Firefox latest（完全支持）
- Edge（完全支持）
## 简介
使用vue全家桶(Vue+Vue-router+Vuex+axios)、ElementUI样式库构建的前端项目。该项目是前后端分离架构中的“前端部分”
。[后端工程](https://github.com/zhangbinhub/acp-admin-cloud)
## 相关组件官方文档
- [Vue 3](https://v3.cn.vuejs.org/)
- [Vue CLI 5](https://cli.vuejs.org/zh/)
- [Element-plus](https://element-plus.gitee.io/#/zh-CN)
- [echarts](https://www.echartsjs.com/index.html)
- [cropperJs](https://github.com/fengyuanchen/cropperjs)
## 技术栈
- webpack 5
- nodejs
- vue3
- vue cli 5
- vuex
- vue-router
- axios
- echarts
- cropperJs
- mockjs
- js-sha256
- js-base64
- vue-json-editor
- Element-plus
## 总体架构
#### 说明
- 前后端交互 HttpStatus Code 说明
| HttpStatus | 描述 |
|------------|-------------|
| 200 | 请求成功 |
| 201 | 资源创建成功 |
| 400 | 业务错误 |
| 401 | token（登录）失效 |
| 403 | 权限不足 |
| 404 | 找不到资源 |
| 500 | 系统异常 |
## 部署运行
该工程默认运行于 nodejs 中，也可根据实际需要运行在其他 web 容器
## 一、环境搭建
##### （一）安装 [node.js](http://nodejs.cn)，并验证
``` bash
node -v
```
##### （二）设置淘宝 npm 镜像
```bash
npm config set registry https://registry.npm.taobao.org
```
##### （三）安装升级插件
```bash
npm install -g npm-check-updates
```
## 二、依赖插件
##### （一）安装
``` bash
npm install
```
##### （二）更新
``` bash
ncu -u
npm install
```
## 三、开发
##### （一）国际化
- 语言包路径：src/lang
- 在语言包路径下新增或修改语言属性
- 在 src/lang/index.js 中加载新的语言包
##### （二）mock
- 如果要使用 mock，在 src/main.js 中加入 import './mock' 即可
- src/mock 中添加或修改 mock 信息
- src/mock/index.js 中引入，并配置相应的 url 拦截策略
##### （三）配置文件
1、全局工程配置文件
[vue.config.js](vue.config.js)
[配置参考](https://cli.vuejs.org/zh/config/#css-loaderoptions)
2、项目配置文件
- 持久化组件：vuex
- 路径：src/store
- 入口：[src/store/index.js](src/store/index.js)
- 系统信息配置文件：[src/store/config/appInfo.js](src/store/config/appInfo.js)
##### （四）静态资源
- 路径：src/assets
##### （五）Router
- 组件：vue-router
- 路径：src/router
- 入口：[src/router/index.js](src/router/index.js)
- 路由配置及说明：[src/router/routers.js](src/router/routers.js)
##### （六）http 请求
- 组件：axios、vue-axios
- 入口及全局配置：[src/plugins/plugin-axios.js](src/plugins/axios/plugin-axios.js)
- 请求 api
- 路径：src/api
- 入口：[src/api/index.js](src/api/index.js)
- api 编写：新增或修改文件，在[src/api/ApiLists.js](src/api/ApiLists.js)中引入并配置
##### （七）页面布局
- 独立页面路径：src/components/pages
- 布局框架：src/components/layout
- 框架内页面：src/components/views
- 测试页面：src/components/test
- src/components 下其他路径存放自定义组件
## 四、部署
##### （一）编译打包
- 工程根目录下运行
```
npm run build
```
- 执行成功后工程根目录下会出现dist文件夹，将dist文件夹中的所有文件复制到nginx的html下即可
- 如果部署在nginx里html的根目录，访问url为 http://nginxHost:port
- 如果部署在nginx里html的子目录（如platform/admin），访问url为 http://nginxHost:port/platform/admin
##### （二）nginx配置
假如工程部署在nginx中，需要修改nginx.conf，增加后端接口的反向代理
- 代理后端 gateway
```
location ~ ^.*/v1/api/(.*)$ {
set $delimeter "";
if ( $args != "" ) {
set $delimeter "?";
}
proxy_pass http://host:port/$1${delimeter}$args;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_read_timeout 3600s;
}
```
## 五、界面展示
- 登录
- 首页
- 个人信息
- 头像裁剪
- 应用配置
- 菜单配置
- 模块功能配置
- 机构配置
- 角色配置
- 运行参数配置
- 用户配置
- 用户编辑
- 404页面
- 500页面
- 后台日志文件查询、下载
- 路由配置
- 路由日志
- 操作日志
- 登录日志
- demo
- 文件上传
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).