Awesome
Vulcan
<p align="center"> <img src="https://github.com/pengzhanbo/vulcan/blob/main/public/logo.png?raw=true" /> </p> <p align="center">🚀🚀一个基于 vite + vue3 的项目模板，帮助快速创建 Mobile Web 应用。🚀🚀</p> <br> <p align="center"> <a href="https://vulcan-vue.netlify.app/">在线案例</a> </p> <br> <br>特性
- ⚡️ 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插件
- @intlify/unplugin-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
试试
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 中生成