vue3-admin是一个后台前端解决方案，基于Vue3 + Element-plus + Webpack5 + Typescript + Pinia + Axios + Scss搭建。使用EditorConfig + Prettier + ESLint搭建项目中统一的代码风格，使用commitizen + lint-staged + commitlint统一代码提交规范，支持release-it自动化发布符合Semantic Versioning规范的版本，自动生成changelog文档等功能。
- 在线demo演示 🚫
Vercel被墙了，请克隆项目后启动查看
# 克隆项目
git clone https://github.com/Mr-Super-X/vue3-admin.git
# 进入项目目录
cd vue3-admin
# 安装依赖
npm install
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com/
# 也可以使用nrm设置淘宝源再安装
npm install nrm -g
nrm use taobao
npm install
# 启动服务
npm run dev- 多环境构建
- development
- debug
- mock
- test
- production
- 全局功能
- 支持githooks 已安装yorkie（https://github.com/yyx990803/yorkie）-尤大fork自husky，与husky功能类似
- 支持pre-commit自动执行prettier统一代码格式
- 支持eslint，使用standard规范，支持pre-commit自动进行eslint修复
- 支持lint-staged只对commit的文件做lint校验
- 支持mock功能，运行npm run dev:mock命令即可进入mock模式
- 支持commitizen，可在终端进行交互选择符合Angular规范的提交信息（已支持自定义汉化，可自行修改）
- 支持commitlint，使用git commit命令也会触发commit校验
- 支持release-it自动化发布符合Semantic Versioning规范的版本
- 支持auto-changelog，自动生成changelog文档
- 请求
- 支持时间窗口内的重复请求过滤
- 支持错误拦截
- 路由
- 支持路由鉴权
- 支持路由白名单
- 支持自动引入路由
- 组件
- 支持自动注册全局组件
- 支持自动引入ElementPlus Icon
- 支持自动引入本地svg图标
vue3-admin
├─ docs # 功能文档说明
├─ mock # mock服务
├─ public # 静态资源
├─ src # 源码
│ ├─ assets # 媒体资源（图片、样式、icon、medio等）
│ ├─ components # 公共组件
│ ├─ constant # 全局常量管理
│ ├─ directives # 全局指令
│ ├─ layout # 全局Layout
│ ├─ plugins # 全局plugin配置
│ ├─ request # 接口请求
│ ├─ router # 路由管理
│ ├─ store # store管理
│ ├─ theme # 主题样式管理
│ ├─ types # 全局ts类型管理
│ ├─ utils # 全局工具管理
│ ├─ views # 所有业务页面
│ ├─ App.vue # 页面入口
│ ├─ main.ts # 项目入口文件
│ └─ shims-vue.d.ts # vue-cli自动生成 为ts做的适配文件
├─ tests # 单元测试
├─ .browserslistrc # browserslist配置
├─ .commitlintrc.js # commitlint配置
├─ .cz-config.js # cz-customizable配置
├─ .editorconfig # editorconfig配置
├─ .env.debug # debug环境
├─ .env.development # 开发环境
├─ .env.mock # mock环境
├─ .env.production # 生产环境
├─ .env.test # 测试环境
├─ .eslintrc.js # eslint配置
├─ .gitignore # 忽略git提交配置
├─ .prettierrc.js # prettier配置
├─ .release-it.json # release-it配置
├─ auto-imports.d.ts # element-plus按需引入插件自动生成文件
├─ babel.config.js # babel配置
├─ CHANGELOG.md # changelog文档，由release-it配置auto-changelog自动生成
├─ components.d.ts # element-plus按需引入插件自动生成文件
├─ jest.config.js # jest单测配置
├─ LICENSE # 开源协议
├─ lint-staged.config.js # lint-staged配置
├─ package-lock.json # 版本锁定文件
├─ package.json # 项目依赖
├─ README.md # 项目说明文档
├─ tsconfig.json # ts配置
├─ vue.config.js # vue-cli 配置
└─ yarn.lock # 版本锁定文件
- 所有的视图都放在views目录中，对应的模块视图放在views/modules/模块文件夹
- ts类型在types目录中新建xxx.d.ts文件进行管理
- 当前页面的UI组件放在当前目录下的components目录中管理
- 当前页面的api请求在apis.ts中管理
- 当前页面的路由信息在routes.ts中管理
- 当前页面的静态数据或常量在configs.ts中管理
- 当前页面的一些工具方法或脚本函数在scripts.ts中管理
整体采用Domain Style工程范式，专注于横向的功能拆分和扩展，视图结构遵循如下规范：
home # 首页文件夹
├─ components # 首页UI组件文件夹
├─ styles # 首页样式文件夹
├─ types # 首页TS类型配置
├─ apis.ts # 首页请求接口配置
├─ configs.ts # 首页静态常量配置
├─ index.vue # 首页入口vue文件
├─ routes.ts # 首页路由配置
└─ scripts.ts # 首页其他脚本函数配置
# 启动项目
yarn serve
yarn dev
# 启动项目并在浏览器中打开页面
yarn serve:open
yarn dev:open
# 启动项目（绕过权限拦截，目前支持绕过路由拦截）
yarn serve:debug
yarn dev:debug
# 启动开发环境并且开启mock模式
yarn serve:mock
yarn dev:mock
# 生成打包资源分析页面并启动一个静态服务
yarn report
# 构建开发环境
yarn build:dev
# 构建测试环境
yarn build:test
# 构建生产环境
yarn build
# 构建生产环境并启动一个静态服务，可预览构建好的页面
yarn build:preview
# 运行单元测试
yarn test:unit
# 运行eslint检查
yarn lint
# 运行eslint检查并自动修复
yarn lint:fix
# 运行commitizen在终端选择Angular规范的提交类型
yarn commit
# 运行release-it配置，自动化发布Semantic规范版本和自动生成changelog文件
yarn release
# 运行release-it配置并列出release-it详细运行步骤
yarn release:detail
# 运行release-it配置，更新major版本号
yarn release:major
# 运行release-it配置，更新minor版本号
yarn release:minor
# 运行release-it配置，更新patch版本号
yarn release:patchyarn commit命令运行效果如下：
 Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
由于 Vue3 不再支持 IE11，故 ElementPlus 也不支持 IE11 及之前版本。
此项目为个人学习项目，非常感谢vue-next-admin、vue-element-admin提供UI和一些其它的功能参考！
包含git日常使用的详细操作命令，有需要可以自取
MIT © JP.Chen