如何本地调试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,刷新页面即可进入调试模式了

完。

相关推荐
前端小巷子38 分钟前
watch 与 computed:Vue3响应式的抉择
前端·vue.js·面试
用户6120414922131 小时前
springboot+vue3做的图书管理与借阅系统
vue.js·spring boot·后端
计算机学姐10 小时前
基于SpringBoot的社团管理系统【2026最新】
java·vue.js·spring boot·后端·mysql·spring·mybatis
前端开发爱好者11 小时前
弃用 ESLint + Prettier!快 35 倍的 AI 格式化神器!
前端·javascript·vue.js
&白帝&11 小时前
vue2和vue3的对比
javascript·vue.js·ecmascript
骑驴看星星a12 小时前
Vue中的scoped属性
前端·javascript·vue.js
四月_h12 小时前
在 Vue 3 + TypeScript 项目中实现主题切换功能
前端·vue.js·typescript
qq_4275060812 小时前
vue3写一个简单的时间轴组件
前端·javascript·vue.js
OpenTiny社区15 小时前
TinyEngine 2.8版本正式发布:AI能力、区块管理、Docker部署一键强化,迈向智能时代!
前端·vue.js·低代码
qfZYG15 小时前
Trae 编辑器在 Python 环境缺少 Pylance,怎么解决
前端·vue.js·编辑器