Vue 3实战教程：后台集成最佳实践

发表时间: 2024-06-08 08:15

1 简介

vue-element-plus-admin 是一个基于 element-plus 免费开源的中后台模版。使用了最新的 Vue3，Vite，Typescript等主流技术开发，开箱即用的中后台前端解决方案，可以用来作为项目的启动模板，也可用于学习参考。并且时刻关注着最新技术动向，尽可能的第一时间更新。

vue-element-plus-admin 的定位是后台集成方案，因为集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

2 需要掌握的基础知识

Vue3
Pinia
TypeScript
Vue-router
Element-plus
Es6
Vitejs
unocss
Axios

3 项目目录结构

.├── .github # github workflows 相关├── .husky # husky 配置├── .vscode # vscode 配置├── mock # 自定义 mock 数据及配置├── public # 静态资源├── src # 项目代码│   ├── api # api接口管理|   |── axios # axios配置│   ├── assets # 静态资源│   ├── components # 公用组件│   ├── constants # 存放常量│   ├── 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 配置└── uno.config.ts # unocss 配置