vue3-basic-admin 是一款开源开箱即用的中后台管理系统。基于 Vue3、Vite、Element-Plus、TypeScript、Pinia 等主流技术开发，内置许多开箱即用的组件，能快速构建中后台管理系统。


1.  用户名：admin  密码 任意  拥有admin的权限可以查看所有页面

2.  用户名：test   密码 任意  拥有test的页面权限，可以查看部分页面

3.  用户名：editor 密码 任意  拥有editor的页面权限，可以查看富文本等页面


功能

  • Axios 集成 如果对该模块不太懂，可以看： vue3 之 axios 封装集成

- loading
- 错误日志收集
- 错误重试机制
- 取消重复请求

  • 白天和暗黑模式切换

  • 动态权限路由

  • 内置用户管理+角色管理+部门管理+字典管理等

  • 内置错误日志，登录日志，操作日志收集

  • table 页面模板内置，快速开发 table，开箱即用

  • 常用组件 input,select,table,form,loading,filter 等组件封装集成

  • echarts 内置各种模板，开箱即用

  • 富文本

  • Markdown

  • 错误页面 403 404 500 等

  • 等等其他功能。

安装

# 进入项目目录
cd vue3-basic-admin
# 安装依赖
pnpm install
# 本地开发 启动项目
pnpm start

如调试没接口登陆不进，直接输入：http://localhost:4000/dashboard进后台

部署

# 打包项目

npm run build


# 打包大小分析

npm run report


# 预览

npm run preview

文件目录说明

├── build                            ---vite打包配置
├── mock                             ---mock模拟数据
├── public                           ---静态资源文件
├── src
│  ├── api                           ---接口
│  ├── assets                        ---图片
│  ├── components                    ---可复用的vue组件
│  ├── constant                      ---常量
│  ├── directive
│  ├── enums
│  ├── hooks
│  ├── icons
│  ├── layouts                       ---布局方式
│  ├── plugins
│  ├── router                        ---路由
│  ├── store                         ---vuex
│  ├── styles                        ---sass样式
│  ├── utils                         ---方法函数
│  ├── views                         ---页面
│  ├── App.vue
│  ├── main.ts
├── types
├── .env
├── .env.development
├── .env.production
├── .eslintrc.js
├── .prettierrc.cjs
├── commitlint.config.cjs           ---代码提交日志规范
├──  package.json
├──  package-lock.json
├──  README.md
└──  vite.config.ts                 ---vite的配置