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

完。

相关推荐
苹果电脑的鑫鑫12 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
潜龙在渊灬30 分钟前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
村头一颗草43 分钟前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期1 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js
Anlici1 小时前
深入浅出Vue响应式原理:手把手解析Proxy与依赖追踪
前端·vue.js·面试
destinying1 小时前
原生JavaScript实现页面滚动监听:从入门到精通
前端·javascript·vue.js
前端咸鱼陈1 小时前
📈 Vue首屏优化终极指南:10大黑科技让加载速度飙升300%(附实战代码)
前端·vue.js
Theodore_10222 小时前
ES6(2) 函数详解
开发语言·前端·javascript·vue.js·es6
计算机学姐2 小时前
基于Asp.net的高校迎新管理系统
vue.js·vscode·后端·mysql·sqlserver·c#·asp.net