使用 vite 快速建立 TypeScript 專案

身為一位後端工程師，平時鮮少接觸到前端專案，也不太會建立新的前端專案。 在之前的 建立最小 node.js 專案，快速開始寫程式 這篇文章中有示範使用 node.js 建立 TypeScript 專案，不過還是稍稍有點複雜。

今天剛好有個簡單的需求，快速以最低標準做完後又想找找看有沒有更簡單的方式可以解答之前的疑問：該如何最快建立前端網頁專案，需要能夠安裝套件、使用 TypeScript，並且在開發時能夠自動熱重載，不需要每次都下指令執行。
筆者在研究一番後有發現使用 vite 是個很快的方式，現在來紀錄/野人獻曝一下。

Vite 是 Vue.js 的作者製作的前端建置工具， 速度快、用很少的步驟就可以開始，使用 Vite 可以快速的建立各式前端技術的專案。

使用 vite 快速建立專案：

    
npm create vite@latest my-project
    

註：上方的 my-project 請替換為自己的專案名稱

然後會選擇模板，支援的模板有：

• vanilla
• vue
• react
• preact
• lit
• svelte
• solid
• qwik

然後選擇使用 JavaScript 還是 TypeScript

範例輸出：

    
npm create vite@latest my-project

> npx
> create-vite my-project

√ Select a framework: » Vanilla
√ Select a variant: » TypeScript

Scaffolding project in C:\Users\ruyut\Documents\WebstormProjects\2025\test\my-project...

Done. Now run:

  cd my-project
  npm install
  npm run dev
    

之後使用 cd 指令進入到專案目錄，使用 npm install 安裝套件，使用 npm run dev 就可以開始開發/預覽畫面了！

參考資料：
Vite.dev