本系列文章参考的vue源码commit号是6021d0253e36b35d07d231b9ed36f95e286035be,版本号是3.3.6,以后如果出现vue4/vue5,本系列可能不适合阅读
本篇主要讲解如何调试源码,以及编写一个可运行的简单demo
相关资料:
启动服务
下载源码,默认main分支 运行以下命令下载依赖
            
            
              shell
              
              
            
          
          pnpm i运行以下命令,会运行scripts/dev.js这个文件
            
            
              shell
              
              
            
          
          npm run dev打开dev.js阅读,会发现该文件是用来启动esbuild的程序,通过传入入口文件位置/启动sourceMap(启动调试的重要条件)等参数启动esbuild程序进行打包,最后会运行一个监听器,通过监听src中的ts文件变化重新打包
运行以下命令,启动一个server,打开这个地址就会打开packages/vue/examples/classic/todomvc.html页面的内容,第一步就大功告成了🎉
            
            
              shell
              
              
            
          
          npm run serve
进行调试
在.vscode文件夹添加launch.json,添加如下内容
            
            
              json
              
              
            
          
          {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "request": "launch",
      "type": "chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}在packages/vue/examples/classic添加一个最简单的Vue程序demo.html,添加如下内容
            
            
              html
              
              
            
          
          <script src="../../dist/vue.global.js"></script>
<div id="app">
  <h1>---{{a}}---</h1>
</div>
<script>
  Vue.createApp({
    data: () => {
      return {
        a: 122
      }
    }
  }).mount('#app')
</script>保存文件之后按F5,vscode会打开一个新浏览器窗口
 往浏览器输入地址
 往浏览器输入地址  这就是我们刚才编写的代码呈现的页面
 这就是我们刚才编写的代码呈现的页面
点击代码行数左边空白处  刷新浏览器就可以看到
 刷新浏览器就可以看到

 点击右上角箭头就可以调试代码每一步🎉
 点击右上角箭头就可以调试代码每一步🎉