# acp-admin-standalone-web

**Repository Path**: zhangbinhub/acp-admin-standalone-web

## Basic Information

- **Project Name**: acp-admin-standalone-web
- **Description**: 使用vue全家桶(Vue+Vue-router+Vuex+axios)、ElementUI 样式库构建的前端项目（单机版）。该项目是前后端分离架构中的“前端部分”
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 2
- **Created**: 2022-03-04
- **Last Updated**: 2025-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: element-plus, vue3

## README

# acp-admin-standalone-web

###### v2.9.0 [版本更新日志](doc/version_history.md)

## 浏览器兼容性

支持的浏览器：

* Chrome latest（推荐，完美）
* Firefox latest（完全支持）
* Edge（完全支持）

## 简介

该版本是 acp-admin 的单机版前端，cloud 版本请查看[这里](https://gitee.com/zhangbinhub/acp-admin-cloud-web)

使用 vue 全家桶(Vue+Vue-router+Vuex+axios)、ElementUI 样式库构建的前端项目。该项目是前后端分离架构中的“前端部分”
。[后端工程](https://gitee.com/zhangbinhub/acp-admin-standalone)

## 相关组件官方文档

* [Vue 3](https://v3.cn.vuejs.org/)
* [Element-plus](https://element-plus.gitee.io/#/zh-CN)
* [echarts](https://www.echartsjs.com/index.html)
* [cropperJs](https://github.com/fengyuanchen/cropperjs)
* [tinymce 7](https://www.tiny.cloud/docs/tinymce/latest/)

## 技术栈

* nodejs
* vue3
* vue cli 5
* vuex
* vue-router
* axios
* echarts
* cropperJs
* mockjs
* js-sha256
* js-base64
* vue-json-editor
* Element-plus
* tinymce

#### 说明

* 前后端交互 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.npmmirror.com
```

##### （三）安装升级插件

```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、全局工程配置文件

[vite.config.mjs](vite.config.mjs)

[配置参考](https://vitejs.dev/config)

2、项目配置文件

* 持久化组件：vuex
* 路径：src/store
* 入口：[src/store/index.js](src/store/index.js)
* 系统信息配置文件：[src/store/config/appInfo.js](src/store/config/appInfo.js)

3、分环境配置文件

* 路径：environment

| 环境      | 配置文件名                                            |
|---------|--------------------------------------------------|
| 开发环境    | [.env.development](environment/.env.development) |
| test 环境 | [.env.test](environment/.env.test)               |
| prod 环境 | [.env.prod](environment/.env.prod)               |

##### （四）静态资源

* 路径：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 start
```

##### （二）编译打包

* 工程根目录下运行

    - test 环境

```
  npm run build-test
  ```

    - prod 环境

```
  npm run build-prod
  ```

* 执行成功后工程根目录下会出现 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 host              $http_host;
  proxy_set_header x-real-ip         $remote_addr;
  proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
  #proxy_set_header X-Forwarded-Proto "https";
  proxy_read_timeout 3600s;
}
```

## 五、界面展示

* 登录

![images](doc/images/pages/login.png)

* 首页

![images](doc/images/pages/index.png)

* 个人信息

![images](doc/images/pages/userinfo.png)

* 头像裁剪

![images](doc/images/pages/avatar.png)

* 应用配置

![images](doc/images/pages/appconfig.png)

![images](doc/images/pages/appedit.png)

![images](doc/images/pages/appupdate.png)

* 菜单配置

![images](doc/images/pages/menu.png)

* 模块功能配置

![images](doc/images/pages/module.png)

* 机构配置

![images](doc/images/pages/org.png)

* 角色配置

![images](doc/images/pages/role.png)

* 运行参数配置

![images](doc/images/pages/runtime.png)

![images](doc/images/pages/runtimeedit.png)

* 用户配置

![images](doc/images/pages/userlist.png)

* 用户编辑

![images](doc/images/pages/useredit.png)

* 404 页面

![images](doc/images/pages/404.png)

* 500 页面

![images](doc/images/pages/500.png)

* demo
    - 文件上传

![images](doc/images/pages/upload.png)

### Customize configuration

See [Configuration Reference](https://vitejs.dev/config).