Vue3学习--正确调试vue3源码_vue3源码下载

作者：小小林熬夜学编程 | 2024-06-10 15:03:06

踩

vue3源码下载

第一步：github 下载源码

下载地址：https://github.com/vuejs/core

第二步：pnpm 安装依赖

vue3 采用 pnpm 进行包管理

全局下载 pnpm

npm install -g pnpm

安装包依赖

pnpm install

第三步：启动

启动项目

pnpm dev

使用 pnpm dev 启动项目后，会在 vue 目录下生成一个 dist 目录，目录下的文件就是 vue3 的源码了。注意：这是经过压缩后的源码

第四步：具体调试

创建 demo.html 文件，并且引入 vue.global.js


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3学习</title>
</head>
 
<body>
    <div id="app"></div>
</body>
 
</html>
<script src="../../dist/vue.global.js"></script>
<script>
    debugger;
    Vue.createApp({
        template: `<h2>Hello,Vue3</h2>`
    }).mount('#app')
</script>

此时，我们已经可以在浏览器上进行调试了，但目前调试的代码是压缩后的，想要调试具体源码，就要用到souecemap了！

第五步：使用 sourcemap

方式一：

在package.json文件里面，增加 --sourcemap

方式二：

修改 rollup.config.js 文件

修改 tsconfig.json 文件

任意一种方式修改完毕后，重新 pnpm dev 启动服务后，就可以调式真正的 vue3 源码了

第六步：调试

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/699237