vue3代码调试操作

1. clone 项目 vue3源码地址 git clone https://github.com/vuejs/core.git

2. 全局确认是否安装pnpm pnpm -v

   

   没有安装的话npm i -g pnpm

3. 项目目录结构

├── packages              
│   ├── compiler-core    // 核心编译器（平台无关）
│   ├── compiler-dom     // dom编译器
│   ├── compiler-sfc     // vue单文件编译器
│   ├── compiler-ssr     // 服务端渲染编译
│   ├── global.d.ts      // typescript声明文件
│   ├── reactivity       // 响应式模块，可以与任何框架配合使用
│   ├── runtime-core     // 运行时核心实例相关代码（平台无关）
│   ├── runtime-dom      // 运行时dom 关api，属性，事件处理
│   ├── runtime-test     // 运行时测试相关代码
│   ├── server-renderer   // 服务端渲染
│   ├── sfc-playground    // 单文件组件在线调试器
│   ├── shared             // 内部工具库,不对外暴露API
│   ├── size-check          // 简单应用，用来测试代码体积
│   ├── template-explorer  // 用于调试编译器输出的开发工具
│   └── vue                 // 面向公众的完整版本, 包含运行时和编译器

4. 打开终端执行pnpm i安装依赖
5. package.json -> scripts 中 "dev": "node scripts/dev.js" 修改为 "dev": "node scripts/dev.js --sourcemap"
6. 新建测试文件

<script src="../packages/vue/dist/vue.global.js"></script>
<div id="app">
  <div>test:::</div>
  <p>{{ count }}</p>
  <button @click="add">+1</button>
</div>
<script>
  const app = Vue.createApp({
    setup() {
      debugger
      let count = Vue.ref(0)
      const add = () => {
        count.value++
      }

      return {
        count,
        add
      }
    }
  }).mount('#app')
</script>

7. 开始调试 pnpm dev

在新增一个终端 执行 pnpm serve

然后打开网址下面的examples文件就可以开始调试了