对于想要在本地调试 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
,刷新页面即可进入调试模式了
完。