依赖安装
- 使用 yarn 安装所有依赖
package.json 启动 添加配置
- 在dev 命令里 加上 –sourcemap,便于源码调试
在源码根目录中运行npm run dev
- 运行npm run dev 在dist文件夹下生成 vue.js文件
新建一个test目录，并创建test.html文件用于测试
- m在html文件中使用script引入 dist/vue.js 文件
在测试代码中调试
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-源码调试</title>
</head>
<script src="../dist/vue.js"></script><body><div id="app">{{ message }}</div><script>const vm = new Vue({el: '#app',data: {message: 'hello world'}})console.log(Vue)</script>
</body></html>
直接在vscode中调试Vue源代码
- 安装插件 Microsoft Edge Tools for VS Code
- vscode 左边 会有一个edge的操作按钮，用于浏览器调试
-
打开测试代码 test.html 中，按 F5 ，唤醒调式操作界面
-
点击最右侧的调试图标可在vscode内部预览项目
-
- vscode中预览项目效果
代码中添加debugger
- 在代码中直接加 debugger
- 在vscode 编辑器的函数左边添加 小红点，点击即可
![[word] word自定义编号格式怎么设置 #经验分享#职场发展#职场发展](https://img-blog.csdnimg.cn/img_convert/85a3adf43e3d0fa78bd3b167ef355c61.gif)
