npm package: @purevue/vue
Description: 1.
Latest version: 0.0.9

# **@purevue/vue**

1. 

   - > [English](./README.md) | [简体中文](./README.zh-CN.md)

   

## **🔎 项目介绍**

- **PureVue (@purevue)** 是一个 **从零实现 Vue3 源码架构** 的学习型项目。
  - 实现思路与 **Vue 官方源码几乎一致**，但进行了简化，更适合学习
  - 目标是帮助开发者理解 **Vue3 的核心机制**（响应式、虚拟 DOM、模板编译等）
  - 注意：**仅供源码学习与研究，不适合生产环境使用**



------



## **📦 包介绍**

- @purevue/vue 是整个项目的 **聚合入口包**：

  - 类似官方的 vue 包
  - 汇总了 reactivity、runtime-core、runtime-dom、compiler 等子包
  - 使用方式与 Vue3 **保持一致**，方便对照源码学习

  

  ⚠️ **注意**：@purevue/router、@purevue/vite-plugin 并未包含在此聚合包中，需要 **单独安装**。

  

------



## **🏗 子包关系**

PureVue 拆分成多个子包，**@purevue/vue** 依赖并聚合了它们：

- **@purevue/reactivity** – 响应式系统（ref、reactive、依赖收集等）
- **@purevue/runtime-core** – 运行时核心（组件系统、虚拟 DOM）
- **@purevue/runtime-dom** – DOM 渲染平台适配
- **@purevue/compiler-core** – 模板编译核心逻辑
- **@purevue/compiler-dom** – 针对浏览器的模板编译实现
- **@purevue/shared** – 工具函数与公共逻辑



不被 **@purevue/vue** 聚合（需要单独安装）：

- **@purevue/compiler-sfc** — SFC（.vue）解析与构建时处理；**构建时工具**，不属于运行时聚合。
- **@purevue/vite-plugin** — Vite 插件，用于在开发/构建期间把 .vue 文件转为模块；**依赖 @purevue/compiler-sfc**，并应作为 devDependency **单独安装**。
- **@purevue/router** — 路由包，**需单独安装**，不在聚合包里。



------



## **🎮 Demo**

👉 示例仓库：[purevue-demo](https://github.com/himipeng/purevue-demo)

```bash
git clone https://github.com/himipeng/purevue-demo.git
cd purevue-demo
pnpm install
pnpm dev
```



------



## **🚀 使用说明**

1. API **与 Vue3 对齐。  
2. 具体用法可参照 demo 项目。

```ts
import { createApp, ref } from '@purevue/vue'
// or use alias mapping to import from 'vue'
```



------



## **📝 TODOLIST**

### **模板编译 (Compiler)**

| **功能**                    | **DONE/TODO** |
| --------------------------- | ------------- |
| parse → transform → codegen | ✅             |
| 运行时编译                  | ✅             |
| AST 生成                    | ✅             |
| VNode 生成                  | ✅             |
| 指令 v-on / @click 支持     | ✅             |
| 指令 v-if / v-for 支持      | ×             |
| 指令 v-model 等支持         | ×             |
| slot 支持                   | ×             |
| 构建时编译 SFC（.vue）      | ✅             |
| <script> 支持               | ✅             |
| <script setup> 支持         | ×             |



### **渲染器 (Renderer)**

| **功能**                | **DONE/TODO** |
| ----------------------- | ------------- |
| createApp / mount       | ✅             |
| patch / h / createVNode | ✅             |
| Diff 算法优化           | ×             |



### **响应式系统 (Reactivity)**

| **功能**                                        | **DONE/TODO** |
| ----------------------------------------------- | ------------- |
| ref / reactive / computed / watch / watchEffect | ✅             |
| inject / provide                                | ✅             |
| scheduler / dep / ReactiveEffect                | ✅             |
| nextTick                                        | ×             |



### **路由系统 (Router)**

| **功能**           | **DONE/TODO** |
| ------------------ | ------------- |
| HTML5 History 路由 | ✅             |
| Hash 路由          | ×             |
| 嵌套路由           | ✅             |
| 路由守卫           | ×             |
| 动态路由           | ×             |



------



## **💡 特性**

- ⚡ **几乎完全复刻 Vue3 架构**：和官方源码保持一致的设计思路
- 📖 **源码简化**：保留核心功能，降低阅读和调试门槛
- 🛠 **模块化设计**：子包拆分同官方 Vue3
- 🎯 **学习优先**：更适合源码学习，而非生产使用