已發布·持續改進
Framework · 2014 年發布
Vue.js 是以宣告式元件建構介面的漸進式 JavaScript 框架；Nuxt 在其上提供路由、伺服器端渲染與伺服器 API。
Vue.js 是由尤雨溪(Evan You)建立、於 2014 年首次發布的開源 JavaScript 框架，用來建構使用者介面。它結合以 HTML 為基礎的範本與響應式狀態，資料變動時畫面會自動更新；其基本單位是單一檔案元件(.vue)，把範本、腳本與樣式放在同一個檔案中。Nuxt 是建構在 Vue 之上的全端框架，內建以檔案為基礎的路由、自動匯入、伺服器端渲染，以及由 Nitro 引擎驅動的伺服器 API。
Vue 可以漸進式地導入：小至用一個 script 標籤為既有頁面的一部分加入互動，大至用 Vite 建構完整的單頁應用程式。它特別適合管理後台、資料儀表板與內部工具等互動頻繁的畫面。若搜尋引擎能見度與首次載入速度很重要，或希望在同一個專案中管理頁面與 API，Nuxt 提供伺服器端渲染、靜態產生與伺服器路由，並可部署到 Node.js 伺服器、靜態託管等多種環境。
初學者可以先安裝 Node.js，再依照官網的互動式教學與指南學習響應式、元件與範本語法。接著用 npm create vue@latest 建立以 Vite 為基礎的專案，親手做出實際畫面；當需要路由慣例與伺服器端渲染時，再轉向 Nuxt。狀態管理用 Pinia、單元測試用 Vitest 是官方推薦的組合。
以 ref、reactive 與 computed 宣告的狀態會追蹤相依關係，值變動時只重新渲染使用它的那部分畫面。
範本、腳本與樣式寫在同一個 .vue 檔案中，開箱即可使用限定範圍的樣式與 TypeScript。
相關邏輯以函式為單位組織，並以組合式函式(composable)重複使用，即使是大型元件也能依功能維持清楚。
以檔案為基礎的路由、自動匯入、伺服器端渲染、靜態產生，以及 server 資料夾中的 API 路由，不需額外設定即可使用。
Vue 與 Nuxt 的工具在 Node.js 上執行。從 nodejs.org 安裝 LTS 版本，並確認 node 與 npm 能顯示版本號。
node --version && npm --version官方專案產生工具 create-vue 會依序詢問是否加入 TypeScript、Vue Router、Pinia、Vitest 等。在產生的資料夾中執行 npm install 與 npm run dev，即可啟動 Vite 開發伺服器。
npm create vue@latest使用 Nuxt 時，以 nuxi 建立新專案。進入產生的資料夾並執行 npm run dev，開發伺服器預設會在 http://localhost:3000 啟動。
npx nuxi@latest init my-nuxt-appsrc/App.vue 是 create-vue 專案的根元件。script setup 區塊以 ref(0) 建立響應式的 count；範本用雙大括號顯示它，並透過 @click 在每次點擊時加 1。count 變動時，Vue 只會重新渲染相依於它的部分。執行 npm run dev 後儲存檔案，修改會立即反映在瀏覽器中。
src/App.vue
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<h1>Hello, Vue!</h1>
<button @click="count++">Clicked {{ count }} times</button>
</template>
npm create vue@latest hello-vue && cd hello-vue && npm install && npm run dev共六章，帶你從安裝一步步認識 Vue.js · Nuxt 的核心概念。
在這裡提問、分享經驗，交流關於 Vue.js · Nuxt 的看法。
還沒有討論。來發起第一則吧。
0 則留言
登入 · 登入後即可留言。
來留下第一則留言吧。