Vue3源码系列-Vscode调试源码

本系列文章参考的vue源码commit号是6021d0253e36b35d07d231b9ed36f95e286035be,版本号是3.3.6,以后如果出现vue4/vue5,本系列可能不适合阅读
本篇主要讲解如何调试源码,以及编写一个可运行的简单demo

相关资料:

  1. vue3文档
  2. vue3源码地址
  3. pnpm是什么
  4. pnpm多包管理
  5. esbuild是什么

启动服务

下载源码,默认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会打开一个新浏览器窗口

往浏览器输入地址 这就是我们刚才编写的代码呈现的页面

点击代码行数左边空白处 刷新浏览器就可以看到

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

相关推荐
IT_陈寒23 分钟前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端32 分钟前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家1 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞1 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手1 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞1 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor1 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i1 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor2 小时前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
前端Hardy2 小时前
HTML&CSS&JS:抖音爆火的满屏“关心弹幕”酷炫卡片,已经帮你打包好了,快来体验吧!
前端·javascript·css