vue3源码调试

160 阅读1分钟

阅读源码,首先第一步需要装好调试的环境。

安装vue3代码调试步骤:

1.github下载vue-next代码   git clone git@github.com:vuejs/vue-next.git

2.由于vue3使用的包管理器迁移到pnpm ,安装下   npm install -g pnpm 

官方文档   pnpm.io/   (基本命令  几个包管理器都差不多)

3.pnpm install  安装依赖失败,可以查看下是否是使用了别的源的问题

image.png

切换npm源,使用淘宝镜像

image.png

nrm ls 
nrm use taobao
pnpm i

4.安装依赖成功后 这个时候执行script命令的话  用yarn  pnpm npm 都行,用喜欢的     如yarn dev   打包dist文件

image.png

马上就打包好了,此时,目录vue-next/packages/vue/dist/中会生成  vue.global.js文件

rollup.config.js  和  tsconfig.json文件中开启sourceMap:true

完成以上操作就可以调试源码了。

浏览器调试:

可以在vue-next/packages/vue/examples/文件夹下新增一个html文件,

html中引入打包好的 vue.global.js文件,就可以使用vue3语法在浏览器中调试了

image.png

image.png

单元测试:

yarn test

image.png