# Vue3-admin-plus（企业实际开发应用基础框架）

**Repository Path**: a-xiaowei/vue3-admin-plus

## Basic Information

- **Project Name**: Vue3-admin-plus（企业实际开发应用基础框架）
- **Description**: （企业实际开发应用基础框架）使用Vue 3.2 + TypeScript + Pinia + Vite2 + Element-Plus + tailwind.css集成的一个项目模板。。。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: wuxw
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2023-01-09
- **Last Updated**: 2025-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#  Vue 3.2 + TypeScript + Pinia + Vite2 + Element-Plus + tailwind.css + mock 

#  管理系统框架



## 一、项目功能介绍

- 使用 Vue3.2 开发（单文件组件 `＜script setup＞`）
- 采用 Vite2 作为项目开发、打包工具（配置了 Gzip 打包、TSX 语法、跨域代理、打包预览工具……）
- 整个项目集成了 TypeScript
- 使用 Pinia 替代 Vuex，轻量、简单、易用（集成了持久化插件）
- 使用 TypeScript 对 Axios 整个二次封装 （全局错误拦截、常用请求封装、全局请求 Loading、取消重复请求……）
- 对echarts进行 Hooks 封装（响应式布局适配，配置项option抽离）
- 支持 Element 组件大小切换、暗黑模式、i18n 国际化（i18n 暂时没配置所有文件，根据项目自行配置）
- 使用 vue-router 进行路由权限拦截（403 页面）、页面按钮权限配置
- 使用 keep-alive 对整个页面进行缓存，支持多级嵌套页面（缓存路由里可配置、页面切换带动画）
- 使用 Prettier 统一格式化代码
- 集成 mock 可使用于生产环境、开发环境。
- 对表单封装成 Hooks （添加、编辑、详情、上传、下载）
- 整个路由权限体系 菜单权限 按钮权限进行封装 auth 封装支持常用的三种权限方式( key:权限码  roles:用户角色组  path:后台动态返回菜单)
- 对表格的所有操作基本都封装成了 Hooks （表格数据搜索、重置、查询、分页、多选、单条数据操作、文件上传、下载、格式化单元格内容……）
- 具体封装模块详情项目。。。


## 二、安装使用步骤 

- **Install：**
```text
npm install
cnpm install

# npm install 安装失败，请升级 nodejs 到 16 以上，或尝试使用以下命令：
npm install --registry=https://registry.npm.taobao.org
```

- **Run：**

```text
npm run dev
```

- **Build：**

```text
# 开发环境
npm run build:dev

# 测试环境
npm run build:test

# 生产环境
npm run build:pro
```

- **Lint：**

```text
# eslint 检测代码
npm run lint:eslint

# prettier 格式化代码
npm run lint:prettier
```

- **preview:**

```text
# preview 预览发布环境效果
npm run preview
```

- **report:**

```text
# preview 生成打包解析报告
npm run report
```


- **limit：**

```text
# fix-memory-limit  扩充node内泄漏 
npm run fix-memory-limit    

#“%_prog%”
node_modules\.bin\vite.cmd  替换 %_prog% 
node_modules\.bin\vue-tsc.cmd 替换 %_prog% 
```

```text
# rimraf node_modules  快速卸载 node_modules
rimraf node_modules
```


## 三、文件资源目录 

```text
├─ .vscode                # 项目配置项
├─ mock                   # mokc接口
├─ public                 # 静态资源文件（忽略打包）
├─ src                    # 工程目录
│  ├─ api                 # API 接口管理
│  ├─ assets              # 静态资源文件
│  ├─ common              # 公共资源
│  ├─ components          # 全局组件
│  ├─ auth	              # 权限体系
│  ├─ config              # 全局配置项
│  ├─ constants           # 全局字典表（常量）
│  ├─ directives          # 全局指令文件
│  ├─ enums               # 项目枚举
│  ├─ hooks               # 常用 Hooks （hooks一般是带有生命周期或者是vue api的，涉及到变量保存等）
│  ├─ language            # 语言国际化
│  ├─ layout              # 框架布局
│  ├─ routers             # 路由管理
│  ├─ store               # pinia store
│  ├─ styles              # 全局样式
│  ├─ typings             # 全局 ts 声明
│  ├─ utils               # 工具库      （utils一般是pure函数 ，工具类方法）
│  ├─ views               # 所有页面
│  ├─ App.vue             # 入口页面
│  ├─ env.d.ts            # ts 识别 vue 文件
│  └─ main.ts             # 入口文件
├─ .editorconfig          # 编辑器配置（格式化）
├─ .env                   # vite 常用配置
├─ .env.development       # 开发环境配置
├─ .env.production        # 生产环境配置
├─ .env.test              # 测试环境配置
├─ .eslintignore          # 忽略 Eslint 校验
├─ .eslintrc.js           # Eslint 校验配置
├─ .gitignore             # git 提交忽略
├─ .prettierignore        # 忽略 prettier 格式化
├─ .prettierrc.js         # prettier 配置
├─ index.html             # 入口 html
├─ LICENSE                # 开源协议
├─ package-lock.json      # 包版本锁
├─ package.json           # 包管理
├─ postcss.config.js      # postcss 配置
├─ tailwind.config.js     # tailwind.css 集成
├─ README.md              # README 介绍
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 配置
```



## 六、权限校验介绍
```text
1.权限校验一共有三种方式（key:权限码  roles:用户角色组  path：后台动态返回）项目默认是开启权限（path）校验的。

2.开启权限方式:开启校验权限（src\auth\config.ts）中把NEED_LOGIN设置为true

3.默认使用的权限校验方式是path，通过接口返回路由

4.path:接口返回所有路由的菜单。（可在mock中修改指定需要返回的路由）

4.roles:接口返回用户角色组对路由所拥有的角色进行校验。默认开启的页面有[/home,/descrip,/dataScreen,/dialog,/echarts,/useTable]

角色账号1: admin 123456 [/home,/dialog,/useTable]
角色账号2: Svip  123456 [/home,/descrip,/dataScreen,/echarts]

5.key:接口动态返回权限码(随机返回的，可以在mock中设置指定返回项)刷新页面就会重新更换路由菜单

6.注意：首页是默认拥有所有权限的，否则进不去页面
```




## 五、git提交规范

`type:用于说明commit的类别，规定为如下几种`

- feat：新增功能；
- fix：修复bug；
- docs：修改文档；
- refactor：代码重构，未新增任何功能和修复任何bug；
- build：改变构建流程，新增依赖库、工具等（例如webpack修）
- style：仅仅修改了空格、缩进等，不改变代码逻辑；
- perf：改善性能和体现的修改；
- chore：非src和test的修改；
- test：测试用例的修改；
- ci：自动化流程配置修改；
- revert：回滚到上一个版本；






## 六、注意事项

```
全局安装nodejs和本地启动项目的nodejs版本号不同
报错：Cannot read properties of null (reading ‘pickAlgorithm’)
解决方案：
1、执行命令行npm cache clear --force
2、执行npm install
3、执行npm run XXX
```




Git 仓库地址 ：https://gitee.com/a-xiaowei/vue3-admin-plus.git