39. Vue 使用方式

Vue 是渐进式框架。根据项目复杂度，你可以选择不同层次的使用方式。

独立脚本

最简单的方式：在 HTML 里直接引入 Vue 脚本，不需要构建工具。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
  const { createApp } = Vue
  createApp({
    data() {
      return { message: 'Hello Vue!' }
    }
  }).mount('#app')
</script>

适合场景：

• 后端渲染大部分 HTML（PHP、Django、Rails）
• 前端逻辑不复杂，不值得搭建构建流程
• 渐进增强，像 jQuery 一样局部使用

Web Components

Vue 可以把组件编译成标准 Web Components（自定义元素），在任何框架里使用：

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 普通 Vue 选项
  props: ['message'],
  template: `<div>{{ message }}</div>`
})

customElements.define('my-vue-element', MyVueElement)

然后任何 HTML 页面都能用：

<my-vue-element message="Hello"></my-vue-element>

适合场景：

• 跨框架组件库（React、Angular 项目都能用）
• 遗留系统渐进升级
• CMS 等无法控制渲染环境的平台

SPA（单页应用）

Vue 最主流的使用方式。整个应用是一个 HTML 页面，路由和页面切换由 JavaScript 处理。

SPA 的优势：

• 页面切换无刷新，用户体验流畅
• 前后端分离，职责清晰
• 丰富的工具链（Vue Router、Pinia、Vite）

Vue 为 SPA 提供的支持：

工具	作用
Vue Router	客户端路由
Vite	极速构建工具
Pinia	状态管理
Vue Devtools	浏览器调试

适合场景：交互丰富、登录态持久、不需要 SEO 的应用（后台管理系统、SaaS 工具）。

SSR（服务端渲染）

SPA 有个问题：首次加载时 HTML 是空的，需要等 JS 下载执行后才能看到内容。对 SEO 和首屏速度不友好。

SSR 在服务端把 Vue 应用渲染成 HTML 字符串发给用户，用户立刻看到内容。然后 Vue 在客户端”注水”（hydration），把静态 HTML 变成可交互的应用。

优势：

• 首屏速度快，SEO 友好
• 更好的 Core Web Vitals 指标（LCP）
• 社交平台能正确抓取页面内容

Vue 自己提供了 SSR API。更高层的框架（Nuxt）内置了 SSR 支持，开箱即用。

适合场景：电商、内容网站、营销页面——一切对首屏速度和 SEO 有要求的场景。

SSG（静态站点生成）

如果页面内容不依赖实时数据，可以提前渲染好所有 HTML 文件，部署到 CDN。

SSG 是”构建时 SSR”——构建阶段就把每个页面渲染成 HTML，用户访问时直接拿静态文件。

两种形态：

形态	特点
单页 SSG	首屏后变成 SPA，后续切换快
多页 SSG	每次导航加载新页面，JS 更少

适合场景：

• 文档站点（VitePress 就是）
• 博客、营销落地页
• 企业官网

跨平台开发

Vue 不止能写网页：

平台	工具
桌面应用	Electron、Tauri
移动应用	Ionic Vue
桌面 + 移动端	Quasar
3D WebGL	TresJS
终端 UI	Custom Renderer API

Vue 的 Custom Renderer API 让你可以自定义渲染目标——不仅能渲染 DOM，还能渲染 Canvas、WebGL、甚至终端字符。

本节回顾

• 独立脚本适合渐进增强、小功能
• Web Components 跨框架复用组件
• SPA 是最主流的方式，交互丰富
• SSR 优化首屏和 SEO，适合内容型站点
• SSG 预渲染静态页面，部署简单
• Vue 还能做桌面、移动端、3D 等跨平台开发
• 根据项目复杂度选择合适的方式