Vite Glimpse

2024-11-03

筆記如何使用 Vite 進行開發，以及如何使用 Vite 建立一個簡單的專案。

說明

Vite 是一個新的前端開發工具，它的特點是快速、簡單、輕量。對比的是 Webpack，Vite 的速度更快，主要差別在於 Vite 是基於 ESModule 的開發方式，有別於 Webpack 是基於 CommonJS 的開發方式。

使用 Vite 可以取代 Vue CLI，Vite 同時也支援 React、Preact、LitElement 等框架。

先不需要開啟 VSCode，直接透過 CLI 建立專案的方式：

npm create vite@latest

接著選擇專案名稱、框架、程式語言等，就可以建立一個專案。

切換至專案後，開啟 VSCode，執行以下指令：

npm install
npm run dev

就可以開始進行開發。

Images 等資源可以放在 public 資料夾中，這樣就可以直接透過 / 來存取，並且在 npm run build 時會自動複製到 dist 資料夾中。

安裝 Tailwind

通常會接著安裝 Tailwind 來幫助開發，安裝方式如下：

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

接著需要建立 tailwind.config.js 與 postcss.config.js 檔案，同樣的，可以透過 CLI 來建立：

npx tailwindcss init -p

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}