vue3-basic-template 是一款开源开箱即用的中后台管理系统.zip

<h1 align="center">vue3-basic-template</h1>    <p align="center"> <a href="https://github.com/biubiubiu01/vue3-basic-template"><strong>探索本项目的文档 »</strong></a> <br /> <br /> <a href="http://gist006.gitee.io/vue3-basic-template/">在线预览</a> · <a href="https://github.com/biubiubiu01/vue3-basic-template/issues">提出Bug</a> · <a href="https://github.com/biubiubiu01/vue3-basic-template/issues">提出建议</a> </p> ## 简介 `vue3-basic-template` 是一款开源开箱即用的中后台管理系统。基于 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia` 等主流技术开发，内置许多开箱即用的组件，能快速构建中后台管理系统，目前决定完全开源，如果觉得该项目对你有所帮助，可以点一个 star,如果有一定的经济能力，可以请作者喝一杯咖啡，开源不易！ ## 测试账号 ``` 1. 用户名：admin 密码 任意 拥有admin的权限可以查看所有页面 2. 用户名：test 密码 任意 拥有test的页面权限，可以查看部分页面 3. 用户名：editor 密码 任意 拥有editor的页面权限，可以查看富文本等页面 ``` vue2 版本，地址：[vue-antd-admin](https://github.com/biubiubiu01/vue-antd-admin) pro版本，地址：[vue3-basic-admin](https://github.com/biubiubiu01/vue3-basic-admin) ## 预览 - [点我预览](https://gist006.gitee.io/vue3-basic-template) <p align="center"> <img width="100%" src="https://i.328888.xyz/2023/02/28/zxhk5.png"> <img width="100%" src="https://i.328888.xyz/2023/02/28/zxGay.png"> </p> - 暗黑模式 <p align="center"> <img width="100%" src="https://i.328888.xyz/2023/02/28/zxSJZ.png"> <img width="100%" src="https://i.328888.xyz/2023/02/28/zx5B8.png"> </p> ## 架构清单 - Vue3 - Vue-router - Pinia - Typescript - Vite - Axios - 模拟接口：mockjs - 代码检测和格式化：eslint+prettier - git 提交格式化：husky+lint-staged - 代码日志规范：@commitlint/cli+@commitlint/config-conventional - ...其他 ## 功能 - Axios 集成 如果对该模块不太懂，可以看： [vue3 之 axios 封装集成](https://juejin.cn/post/7203601905938579517) ``` - loading - 错误重试机制 - 取消重复请求 ``` ### 文件目录说明 ``` ├── 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的配置 ``` ## 文档 目前尚未搭建文档，如后期有需要可构建 ## 安装 ``` # 克隆项目 git clone https://github.com/biubiubiu01/vue3-basic-template.git # 进入项目目录 cd vue3-basic-admin # 安装依赖 pnpm install # 本地开发 启动项目 pnpm start ``` ### 部署 ``` # 打包项目 npm run build # 打包大小分析 npm run report # 预览 npm run preview ``` ## 浏览器支持 本地开发推荐使用 `Chrome 80+` 浏览器 支持现代浏览器, 不支持 `IE` | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## 最后 开源不易，若觉得这个项目对你有用，可以点个[star](https://github.com/biubiubiu01/vue3-basic-template)，欢迎提出建议和 bug :smile: 。 ## 支持 开源不易，若觉得这个项目对你有用，可以点个[star](https://github.com/biubiubiu01/vue3-basic-template)，欢迎提出建议和 bug :smile: 。如果这个项目对你有所帮助，可以给作者买杯咖啡，欢迎投喂，任意金额捐赠加好友问题咨询。 <img src="https://i.328