vuejs/core 教程

vuejs/core 的教程要分两条线：想“用 Vue 做项目”走应用开发路线；想“研究框架本身”走源码/二次开发路线。 2026 年所有新项目都应直接选 Vue 3.5+，Vue 2 已停止维护。

1. 快速上手：用 Vue 3 做项目

# 需要 Node.js >= 20.19 或 >= 22.12
npm create vue@latest
cd <项目名>
npm install
npm run dev

推荐组合：

示例组件：

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

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

2. 源码阅读：研究 vuejs/core 本身

git clone https://github.com/vuejs/core.git
cd core
pnpm install
pnpm run dev

重点看这几个包：

• packages/reactivity：响应式系统，effect、reactive、ref
• packages/runtime-core：组件、渲染器、虚拟 DOM、调度器
• packages/runtime-dom：浏览器 DOM 适配
• packages/compiler-core：模板编译核心
• packages/vue：对外入口

推荐阅读顺序：

effect.ts → reactive.ts → ref.ts → runtime-core/renderer.ts → compiler-core

3. 调试源码

pnpm run dev
open packages/vue/examples/classic/markdown.html