vue3源码调试

282 阅读2分钟

大家好,我是前端小喵

WechatIMG18166.jpg

背景: 实践了一下搭建vue3调试环境,踩了一些坑,记录一下

1、从 github 仓库 clone 到本地

git clone https://github.com/vuejs/core.git

2、全局安装pnpm

npm i -g pnpm

image.png

window环境:
这里最近用回公司window电脑开发碰到一个报错

image.png

解决办法:

2.1、win + x ,然后使用管理员的身份打开powershell

image.png

2.2、输入 set-executionpolicy remotesigned 后按y,问题得到解决

image.png

3、保证node版本大于16.5.0

直接下载最新版本,切换到最新版本吧,隔了几个月重新安装 vue3源码调试,所需要的最低版本从16.5.0要求到16.14.0

node -v // 查看node版本

我的node版本管理工具是n模块

npm install -g n  // 安装n模块
n // 查看当前所有node安装版本 切换版本
n latest // 下载node最新版本
n <version>  例如: n 14.19.0 // 下载指定版本

nvm管理工具
nvm ls(查看已安装版本)
nvm current(查看当前使用的版本)
nvm list available(查看可下载安装的最新版本列表)
nvm install (下载安装指定版本)
nvm use(使用指定的版本)
nvm install latest (下载最新版本)

4、package.json删除puppeteer

这是一个无头浏览器,puppeteer是一个Node库,它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。访问页面,用来进行截图、自动进行键盘输入,提交表单、模拟点击等用户操作

它比较大,安装耗时比较长,这里我们用不到这些功能,所以暂时去掉了。

5、安装依赖

pnpm i

我在这里报错了

截屏2023-07-28 下午5.18.39.png

No authorization header was set for the request.

删了pnpm-lock.yaml,该文件锁死了包的版本,重新 pnpm i
安装成功

截屏2023-07-28 下午5.34.40.png

6、运行项目

npm run serve

截屏2023-07-28 下午5.44.55.png

6.1、浏览器页面

截屏2023-07-28 下午5.46.29.png 6.2、进入vue的demo

截屏2023-07-28 下午5.47.06.png 6.3、随便点开一个目录里的html 就可以打上断点调试了

例如: http://localhost:5000/packages/vue/examples/classic/commits

截屏2023-07-28 下午5.49.14.png