Vue3 调试

谁践踏了优雅 2023-06-07 05:50 2阅读 0赞

# vue3源码学习 #

vue3源码。  
`TypeScript`。98% 以上使用 TypeScript 编写  
模块：

*  reactivity
 *  runtime-core
 *  runtime-dom
 *  runtime-test
 *  server-renderer
 *  compiler-core
 *  compiler-dom
 *  shared

## 调试搭建 ##

1.  clone 代码 `git clone https://github.com/vuejs/vue-next.git`
2.  文件`tsconfig.json`。更改属性`sourceMap: true`。
3.  文件`rollup.config.js`。函数`createConfig`中的`return`前添加一句话`output.sourcemap = true`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70_pic_center]
4.  执行命令`npm run dev`。会生成`packages/vue/dist/vue.global.js`文件。
5.  新建`example`文件夹，添加index.html 文件。引入刚刚生成的文件。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70]
6.  用浏览器打开HTML文件。结果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70_pic_center 1]  
7. 可以单独打包packages下的某一个模块

npm run dev reactivity
    # 仿照第5步，新建html文件，script引入
    <script src="../packages/reactivity/dist/reactivity.global.js"></script>

[参考一][Link 1]  
[参考二][Link 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230601/56d19533fb524f8cb59948812e4fec23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70]: /images/20230601/be0ef4534ec84962aabcea4075197383.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NyaWJ1ZzgwODA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230601/8fd18c7ac5144083b74b7e62dd7149ff.png
[Link 1]: https://juejin.im/post/5d99d9a0f265da5b8601264c
[Link 2]: https://juejin.im/post/5d977f47e51d4578453274b3