1. Vue 简介与安装

本节目标：搞清楚 Vue 是什么、为什么叫”渐进式”，并学会三种把 Vue 装进项目的方式。

Vue 是什么

Vue（读作 /vjuː/，像”view”）是一个用来构建用户界面的 JavaScript 框架。它基于标准的 HTML、CSS 和 JavaScript，提供了一套声明式、组件化的编程模型。

来看一个最小示例：

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

这个例子展示了 Vue 两个核心能力：

声明式渲染：用模板语法描述 HTML 长什么样，Vue 负责把数据渲染成 DOM
响应式：数据变了，DOM 自动更新，不用手动操作

渐进式框架

Vue 被设计成”渐进式”的——你可以只用一点点，也可以全家桶，按需来。

使用方式	场景
增强静态 HTML	在现有页面加个交互组件
嵌入 Web Components	在任何页面里用 Vue 组件
SPA 单页应用	完整前端应用
SSR 服务端渲染	SEO 友好的全栈应用
SSG 静态站点生成	博客、文档站

Tip

不要被这些名词吓到。教程前期只需要懂 HTML 和 JavaScript 基础就行，后面会逐步深入。

两种 API 风格

Vue 组件有两种写法：

Options API：用对象选项定义组件逻辑，data、methods、mounted 这些。

export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log(`初始值是 ${this.count}`)
  }
}

Composition API：用导入的函数组合逻辑，<script setup> 是推荐写法。

<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

onMounted(() => {
  console.log(`初始值是 ${count.value}`)
})
</script>

两种风格底层是同一套系统。Options API 对新手更友好，Composition API 在复杂场景下更灵活。本教程以 Composition API 为主。

安装方式

方式一：CDN 引入

最简单，一个 <script> 标签搞定，不需要构建工具：

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

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

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return { message }
    }
  }).mount('#app')
</script>

Note

CDN 方式无法使用单文件组件（.vue 文件），适合快速原型或增强现有页面。

也可以用 ES Module 方式引入，配合 Import Maps 让代码更干净：

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<script type="module">
  import { createApp, ref } from 'vue'
  // ...
</script>

方式二：npm 安装

适合有构建工具的项目：

npm install vue

然后在代码中导入使用：

import { createApp } from 'vue'

方式三：脚手架创建项目（推荐）

官方脚手架 create-vue 基于 Vite，开箱即用：

npm create vue@latest

按提示选择需要的特性（TypeScript、Router、Pinia 等），不确定就选 No。然后：

cd your-project
npm install
npm run dev

项目就跑起来了。生成的项目默认使用 Composition API + <script setup>。

Tip

推荐用 VS Code + Vue - Official 插件，开发体验最好。

本节回顾

Vue 是声明式、组件化的 JavaScript 框架
“渐进式”意味着可以按需采用，从简单到复杂
两种 API 风格：Options API 和 Composition API
三种安装方式：CDN（最简单）、npm（手动集成）、脚手架（推荐生产用）