一套基于 vue3 + elementPlus 的开发模板，包含了常用的功能，可以让您快速进行项目开发；
- ⚡ vue3,vite5,pnpm,nodejs 作为开发工具，提供更快的开发体验
- 🐳 vue3 API自动按需导入
- 🌈 sass 作为 css 预处理器
- ✨ animate.css 作为动画库
- 🍍 pinia 作为状态管理工具
🅰️ axios 作为前后端数据交互- 💎 VueUse 非常实用的vue组合式函数api库
- 🙂 iconify 作为图标数据源，使用任意图标集
- 🌈 element-plus 作为 UI 组件库，自动按需导入
- 🧣 无需手动注册store，自动导入
src/stores目录下的 store - 📦 无需手动注册组件，自动加载
src/components目录下的组件 - 🗂 基于文件目录自动生成的路由 读取
src/views目录作为路由数据 - 🛺 无需手动注册组合API，自动导入
src/composables目录下的方法 - 🎨 UnoCSS 作为全局样式处理工具，高性能且极具灵活性的原子化css引擎
- 📑 多 layout 布局系统 可配置多 layout 且自动导入，按需使用
- 🦾 TypeScript 当然！
- Phosphor 库，更多 icon 库请往 https://icones.js.org/ 安装使用
- Vue Router
vite-plugin-pages- 以文件系统为基础的路由vite-plugin-vue-layouts- 页面布局系统，可以指定页面使用哪个布局unplugin-vue-components- 自动按需导入组件(element-plus)unplugin-auto-import- 直接使用composables API、vue3 API、VueUse API等，无需导入
- 使用 Composition API
<script lang="ts" setup></script> - ESlint 规范配置为：单引号、无分号、缩进空格4个等
- Prettier 代码格式化工具，查看 配置
- 小驼峰式：函数（方法）命名、变量命名、文件名（目录）
- 大驼峰式：公共组件名
- 全大写式：环境变量名
- 中划线式：html属性名、UI组件部分属性名
- 下划线式：常量名、环境变量名
├── node_modules # 依赖
├── public # 根目录静态资源
├── src # 源码
│ ├── assets # 静态资源
│ ├── components # 公共组件
│ ├── layouts # 布局
│ ├── views # 页面
│ ├── stores # 状态管理
│ ├── composables # 组合API
│ ├── utils # 工具库
│ ├── styles # 全局样式
│ ├── main.ts # 入口文件
│ ├── types # 类型声明
├── index.html # 入口html
├──.env.development # 开发环境变量
├──.env.production # 生产环境变量
├──.eslintrc.js # eslint 配置
├──.gitignore # git 忽略文件
├──.prettierrc.json # prettier格式化配置
├── package.json # 项目依赖版本信息
├── pnpm-lock.yaml # pnpm 配置文件
├── tsconfig.json # typescript 配置
├── vite.config.ts # vite 配置
├── uno.config.ts # unocss配置
├── README.md # 项目英文描述文档
├── README.zh_CN.md # 项目中文描述文档
├── vitest.config.ts # vitest 配置-
- Vue - Official (请禁用Vetur)
- TypeScript Vue Plugin (Volar)
- Prettier Formatter for Visual Studio Code VSCode 格式化插件
- UnoCSS for VS Code UnoCSS官方提示插件
-
智能编码工具：
- copilot
- codeium
- TONGYI Lingma
- iFlyCode
- CodeGeeX
npm installnpm run devnpm run buildVitest 单元测试
npm run test:unitESLint 语法检查
npm run lint