Vue 程式札記 : 用 Vite 創建你第一個 Vue 專案

Vue 是尤雨溪所開發的一個前端框架，Vue 提供了響應式數據綁定和組件化的開發模式，能方便開發者構建出具有良好交互性的前端應用。而 Vite 則是一個前端構建工具，用途是提供更快的開發體驗。然後，本文將介紹如何使用 Vite 建立一個 Vue 專案的開發環境，這是你學習 Vue 的第一步。

開始創建 Vue 專案之前

在開始之前，請確保您已經安裝了 Node.js。Vite 需要 Node.js 的環境才能運行。你可以通過 Node.js 官網 下載並安裝最新版本的 Node.js。

步驟 1：創建 Vue 專案

首先，打開終端機(Terminal)或命令提示符(Command Prompt)，並運行以下命令來創建一個新的 Vue 專案：

npm init vue@latest

"執行上面的指令後，會跳出以下這段內容，輸入 y 就好"
Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y

"接著就會跳出以下這些問題，首先是你要創建的專案名稱，以及問你是否要裝這些工具
依照你的需求去選擇是否安裝就好"
√ 請輸入專案名稱： ... vue-project
√ 是否使用 TypeScript 語法？ ... 否 / 是
√ 是否啟用 JSX 支援？ ... 否 / 是
√ 是否引入 Vue Router 進行單頁應用開發？ ... 否 / 是
√ 是否引入 Pinia 用於狀態管理？ ... 否 / 是
√ 是否引入 Vitest 用於單元測試 ... 否 / 是
√ 是否要引入一款端對端（End to End）測試工具？ » Cypress
√ 是否引入 ESLint 用於程式碼品質檢測？ ... 否 / 是
√ 是否引入 Prettier 用於程式碼格式化？ ... 否 / 是

等到這些命令都執行完成後，就可以進入專案目錄了：

cd vue-project

步驟 2：安裝套件

在專案目錄中，運行以下命令來安裝所有必要的套件：

npm install

這個命令會根據 package.json 文件中的設定，安裝所有需要的 Node.js 套件。

步驟 3：運行開發伺服器

安裝完套件後，你可以使用 Vite 的開發伺服器來啟動專案：

npm run dev

這個命令會啟動一個本地開發伺服器，打開瀏覽器輸入 http://localhost:5173/ ，就能顯示出你的 Vue 應用。現在，你可以開始開發你的 Vue 專案了！任何對文件的修改都會即時反映在瀏覽器中，不需要手動刷新。

Vue 專案成功運行

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡