基于 Vue3、Typescript、Vite3、Element-plus 构建通用后台

忙里偷闲，凑空用 vite3 + vue3 + element-plus + ts 撸个后台模板。

介绍

Robot Admin 是一个使用 vite + vue3 + pinia + element-plus + typescript 完整技术路线开发的项目，秒级开发更新启动、新的vue3 composition api 结合 script setup语法糖纵享丝滑般的开发体验、全新的 pinia状态管理器和优秀的设计体验（1k的 size）、element+无障碍过渡使用 UI 组件库 element-plus、安全高效的 typescript类型支持、代码规范验证、多级别的权限管理，提供开箱即用轻量级的中后台解决方案，希望通过聚焦业务场景，结合有限的 ElementPlus ui 框架，将基础组件封装成通用的业务组件，把通用的功能通过配置生成，可以尽量少的去写一些代码，更聚焦和关注实际的业务逻辑实现。

特性

🔥 最新技术栈：使用 vue3、vite3、pinia 等前端前沿技术开发
✨ 业务组件 二次封装了多个常用的组件
🍍 状态管理器：vue3新秀 Pinia，犹如 react zustand般的体验，友好的 api 和异步处理，官方推荐下一代的 VueX
🏆 开发语言：拥抱 TypeScript，为团队协作更好的去赋能
🎉 UI 组件：element-plus开发者无障碍过渡使用 element-plus，熟悉的配方熟悉的味道，当然，还有些许的情怀
🎨 css 样式：scss 、postcss
📖 代码规范：Eslint、Prettier、Commitlint
🔒 权限管理：页面级、菜单级、按钮级、接口级
✊ 依赖按需加载：unplugin-auto-import，可自动导入使用到的vue、vue-router、pinia等依赖
💪 组件按需导入：unplugin-vue-components，无论是第三方 UI 组件还是自定义组件都可实现自动按需导入以及TS语法提示
🌟 面向业务场景的组件封装 ：我觉得这是比较棒的一个点，更方便的大家低代码的使用，这一块会持续完善拓展，当然，如果有幸，可以 x 吸引您可以加入进来一起玩，那就更棒了

前期准备和需要具备的能力

Node 和 git -项目开发环境
Vite - 熟悉 vite 特性
Vue3 - 熟悉 Vue 基础语法
TypeScript - 熟悉TypeScript基本语法
Es6+ - 熟悉 es6 基本语法
Vue-Router-Next - 熟悉 vue-router 基本使用
Pinia - 熟悉 Pinia 基本使用
Element-Plus - ui 框架的基本使用
Mock.js - mockjs 基本语法

项目目录

vue3_vite3_elementPlus_admin
├─ .cz-config.js
├─ .env
├─ .env.development
├─ .env.production
├─ .eslintrc-auto-import.json
├─ .eslintrc.cjs
├─ .git
│  ├─ COMMIT_EDITMSG
│  ├─ config
│  ├─ description
│  ├─ FETCH_HEAD
│  ├─ HEAD
│  ├─ hooks
│  │  ├─ applypatch-msg.sample
│  │  ├─ commit-msg.sample
│  │  ├─ fsmonitor-watchman.sample
│  │  ├─ post-update.sample
│  │  ├─ pre-applypatch.sample
│  │  ├─ pre-commit.sample
│  │  ├─ pre-merge-commit.sample
│  │  ├─ pre-push.sample
│  │  ├─ pre-rebase.sample
│  │  ├─ pre-receive.sample
│  │  ├─ prepare-commit-msg.sample
│  │  ├─ push-to-checkout.sample
│  │  └─ update.sample
├─ .gitignore
├─ .husky
│  ├─ commit-msg
│  ├─ pre-commit
│  └─ _
│     ├─ .gitignore
│     └─ husky.sh
├─ commitlint.config.js
├─ components.d.ts
├─ index.html
├─ LICENSE
├─ package.json
├─ pnpm-lock.yaml
├─ public                      // 不被构建的资源文件
├─ README.md
├─ src
│  ├─ api                      // 请求接口文件
│  ├─ App.vue
│  ├─ assets                   // 静态资源文件
│  ├─ auto-imports.d.ts
│  ├─ axios
│  ├─ components
│  │  ├─ icons                 // svgIcon
│  │  ├─ lib                   // 库
│  ├─ components.d.ts
│  ├─ constant                 // 全局常量
│  ├─ directives               // 全局指令
│  ├─ env.d.ts
│  ├─ hooks                    // 全局钩子函数
│  ├─ interface                // 全局接口
│  ├─ locales                  // 中英文
│  ├─ main.ts                  // 入口文件
│  ├─ permission.ts            // 路由守卫
│  ├─ router                   // 路由文件
│  ├─ store                    // 状态管理 Pinia
│  ├─ styles                   // 全局样式
│  ├─ types                    // 全局类型申明
│  │  └─ global.d.ts
│  ├─ utils                    // 工具函数
│  └─ views                    // 视图文件
├─ tsconfig.config.json
├─ tsconfig.json               // ts 配置文件
├─ tsconfig.node.json
└─ vite.config.ts              // vite 配置文件

项目预览图

table

更多界面请访问项目查看，目前请拉代码到本地查看功能，后续会集成部署到线上。

已完成功能 | The functionality is complete

Element Plus
N+1 多级菜单
Dashboard
表格
router Tab 选项卡
表单
图表 :antv or echart
导入导出 Excel
导出 Zip 文件
拖拽组件
富文本编辑器
markdown 编辑器
code JSON 编辑器
个人页
登录/注册页
404 / 403 / 401
菜单管理
角色管理
自定义图标
拖拽组件
支持切换主题色:一键换肤
自定义指令
国际化
项目看板

计划

完善主题功能集成
考虑引入 windicss
集成 nest 服务
完善环境配置 .env.development/.env.production
面向业务场景组件的持续扩展，文档同步更新
… 还有更多畅想 …

工程化 | Project Tool

Git Hook 工具：husky + lint-staged
代码规范：Prettier + ESLint
提交规范：Commitizen + Commitlint
包管理器：pnpm

安装使用 | 快速启动

:bell: 推荐使用 pnpm 进行依赖管理

# 克隆项目

git clone https://github.com/ChenyCHENYU/Robot-Admin.git

# 进入项目

cd Robot Admin

# 安装依赖 (建议 pnpm )

pnpm install | pnpm i

# 运行

pnpm dev

# 打包构建

pnpm build

git 提交 | git commit

 git add *  // add everything

 git status  // check status

 git cz  // commit change

 git push // push stage commit

// 如果cz 命令无法找到，全局安全commitize
 npm install -g commitizen

更新日志

后续完善…

项目地址

线上地址后续部署发布，目前查看功能请拉取代码到本地

Robot Admin - 项目文档

🤝 如何贡献 | Contributing

期待优秀的您加入，或者获取到您宝贵的建议和经验，

Pull Request:

Fork 代码!
创建自己的分支: git checkout -b feat/xxxx
提交你的修改: git commit -am 'feat(function): add xxxxx'
推送您的分支: git push origin feat/xxxx
提交pull request

Git 贡献提交规范

参考 vue 规范 (Angular)
- wip 开发中
- feat 增加新功能
- fix 修复问题/BUG
- style 代码风格相关无影响运行结果的
- perf 优化/性能提升
- refactor 重构
- revert 撤销修改
- test 测试相关
- docs 文档/注释
- chore 依赖更新/脚手架配置修改等
- workflow 工作流改进
- ci 持续集成
- types 类型定义文件更改