Vue

构建用户界面的渐进式 JavaScript 框架，声明式渲染加自动响应式更新

开发框架 AI 开发免费开源

访问官网 GitHub 文档

核心功能

在标准 HTML、CSS、JavaScript 之上提供声明式、组件化的编程范式：模板描述界面长什么样，状态一变框架自动更新 DOM。既能用一个 script 标签增强静态页面，也能撑起完整的单页应用或服务端渲染项目。

功能亮点

模板即 HTML 的超集

在普通 HTML 上加 {{ }} 插值和 @click 这类指令，不熟悉 JSX 也能直接上手写界面

状态改了界面自己变

ref 包裹的值被修改后，框架追踪到读取它的位置并只更新受影响的那部分 DOM

一个文件装下一个组件

SFC 把 script、template、style 三段收进同一个 .vue 文件，样式还能用 scoped 隔离

两种写法自由选择

Options API 更贴近面向对象的思维习惯，Composition API 便于把逻辑抽成可复用的组合函数

可以完全不用构建工具

一行 script 标签引入 CDN 版本，就能给已有的服务端渲染页面加上交互，代价是用不了 SFC

适用场景

• 基于 Vite 搭建单页应用，用 create-vue 一次性配好路由、状态管理和测试
• 给已有的服务端渲染页面加交互：CDN 引入 Vue 后挂载到某个容器，不引入构建流程
• 需要 SSR / SSG 时改用 Nuxt 等上层框架，组件写法保持一致

安装配置

bash

创建项目（需要 Node.js ^22.18.0 || >=24.12.0）——

npm:
npm create vue@latest

pnpm:
pnpm create vue@latest

Yarn（v1+）:
yarn create vue

Yarn Modern（v2+）:
yarn create vue@latest

Yarn ^v4.11:
yarn dlx create-vue@latest

Bun:
bun create vue@latest

创建后安装依赖并启动开发服务器:
cd <your-project-name>
npm install
npm run dev

生产构建（产物在 ./dist）:
npm run build

不走构建、直接用 CDN:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

使用方法

javascript

<!-- 单文件组件，Composition API + <script setup> 写法 -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<!-- 无构建步骤时，用 CDN 全局构建版 -->
<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>