README.zh-CN.md

Vitesse-H5

快速地^Vitesse-H5 创建移动端 Web 应用

在线 Demo

English | 简体中文

为什么有 Vitesse-H5?

由于工作的原因，我主要编写一些移动端相关的应用项目。 而我自己业余也经常写一些小工具，譬如 air-conditioner、cook、your-university 等。 它们的流量大部分来自移动端，因此移动端的适配是必不可少的。

针对移动端，也有一些更合适的策略和实践。

因此我建立了这一模版来记录我认为的移动端网页应用的最佳实践，它的灵感来自 vitesse。

特性

• ⚡️ Vue 3, Vite 3, pnpm, ESBuild - 就是快！

• 🗂 基于文件的路由

• 📦 组件自动化加载

• 🍍 使用 Pinia 的状态管理

• 📑 布局系统

• 🎨 UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

• 😃 各种图标集为你所用

• 🌍 I18n 国际化开箱即用

• 🗒 Markdown 支持

• 🔥 使用 新的 <script setup> 语法

• 📥 API 自动加载 - 直接使用 Composition API 无需引入

• 🖨 可选地使用 vite-ssg 进行服务端生成 (SSG)（通常情况下，纯移动端项目且无独立路由需求，我更推荐 SPA）

• 🦔 使用 critters 的生成关键 CSS

• 🦾 TypeScript, 当然

• ⚙️ 结合 GitHub Actions，使用 Vitest 进行单元测试

• ☁️ 零配置部署 Netlify

预配置

UI 框架

• UnoCSS - 高性能且极具灵活性的即时原子化 CSS 引擎

Icons

• Iconify - 使用任意的图标集，浏览：🔍Icônes
• UnoCSS 的纯 CSS 图标方案

插件

• Vue Router
  • unplugin-vue-router - 以文件系统为基础的路由
  • vite-plugin-vue-layouts - 页面布局系统
• Pinia - 直接的, 类型安全的, 使用 Composition api 的轻便灵活的 Vue 状态管理
• unplugin-vue-components - 自动加载组件
• unplugin-auto-import - 直接使用 Composition API 等，无需导入
• vite-plugin-vue-markdown - Markdown 作为组件，也可以让组件在 Markdown 中使用
  • markdown-it-prism - Prism 的语法高亮
  • prism-theme-vars - 利用 CSS 变量自定义 Prism.js 的主题
• Vue I18n - 国际化
  • vite-plugin-vue-i18n - Vue I18n 的 Vite 插件
• VueUse - 实用的 Composition API 工具合集
• @vueuse/head - 响应式地操作文档头信息
• @vitejs/plugin-legacy - 为在生产环境中构建时不支持原生ESM的遗留浏览器提供支持。

编码风格

• 使用 Composition API 地 <script setup> SFC 语法
• ESLint 配置为 @antfu/eslint-config, 单引号, 无分号.

开发工具

• TypeScript
• Vitest - 基于 Vite 的单元测试框架
• pnpm - 快, 节省磁盘空间的包管理器
• vite-ssg - 服务端生成
  • critters - 关键 CSS 生成器
• Netlify - 零配置的部署
• VS Code 扩展
  • Vite - 自动启动 Vite 服务器
  • Volar - Vue 3 <script setup> IDE 支持
  • Iconify IntelliSense - 图标内联显示和自动补全
  • i18n Ally - 多合一的 I18n 支持
  • ESLint

现在可以试试!

Vitesse 需要 Node 版本 >=14.18

GitHub 模板

使用这个模板创建仓库.

克隆到本地

如果您更喜欢使用更干净的 git 历史记录手动执行此操作

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

清单

使用此模板时，请尝试按照清单正确更新您自己的信息

• 在 LICENSE 中改变作者名
• 在 App.vue 中改变标题
• 在 public 目录下改变favicon
• 移除 .github 文件夹中包含资助的信息
• 整理 README 并删除路由

紧接着, 享受吧 :)

使用

开发

只需要执行以下命令就可以在 http://localhost:3333 中看到

pnpm dev

构建

构建该应用只需要执行以下命令

pnpm build

然后你会看到用于发布的 dist 文件夹被生成。

部署到 Netlify

前往 Netlify 并选择你的仓库, 一路 OK 下去，稍等一下后，你的应用将被创建.

使用 Docker 构建

首先，通过在项目的根目录中打开终端来构建 vitesse-h5 映像。

docker buildx build . -t vitesse-h5:latest

运行映像并使用 -p 标志指定端口映射。

docker run --rm -it -p 8080:80 vitesse-h5:latest