Logo
基于 Vue3 + Vite + TypeScript + Tailwind Css + Element Plus 的现代化中后台模板
本项目是专栏《通俗易懂的中后台系统建设指南》实战项目,使用 Vue 生态技术构建,在持续写文章的同时完善项目
如果你有兴趣,欢迎给我提 issue 或 pr
# 克隆项目 git clone https://github.com/bryqiu/vue-clean-admin # 进入项目目录 cd vue-clean-admin # 安装依赖 pnpm i # 启动开发服务器 pnpm dev
常用脚本
pnpm dev # 本地开发 pnpm build # 生产构建 pnpm preview # 本地预览 pnpm lint # 代码校验 pnpm commit # 提交代码
vue-clean-admin/ ├── build/ # Vite 构建与插件相关配置 ├── public/ # 不参与打包处理的静态资源 ├── src/ # 项目主要源码 │ ├── assets/ # 静态资源目录 (如图片、字体等) │ ├── components/ # 组件封装 │ ├── composables/ # 组合式函数 │ ├── directives/ # 自定义指令 │ ├── hooks/ # 自定义 Hook │ ├── layout/ # 全局布局 │ ├── locale/ # i18n 国际化 │ ├── plugins/ # 插件配置 │ ├── router/ # 路由配置 │ ├── services/ # 请求与 API │ ├── shared/ # 全局 const/enum/option 定义 │ ├── store/ # Pinia 状态管理 │ ├── theme/ # 主题与样式 │ ├── types/ # 业务类型定义 │ ├── typings/ # 全局类型声明 │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ ├── app.vue # 应用入口 Vue 组件 │ └── main.ts # 应用入口 TypeScript 文件 ├── .husky/ # Git Hooks 钩子配置 (如 pre-commit) ├── .vscode/ # VS Code 项目配置 ├── .editorconfig # 统一不同编辑器的编码风格配置 ├── .env # 环境变量通用配置 ├── .env.development # 开发模式环境变量 ├── .env.production # 生产模式环境变量 ├── .eslintrc-auto-import.mjs # 自动导入插件生成的 ESLint 规则 ├── .gitignore # Git 提交忽略文件配置 ├── .npmrc # npm/pnpm 配置文件 (如镜像源) ├── .nvmrc # 指定项目所需的 Node.js 版本 ├── .prettierignore # Prettier 格式化忽略配置 ├── .prettierrc.js # Prettier 代码格式化规则 ├── .stylelintignore # Stylelint 样式校验忽略配置 ├── commitlint.config.js # Git 提交信息规范配置 ├── eslint.config.js # ESLint 代码质量校验配置 ├── index.html # 应用入口 HTML 文件 ├── LICENSE # 开源许可证文件 ├── lint-staged.config.js # 暂存区代码增量校验配置 ├── pnpm-lock.yaml # 依赖版本锁定文件 ├── stylelint.config.js # 样式代码校验规则 ├── tsconfig.json # TypeScript 编译选项配置 └── package.json # 项目元数据与脚本命令
- 收下这份 Vue + TS + Vite 中后台系统搭建指南,从此不再害怕建项目
- 用了这些 Vite 配置技巧,同事都以为我开挂了
- 受够了团队代码风格不统一?7千字教你从零搭建代码规范体系
- 开发者必看!在团队中我是这样实现 Git 提交规范化的
- 告别繁琐!Vue3 组合式函数解锁 Echarts 封装新姿势
- 彻底搞懂面包屑,手把手封装一个 Vue3 面包屑导航组件
- 一篇文章实现 Element Plus 动态切换主题色
- Tailwind Css 中使用 Element Plus 主题系统的方案与实现
- RBAC 权限系统实战(一):页面级访问控制全解析
- RBAC 权限系统实战(二):权限信息管理的设计
- RBAC 权限系统实战(三):细粒度的权限控制
我们非常欢迎任何形式的反馈及贡献!提一个 issue 或者 Pull Request
你可以先阅读 如何向开源社区提问题、如何优雅地在github上贡献代码
Clean Admin 参考了很多优质项目,包括但不限于: