簡介

Vitesse 的介紹可以直接看 Github 中的說明，簡單來說就是可以直接下載就可以直接開始使用的模板，跟常看到的 Admin Template 不一樣的就是，Vitesse 把相關 Vite 好用的 Plugin 套入並加入少量的 Sample Code ，讓開發者可以在相對完善的基礎下，自由的開發想要的前端功能。主要套入的功能如下，取自於 Vitesse 的 Feature 說明。

⚡️ Vue 3, Vite 2, pnpm, ESBuild - born with fastness
🗂 File based routing
📦 Components auto importing
🍍 State Management via Pinia
📑 Layout system
📲 PWA
🎨 UnoCSS - the instant on-demand atomic CSS engine
😃 Use icons from any icon sets with classes
🌍 I18n ready
🗒 Markdown Support
🔥 Use the new <script setup> syntax
🤙🏻 Reactivity Transform enabled
📥 APIs auto importing - use Composition API and others directly
🖨 Static-site generation (SSG) via vite-ssg
🦔 Critical CSS via critters
🦾 TypeScript, of course
⚙️ Unit Testing with Vitest, E2E Testing with Cypress on GitHub Actions
☁️ Deploy on Netlify, zero-config

開發

其實說明文件也寫的很清楚只需要下面三個步驟就可以開發

Quick Start

1
2
3

npx degit antfu/vitesse my-vitesse-app
cd my-vitesse-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm

pnpm 真的好用很多，尤其在 Window 的環境會快很多，強力推薦安裝

Checklist

開發前記得確認一下以下設定

在 LICENSE 中改作者的名字，在 Copyright 之後
在 App.vue 中修改網站標題
在 vite.config.ts 中修改 PWA 的名字
在./public/ 中調整 favicon
刪除 .github/ 或調整成自己的 workflow
清掉所有 README 檔案

Development

跑起來並前往 http://localhost:3333

pnpm dev

Build

透過以下命令 build 成靜態網站

1	pnpm build

Upgrade

由於模版本身會一直更新，但我也找不到什麼方法可以有效又正確的更新，所以在 ./package.json 中加了一個 vitesse-version 去記錄目前的更新版本

{
  "name": "Vitesse",
  "version": "0.0.0",
  // Git Commit ID, 月, 日, 年
  "vitesse-version": "52fdb6dd64ca7a2dabc6c4e4405b2ffd91ec47cc,6,14,2022",
  ....
}