# 【Vue】使用 Vue 的多種方式
這個章節會介紹各種使用Vue的情境

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

Vue 提供了一個叫做 [petite-vue](https://github.com/vuejs/petite-vue) 的專案，他是專門設計給增強式開發的情境做使用。

## 作為 Web Component 嵌入
你可以使用 Vue 來 [build 原生的網頁元件](https://cn.vuejs.org/guide/extras/web-components.html)(這裡以後會介紹)，這種元件不論是用何種方式渲染的 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](https://jamstack.org/what-is-jamstack/)

SSG 有兩種風格：
* 單頁
* 初始頁面加載後，會 hydrate 成 SPA ，這種前期會需要比較多的成本，但是後期的 navigation 就會更快。
* 多頁
* 每次換頁都會加載一個新的頁面，這種方法可以加載最少量的 js 甚至不用加載，有些框架（例如 [Astro](https://astro.build/)）會提供部分 hydtation，這可以讓使用 Vue 元件來建立靜態網站內的 [island](https://deno.com/blog/intro-to-islands)(靜態生成網站中的可互動部分)

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

## 不只是網頁應用
Vue 雖然是為瀏覽器設計，但他也可以應用在其他地方：
* 配合 [Electron](https://www.electronjs.org/) 或 [Tauri](https://tauri.app/) 建立桌面應用程式
* 配合 [Ionic Vue](https://ionicframework.com/docs/vue/overview) 移動端的應用程式
* 使用 [Quasar](https://quasar.dev/) 同时開發桌面端和移動端應用程式
* 使用 Vue 的自定義渲染 API 来建立不同標的渲染器，比如 WebGL 甚至是终端機命令。