开箱即用的现代 Vue3 web 应用脚手架,基于 Vite 7、Typescript 5、Prettier、Stylelint、ESLint 9 等
| 分类 | 技术 |
|---|---|
| 核心框架 | Vue 3, Vue Router 4, Pinia 3 |
| 构建工具 | Vite 7, TypeScript 5 |
| HTTP 客户端 | Axios |
| 代码质量 | ESLint 9, Prettier, Stylelint |
| Git 工作流 | Commitlint, Husky |
- 🚀 现代架构:采用最新前端技术构建
- 📱 响应式设计:适配不同屏幕尺寸
- 🛠️ 开发体验:完善的代码质量工具
- 🔒 Git Hooks:使用 Husky + lint-staged 进行提交前验证
- 📦 自动导入:组件和 API 自动导入
- 🎨 Iconify 集成:轻松使用各种图标集
- 🌐 开发代理:开发过程中便捷的 API 代理
- 🧩 模块化结构:组织良好的项目结构
- Node.js 22+
- pnpm 10+
# 克隆仓库 git clone https://github.com/Jamie-Yang/vue3-vite-boilerplate.git cd vue3-vite-boilerplate # 安装依赖 pnpm install# 启动开发服务器 pnpm dev# 生产环境构建 pnpm build # 测试环境构建 pnpm build:test # 预生产环境构建 pnpm build:pre # 生产环境构建 pnpm build:prod# 运行所有检查工具 pnpm lint # 运行特定检查工具 pnpm lint:eslint pnpm lint:prettier pnpm lint:stylelintvue3-vite-boilerplate/ ├── public/ # 静态资源 ├── src/ │ ├── api/ # API 请求 │ ├── assets/ # 图片、字体等资源 │ ├── components/ # 可复用组件 │ ├── composables/ # Vue 3 组合式函数 │ ├── directives/ # Vue 指令 │ ├── router/ # Vue Router 配置 │ │ ├── guard/ # 导航守卫 │ │ └── modules/ # 路由模块 │ ├── stores/ # Pinia 状态管理 │ ├── utils/ # 工具函数 │ ├── views/ # 页面组件 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口 ├── typings/ # TypeScript 声明文件 └── ...配置文件 本项目遵循约定式提交格式。Commitlint 将帮助确保您的提交消息符合格式。
示例:
feat: 添加新功能fix: 解决组件问题docs: 更新文档style: 格式化代码refactor: 重构组件