Vue3、Element-Plus、TypeScript4、Vite3的后台集成方案！

猿哥 GitHub猿 2023-09-18

收录于合集 #GitHub猿 494个

推荐关注

责编：猿哥 | 来源：Java架构师技术整理

往期文章：OA协同办公系统，自带低代码开发平台，可快速搭建CRM、项目管理等功能！

正文

大家好。我是GitHub猿。

我今天，推荐一个系统项目。猿哥第一次使用就有点上头，爱不释手，必须要推荐给大家。

上次是谁要的系统项目啊，猿哥帮你找到了。

这是我目前见过最好的系统项目。功能完整，代码结构清晰。值得推荐。

📚 项目介绍

最近猿哥在逛网站的时候发现一个不错的开源项目，猿哥觉得不错，值得拿出来和大家分享下。

🎉本项目是一个基于 element-plus 免费开源的中后台模版。使用了最新的vue3，vite4，TypeScript等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模版，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。扩展：接私活儿

本项目定位是后台集成方案，不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

如需要基础模版，请切换到 tempalte 分支，tempalte 只简单集成了一些如：布局、动态菜单等常用布局功能，更适合开发者进行二次开发。

特性

最新技术栈：使用 Vue3/vite4 等前端前沿技术开发
TypeScript: 应用程序级 JavaScript 的语言
主题: 可配置的主题
国际化：内置完善的国际化方案
自定义数据内置 Mock 数据方案
权限内置完善的动态路由权限生成方案
组件二次封装了多个常用的组件
示例内置丰富的示例

预览

admin 帐号用于模拟服务端控制权限，服务端返回什么就渲染什么

test 帐号用于模拟前端控制权限，服务端只返回需要显示的菜单 key，前端进行匹配渲

文档地址 Github

文档地址 Gitee

前序准备

node 和 git - 项目开发环境
Vite4 - 熟悉 vite 特性
Vue3 - 熟悉 Vue 基础语法
TypeScript - 熟悉 TypeScript 基本语法
Es6+ - 熟悉 es6 基本语法
Vue-Router-Next - 熟悉 vue-router 基本使用
另外，搜索公众号编程技术圈后台回复“Java”，获取一份惊喜礼包。
Element-Plus - element-plus 基本使用
Mock.js - mockjs 基本语法

安装和使用

获取代码

git clone 文末获取

安装依赖

cd vue-element-plus-admin

pnpm install

运行

pnpm run dev

打包

pnpm run build:pro

目录结构

.├── .github # github workflows 相关├── .husky # husky 配置├── .vscode # vscode 配置├── mock # 自定义 mock 数据及配置├── public # 静态资源├── src # 项目代码│ ├── api # api接口管理│ ├── assets # 静态资源│ ├── components # 公用组件│ ├── hooks # 常用hooks│ ├── layout # 布局组件│ ├── locales # 语言文件│ ├── plugins # 外部插件│ ├── router # 路由配置│ ├── store # 状态管理│ ├── styles # 全局样式│ ├── utils # 全局工具类│ ├── views # 路由页面│ ├── App.vue # 入口vue文件│ ├── main.ts # 主入口文件│ └── permission.ts # 路由拦截├── types # 全局类型├── .env.base # 本地开发环境环境变量配置├── .env.dev # 打包到开发环境环境变量配置├── .env.gitee # 针对 gitee 的环境变量可忽略├── .env.pro # 打包到生产环境环境变量配置├── .env.test # 打包到测试环境环境变量配置├── .eslintignore # eslint 跳过检测配置├── .eslintrc.js # eslint 配置├── .gitignore # git 跳过配置├── .prettierignore # prettier 跳过检测配置├── .stylelintignore # stylelint 跳过检测配置├── .versionrc 自动生成版本号及更新记录配置├── CHANGELOG.md # 更新记录├── commitlint.config.js # git commit 提交规范配置├── index.html # 入口页面├── package.json├── .postcssrc.js # postcss 配置├── prettier.config.js # prettier 配置├── README.md # 英文 README├── README.zh-CN.md # 中文 README├── stylelint.config.js # stylelint 配置├── tsconfig.json # typescript 配置├── vite.config.ts # vite 配置└── windi.config.ts # windicss 配置

功能演示

牛逼啊！接私活必备的 N 个开源项目！赶快收藏

最后想学习这个项目的可以查看项目地址：

项目源码，怎么领取？

源码获取

牛逼啊！接私活必备的 N 个开源项目！赶快收藏

扫码下方二维码，后台回复【后台集成】即可获取所有系统

欢迎有需要的同学试试，如果本文对您有帮助，也请帮忙点个 赞 + 在看 啦！❤️

在 GitHub猿 还有更多优质项目系统学习资源，欢迎分享给其他同学吧！

--END--

猿哥个人微信

添加猿哥个人微信即送一份惊喜大礼包