前言

抱着学习 Vue3 的心态，就将原本BladeX Vue2 版本的基础后台管理用 Vue3 写了出来，后续我会将大部分页面的列表、详情接口给 MOCK 出来。如果刚好你有购买 Ta 们的服务，就直接部署最新版的接口，然后配置好src\config\proxy.ts，src\config\website.ts这两个文件，用现成接口预览吧。

项目基于TDesign Starter开发。其中动态路由、菜单以及权限这块功能，是参考Vben Admin实现的。如果项目对您有帮助，欢迎 Star；如果您有好的建议，欢迎留言。

特性

• Vue3.0
• Vue Router
• TypeScript
• Vite
• Pinia
• Pinia 持久化
• TDesign-Vue-Next
• Less
• vueuse
• axios
• ESLint
• Prettier
• Stylelint
• Commitlint

目录说明

├─api               // api地址
├─assets            // 本地资源
├─components        // 公用组件
├─config            // 项目相关配置
├─directives        // Vue指令
├─hooks             // 常用的hook函数
├─layouts           // route layout
├─pages             // 基础路由相关组件
├─router            // 路由
├─store             // pinia store
├─styles            // 公用样式
├─types             // typescript types
├─utils             // 工具类函数
├─views             // 动态路由最终绑定的comopnent
└─viewsBusiness     // 动态路由落地页关联业务

使用前配置

src\config\global.ts // css前缀等
src\config\proxy.ts // vite代理，没配置前请使用 npm run dev:mock 预览
src\config\website.ts // 项目配置

开发

## 安装依赖
npm install

## Vite代理启动项目
npm run dev

## 本地mock启动项目
npm run dev:mock

构建

## 构建正式环境
npm run build

## 构建测试环境
npm run build:test

## 将mock数据打包进最终代码内
npm run build:mock

兼容性

IE / Edge	Firefox	Chrome	Safari
Edge >=84	Firefox >=83	Chrome >=84	Safari >=14.1

推荐的 IDE 设置

VSCode + Volar (工作区禁用 Vetur) + TypeScript Vue Plugin (Volar).

参考列表

Vben Admin

开源协议

遵循 MIT 协议