owen-devs / vue3-template

vue3 + elementPlus 开发代码模板

一套基于 vue3 + elementPlus 的开发模板，包含了常用的功能，可以让您快速进行项目开发；

📢 版本信息

💡 特性

• ⚡ vue3,vite4,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 当然！

🌲 预配置

Icons

• 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 配置

🐢 开发工具与插件推荐

• VSCode

• VSCode 扩展

  1. Volar (请禁用Vetur)
  2. TypeScript Vue Plugin (Volar)
  3. Prettier Formatter for Visual Studio Code VSCode 格式化插件
  4. UnoCSS for VS Code UnoCSS官方提示插件

• WebStorm

• WebStorm 扩展

  1. vue.js

• 智能编码工具：

  1. copilot
  2. codeium
  3. TONGYI Lingma
  4. iFlyCode
  5. CodeGeeX

项目安装

npm install

开发环境启动

npm run dev

生产环境构建

npm run build

Vitest 单元测试

npm run test:unit

ESLint 语法检查

npm run lint

Github Stats

Trophy