Vue3后台管理系统开源模板

最新推荐文章于 2026-04-11 11:43:24 发布

原创最新推荐文章于 2026-04-11 11:43:24 发布 · 1.2k 阅读

本内容遵循CC 4.0 BY-SA版权协议

前端vue3后台管理系统

这个一个开源的后台管理系统，简单的应用的壳，快速上后后台开发

如果对你有点帮助免费点个start吧（项目持续更新中）
点击跳转：项目地址

访问失效：GFastGithub

基于 Vue + Element UI 的后台管理系统解决方案(适用于酷炫后台，作品，博客等)。线上地址

# 小白流程
	1.下载eslint和prettierrc插件
	2.修改配置文件
	3.修改路由
	4.拦截完善
	5.对接口，完善业务

npm install

npm run dev

npm run build

npm run build
http-server ./dist

登录页

在这里插入图片描述

*后台页
在这里插入图片描述

步骤	命令	描述	链接
1	`pnpm create vite@latest [项目名] -- --template vue-ts`	创建一个新的Vite项目，使用Vue 3和TypeScript模板。	-
2	`pnpm add vue-router@4`	添加Vue Router 4用于路由管理。	Vue Router
3	`pnpm i vue-router-tab -S`	安装vue-router-tab插件，用于标签式导航。	vue3-tabor
4	`pnpm install pinia`	安装Pinia，作为Vue的状态管理库。	Pinia
5	`pnpm install sass sass-loader --save-dev`	安装Sass及其loader，用于样式处理。	-
6	`pnpm install element-plus`	安装Element Plus，提供一组Vue 3的UI组件。	Element Plus
7	`pnpm install -D unplugin-vue-components unplugin-auto-import`	安装unplugin-vue-components和unplugin-auto-import，自动导入组件和函数。	-
8	`pnpm install axios`	安装Axios，用于发出HTTP请求。	Axios
9	`pnpm install echarts --save`	安装ECharts，用于数据可视化。	ECharts

提交类型	标题	描述
`feat`	特征	新功能、新特性
`fix`	Bug 修复	bug 修复
`docs`	文档	仅文档更改
`style`	风格	不影响代码含义的更改（空格、格式、缺少分号等）
`refactor`	代码重构	重构，在不影响代码内部行为，功能下的代码修改
`perf`	性能改进	更改代码，以提高性能
`test`	测试	添加缺失的测试或纠正现有的测试
`build`	构建	影响构建系统或外部依赖项的更改（示例范围：gulp、broccoli、npm）
`ci`	持续集成	对我们的 CI 配置文件和脚本的更改（示例范围：Travis、Circle、BrowserStack、SauceLabs）
`chore`	其他文件修改	不修改 src 或测试文件的其他更改
`revert`	还原	恢复之前的提交
`release`	发布新版本	-
`workflow`	工作流相关文件修改	-

标签

#开源