vue3.5.18源码:调试方式

vue3框架的使用极大提高了项目开发效率,我们不断的使用着耳熟能详的vue api去完成业务功能,却往往忽略其背后复杂而又精妙的实现原理。本文就将以debugger的方式对vue3源码进行调试,以便清晰理解vue的底层实现原理。

1、vue3源码调试方式

(1)准备工作

下载vue源码https://github.com/vuejs/core/tree/v3.5.18; 然后通过npm install的方式安装所需的依赖node_modules(如果执行过程有报错,可以借助大模型协助解决); 接着使用npm run build的方式打包生成packages/vue/dist/vue.global.js;

(2)进行调试

dist当前同级目录下使用index.html进行调试:

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const App = {
        template: `<div>Hello World</div>`,
      };
      debugger;
      const app = Vue.createApp(App);
      app.mount("#app");
    </script>
  </body>
</html>

通过vscodeOpen with Live Serve的方式启动index.html文件,开始debugger断点调试。

2、脚手架

通过vue create app的方式创建一个空白项目:

(1)准备工作

通过vue create app创建的项目,只需要在vue.config.js修改vue的指向vue/dist/vue.esm-bundler.js:

js 复制代码
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        // 修改vue的源码指向
        vue$: "vue/dist/vue.esm-bundler.js",
      },
    },
  },
});

(2)进行调试

main.js文件中修改为:

js 复制代码
import { createApp } from "vue";
const App = {
  template: `<div>Hello World</div>`,
};
debugger;
let vm = createApp(App).mount("#app");

通过npm run serve的方式启动vue脚手架,开始debugger断点调试。

现在可以愉快的进行底层原理探索了。

相关推荐
花落文心1 小时前
使用 html2canvas + jspdf 实现页面元素下载为pdf文件
前端·javascript·pdf
掘金安东尼1 小时前
🚀 6 行 HTML,让应用瞬间“起飞”:Speculation Rules API 全解析
前端·api·浏览器
望获linux2 小时前
【Linux基础知识系列】第一百一十篇 - 使用Nmap进行网络安全扫描
java·linux·开发语言·前端·数据库·信息可视化·php
乘乘凉2 小时前
Python中函数的闭包和装饰器
前端·数据库·python
Fantastic_sj3 小时前
部分CSS笔试题讲解
前端·css
雷达学弱狗5 小时前
链式法则解释上游梯度应用
开发语言·前端·javascript
爱隐身的官人7 小时前
爬虫基础学习-爬取网页项目(二)
前端·爬虫·python·学习
Jackson@ML7 小时前
使用字节旗下的TREA IDE快速开发Web应用程序
前端·ide·trea
计算机学姐9 小时前
基于SpringBoot的社团管理系统【2026最新】
java·vue.js·spring boot·后端·mysql·spring·mybatis
烛阴10 小时前
解锁 TypeScript 的元编程魔法:从 `extends` 到 `infer` 的条件类型之旅
前端·javascript·typescript