【Vue】使用 Vue 的多種方式

這個章節會介紹各種使用Vue的情境

獨立腳本

Vue 可以作為獨立腳本使用－也就是不用執行 build 。假如你的專案後端渲染了大部分的 html 結構，又或者是你的前端邏輯很簡單，你就可以使用 Vue ，把 Vue 想成是 jQuery 的替代品就好。

Vue 提供了一個叫做 petite-vue 的專案，他是專門設計給增強式開發的情境做使用。

作為 Web Component 嵌入

你可以使用 Vue 來 build 原生的網頁元件(這裡以後會介紹)，這種元件不論是用何種方式渲染的 html 頁面，都可以做嵌入（包含各種舊專案、靜態網站甚至是不同框架），如此一來便不需要考慮你的專案最終的應用情境。

單頁面應用(SPA)

一般來說我們學習 Vue 時會做的 side project 都是屬於此類型，若你的專案在前端有豐富的互動、複雜的程式邏輯等等，就很適合使用 Vue。 Vue 會控制整個頁面、負責抓取與處理資料，並在無需重新加載的情況下提供切換頁面功能。

• Vue 有提供的功能：
  • Client side router
  • 極速的建構工具
  • IDE 支援
  • 瀏覽器開發工具
  • 整合 typescript
  • 測試工具

全端（SSR）

純粹的 SPA 會遇到像是 SEO 不好的問題，因為在 Vue 的 JS 加載完之前， html 都會是空的。 Vue 提供了一系列的 api ，讓伺服器可以先將 Vue 渲染成 html 字串傳到前端，這樣在 js 載入完畢之前使用者就能先看到 html 頁面了，之後 Vue 還會再 『hydrate』應用程式，讓他變得可互動，這些就稱作 server-side rendering (SSR)。

Nuxt.js 就是 Vue 的 SSR 框架。

JAMStack (SSG)

如果所需資料是靜態的，那麼伺服器端渲染是可以提前完成的，這代表我們可以將整個應用程式渲染為 html 並作為靜態文件部署。這樣可以增強性能以及讓部屬變的容易。這種技術稱為 SSG 或 JAMStack

SSG 有兩種風格：

• 單頁
  • 初始頁面加載後，會 hydrate 成 SPA ，這種前期會需要比較多的成本，但是後期的 navigation 就會更快。
• 多頁
  • 每次換頁都會加載一個新的頁面，這種方法可以加載最少量的 js 甚至不用加載，有些框架（例如 Astro）會提供部分 hydtation，這可以讓使用 Vue 元件來建立靜態網站內的 island(靜態生成網站中的可互動部分)

單頁 SSG 比較適合重視互動或是常常需要換頁的情況，其他情況則是多頁 SSG 會比較好。
VitePress 是 Vue 團隊開發的靜態站點生成器，Vue 的官方文件也是用 VitePress 產生的。此外 Nuxt 也有提供靜態站點生成，甚至可以混用 SSG 與 SSR。

不只是網頁應用

Vue 雖然是為瀏覽器設計，但他也可以應用在其他地方：

• 配合 Electron 或 Tauri 建立桌面應用程式
• 配合 Ionic Vue 移動端的應用程式
• 使用 Quasar 同时開發桌面端和移動端應用程式
• 使用 Vue 的自定義渲染 API 来建立不同標的渲染器，比如 WebGL 甚至是终端機命令。