如何本地调试vue core源码

对于想要在本地调试 vue core 源码的同学可以看看。

git clone vuejs/core仓库

下载本文调试的仓库 vuejs/core: github.com/vuejs/core

项目初始化

  • nvm add 22.14.0 安装 node 22
  • corepack pnpm install 安装指定版本的 pnpm
  • 全局安装ni 工具(下一步会用到): npm i -g @antfu/ni

  • 本地启动 vue: nr dev: vue/dist目录下是实时构建的代码

新建 index.html

  • 新建一个最简单的index.html页面,并引入vue.global.js,参考代码如下:
html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Simple HTML</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/packages/vue/dist/vue.global.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
          <h1>{{ message }}</h1>
          <button @click="increment">Count is: {{ count }}</button>
        `,
        setup() {
          const message = Vue.ref("Hello Vue!");
          const count = Vue.ref(1);
          const increment = () => {
            count.value++;
          };
          return { message, count, increment };
        },
      });
      app.mount("#app");
    </script>
  </body>
</html>

注意,script引入的是本地的 vue.global.js 文件,需要设置一下 vite.config.js:

ts 复制代码
// vite.config.js
import path from "path";

export default {
  publicDir: path.resolve(__dirname, "../core/"),
};

本地预览和调试

上述步骤完成后,在index.html所属目录下运行 npx vite,打开预览链接:http://localhost:5173/

接下来,在代码文件加断点:packages/reactivity/src/ref.ts,刷新页面即可进入调试模式了

完。

相关推荐
绿草在线36 分钟前
Vue3 开发的 VSCode 插件
ide·vue.js·vscode
银之夏雪1 小时前
Vue 3 vs Vue 2:深入解析从性能优化到源码层面的进化
前端·vue.js·性能优化
巴巴博一1 小时前
Tailwindcss开启黑夜模式
css·vue.js
柒@宝儿姐2 小时前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3
计算机-秋大田2 小时前
基于Spring Boot的小区疫情购物系统的设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·课程设计
一个处女座的程序猿O(∩_∩)O3 小时前
Vue 计算属性与 Data 属性同名问题深度解析
前端·javascript·vue.js
小咕聊编程4 小时前
【含文档+PPT+源码】基于SpringBoot和Vue的编程学习系统
vue.js·spring boot·学习
鱼樱前端6 小时前
从基础到深入的AST(Abstract Syntax Tree,抽象语法树)解析,结合前端框架(Vue/React)及实际应用场景的技术详解
javascript·vue.js·react.js
计算机学姐7 小时前
基于Asp.net的医院病历管理系统
vue.js·vscode·后端·mysql·sqlserver·c#·asp.net