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

完。

相关推荐
muyun28002 小时前
History 模式 vs Hash 模式:Vue Router 技术决策因素详解
vue.js·算法·哈希算法
码上暴富6 小时前
axios请求的取消
前端·javascript·vue.js
tager7 小时前
Vue 3 组件开发中的"双脚本"困境
前端·vue.js·代码规范
海天胜景11 小时前
vue3 el-table 去除小数 并使用千分号
javascript·vue.js·elementui
漫天星梦11 小时前
Vue2项目搭建(Layout布局、全局样式、VueX、Vue Router、axios封装)
前端·vue.js
星光不问赶路人12 小时前
TypeScript 模块扩展
vue.js·typescript
柏成12 小时前
qiankun 微前端框架🐳
前端·javascript·vue.js
天下无贼16 小时前
【轮播图】H5端轮播图、横向滑动、划屏效果实现方案——Vue3+CSS position
css·vue.js
泉城老铁16 小时前
Spring Boot + Vue + ZLMediaKit 实现 RTSP 拉流播放的完整方案
java·vue.js·音视频开发
花菜会噎住16 小时前
Vue3核心语法进阶(生命周期)
前端·javascript·vue.js·生命周期