0. 前言

Introduction | Vue.js (vuejs.org)

Vue 的两个核心 feature：

1. Declarative Rendering: Vue 有一个 template syntax，可以让我们根据 JS state 来声明 HTML output；
2. Reactivity: Vue 追踪 JS state change, 及时更新 DOM。

也就是说，Vue 为我们提供了一种更有效地根据 state 来改变 DOM output 的方式，让网页更加 reactive。

The Progressive Framework

Vue 可以根据不同的 use case 来使用，比如：

• 增加 static HTML：Enhancing static HTML without a build step
• 植入组件：Embedding as Web Components on any page
• Single-Page Application (SPA)
• Fullstack / Server-Side-Rendering (SSR)
• Jamstack / Static-Site-Generation (SSG)
• 开发桌面、手机、WebGL、甚至 terminal：Targeting desktop, mobile, WebGL or even the terminal
  • 比如通过 Electron 来做 desktop app
  • Ways of Using Vue | Vue.js (vuejs.org)

Single-File Component (SFC) - *.vue files

也就是用 *.vue file 来写 component。

*.vue file 里面包含 logic（JS），template（HTML），style（CSS）。

Single-File Components | Vue.js (vuejs.org)

Vue will handle all the build tools setup for you.

1. API Styles

Component 有两种风格：

1. Options API
2. Composition API

Options API

通过 an object of options 来定义 component’s logic.

如：data, methods, mounted

用 option 的 data 定义的 properties 可以通过 this 来 access。

Composition API

通过 imported API functions 来定义 component’s logic.

Composition API 往往和 <script setup> 来结合使用，暗示 Vue 会进行 compile-time transforms。

The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate.

好处

减少模板代码。在 <script setup> 里面定义的 import, variables, functions 都可以直接在 template 里面使用。

类似一个 global template。

用哪个？

底层是一样的，只是 interface 不一样，就是不同的代码风格和喜好，Options API 是基于 Composition API 的实现。

Options API 与 OOP 的概念更接近，比如有 this，基于 component instance，而且这种写法也更容易上手。

Composition API 基于 function scope，更加自由式，需要了解 vue 的 reactivity 是怎么工作的，这种灵活风格在组织代码、复用逻辑方面更加强大。

Composition API FAQ | Vue.js (vuejs.org)

Production 环境推荐：

• 假如不需要用 build tools，或者使用的场景复杂度比较低，或者只是部分用 vue，就用 Options
• 假如整个 application 都是用 vue，就用 Composition API + SFC

Note: Vue 的官方文档两种风格都会给实例。

2. Build Tools

Vite (official)

The official Vue build setup is based on Vite , a frontend build tool that is modern, lightweight and extremely fast.

StackBlitz (online)

StackBlitz runs the Vite-based build setup directly in the browser, so it is almost identical to the local setup but doesn’t require installing anything on your machine.

3. Quick Start

1. 直接在现有 HTML 里面用 Vue

所有的 API 都在 Vue 这个 global variable 里面。

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

假如使用这种方法的话，当 root component 不包含 template option 的时候，vue 会自动使用 container（id 为 app 的 div）的 innerHTML 作为 template。

Vue will automatically use the container’s innerHTML as the template if the root component does not already have a template option.

2. 使用 Vue build tool

npm init vue@latest

给出 project name 之后，不确定就一路选 No，然后进入 project folder install package，就可以 run 了。

cd <your-project-name>
npm install
npm run dev

Production

npm run build - 所有 file 都会在 ./dist folder。

Production Deployment | Vue.js (vuejs.org)

IDE setup

VS code + Volar extension

TS support

Using Vue with TypeScript | Vue.js (vuejs.org)

Tooling

Tooling | Vue.js (vuejs.org)