pengzhanbo / vulcan

🔥The Template for Mobile Application, Vite4&Vue3, Pinia, Router, APIs&Mock, I18n, Unit&E2E Test.移动端Web应用模板

Vulcan

🚀🚀一个基于 vite + vue3 的项目模板，帮助快速创建 Mobile Web 应用。🚀🚀

在线案例

特性

• ⚡️ vue 3, vite 4, pnpm, esbuild - 非常快！
• 🦾 使用 Typescript
• 📦 组件自动加载
• 🍍 使用 pinia 状态管理
• 🔥 使用 <script setup> 语法
• 🌍 i18n 集成 国际化方案
• 📥 自动加载 API， Composition API 自动引入
• ⚙️ 使用 Vitest 进行单元测试, Cypress 进行 E2E 测试
• 🎨 使用 postcss / sass 编写 CSS
• 📒 封装 axios - 更好的管理 API，代码即 API 文档
• 📬 API Mock Data - 通过 mock-dev-server 在项目开发环境中对 接口进行 mock
• ⚖️ px to viewport
• 📐 eslint
• ⏳ git hooks - 规范 git commit 内容格式

预配置

插件

• Vue-Router - 路由系统
• Pinia - 状态管理
• Vue-i18n - 国际化
  • @intlify/unplugin-vue-i18n - vue-i18n 插件
• VueUse - composition API 实用工具库
• axios - http 请求库
• js-cookie - cookie 管理
• unplugin-vue-components - 自动加载组件
• vite-plugin-inspect - 模块依赖分析工具
• vite-plugin-mock-dev-server - 在项目开发服务中添加 mock-dev-server，自动加载 mock 文件

编码风格

• eslint - 使用 @antfu/eslint-config 配置， 单引号，无分号
• 使用 <script setup> SFC 语法

工具

• Typescript
• Vitest - 基于 vite 的单元测试框架
• Cypress - e2e 测试框架
• pnpm - 包管理工具，快速，节省磁盘
• husky, lint-staged, commitizen - 管理 git hooks，提交前代码检查、提交内容格式
• postcss, sass 处理 CSS
  • autoprefixer

试试！

vulcan 需要 node 版本 >= 14.18

克隆到本地

npx degit pengzhanbo/vulcan my-vulcan-app
cd my-vulcan-app
pnpm i # 如果你没装过 pnpm, 可以先运行: npm install -g pnpm

清单

在使用本模板时，请尝试按照清单更新您的信息：

• 在 LICENSE 中更新作者信息
• 在 package.json 中更新 name 字段
• 删除不必要的 DEMO 文件
• 删除不必要的路由
• 重新整理 README

使用

开发

执行以下命令即可在 localhost:8080/ 访问

pnpm dev

构建

执行以下命令即可进行项目构建

pnpm build

构建后的代码将会在 dist 中生成

浏览器支持

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

LICENSE

MIT