# mini-vue

**Repository Path**: yanmingke/mini-vue

## Basic Information

- **Project Name**: mini-vue
- **Description**: vue3源码，复现了部分核心模块和设计思想
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-03
- **Last Updated**: 2025-12-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: TypeScript, JavaScript

## README

# mini-vue

这是一个简化版的 Vue 实现，用于学习目的。它包含 Vue 核心功能的简化版本，包括编译器、响应式系统、运行时核心和 DOM 操作等模块。

## 安装

要使用 mini-vue，您需要先安装 [pnpm](https://pnpm.io/)，然后运行以下命令：

```bash
pnpm install
```

## 使用

您可以在您的 HTML 文件中引入打包好的 JS 文件来使用 mini-vue：

```html
<div id="app">{{ message }}</div>
<script>
  const { reactive, effect } = VueReactivity;
  const { h, render } = VueRuntimeDom;

  const state = reactive({
    message: 'Hello Mini-Vue!'
  });

  effect(() => {
    const vnode = h('div', { id: 'app' }, state.message);
    render(vnode, document.getElementById('app'));
  });
</script>
```

## 目录结构

- `packages/compiler-core/` - 编译器核心，负责将模板编译成渲染函数。
- `packages/reactivity/` - 响应式系统，实现数据的响应式更新。
- `packages/runtime-core/` - 运行时核心，提供虚拟 DOM 渲染和组件系统。
- `packages/runtime-dom/` - DOM 操作，提供与浏览器 DOM 交互的功能。
- `packages/shared/` - 共享工具和常量。

## 贡献

欢迎贡献代码和改进文档。请提交 PR 或 issue 到 [https://gitee.com/yanmingke/mini-vue](https://gitee.com/yanmingke/mini-vue)。

## 许可证

该项目采用 MIT 许可证。详情请查看 [LICENSE](LICENSE) 文件。