Vue3 + TypeScript 项目脚手架

一个基于 Vue3、TypeScript、Vite 的现代化前端项目脚手架，集成了代码规范、Git提交规范和单元测试等最佳实践。

技术栈

• Vue 3.5.13
• TypeScript 5.7.2
• Vite 6.2.0
• Element Plus 2.5.6
• ESLint 9.21.0
• Prettier 3.5.3
• Jest 29.7.0
• Husky 9.1.7

特性

• 🚀 基于 Vite 的快速开发和构建
• 💪 TypeScript 支持
• 🎨 ESLint + Prettier 代码规范
• 📝 Git Commit 信息规范
• ✅ Jest 单元测试
• 🔄 GitHub Actions CI 集成
• 🎯 集成 Element Plus UI 框架，提供丰富的组件和主题定制

快速开始

安装依赖

npm install

开发

npm run dev

构建

npm run build

预览构建结果

npm run preview

Element Plus 使用

项目已集成 Element Plus，可以直接使用其组件：

<template>
  <el-button type="primary">主要按钮</el-button>
  <el-input v-model="input" placeholder="请输入内容" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('')
</script>

更多组件和用法请参考 Element Plus 官方文档

代码规范

项目使用 ESLint 和 Prettier 进行代码规范和格式化：

• 运行代码检查：

npm run lint

• 格式化代码：

npm run format

Git 提交规范

项目使用 commitlint 强制规范 Git 提交信息，提交格式如下：

<type>: <description>

支持的 type 类型：

• feat: 新功能
• fix: 修复
• docs: 文档变更
• style: 代码格式
• refactor: 重构
• perf: 性能优化
• test: 增加测试
• build: 构建相关
• ci: CI 配置
• chore: 其他修改
• revert: 回滚

单元测试

项目使用 Jest 进行单元测试：

npm test

目录结构

├── .github/          # GitHub 配置
├── public/           # 静态资源
├── src/              # 源代码
│   ├── assets/       # 资源文件
│   ├── components/   # 组件
│   ├── styles/       # 样式文件
│   │   └── element/  # Element Plus 主题配置
│   ├── main.ts       # 入口文件
│   └── App.vue       # 根组件
├── .eslintrc.js      # ESLint 配置
├── .prettierrc       # Prettier 配置
├── jest.config.js    # Jest 配置
├── tsconfig.json     # TypeScript 配置
├── vite.config.ts    # Vite 配置
└── package.json      # 项目配置

License

MIT