学习vue3源码调试过程解析

aiyamaya是锤锤呀

已于 2024-07-24 11:05:47 修改

阅读量369

点赞数 11

文章标签：学习

于 2024-07-11 15:23:23 首次发布

本文链接：https://blog.csdn.net/qq_38942507/article/details/140352734

版权

怎么阅读vue3源码
1.下载vue3的项目

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

下载之后项目名是core。

2.运行项目
yarn一下，发现需要安装pnpm，那就pnpm install -g。
在这里插入图片描述

然后pnpm install

pnpm install

打开package.json，看运行的命令，这里我们用dev模式。
运行项目

pnpm run dev

这时候可以看一下目录，packages/vue/dist里有vue.global.js代表已经运行起来了。这个目录下有2个文件，vue.global.js有map文件，代表已经打开了sourcemap模式，可以看到scripts/dev.js里的sourcemap为true
在这里插入图片描述
3.调试vue代码，找到运行vue的入口文件
可以在packages/example下创建一个目录demo，并创建demo-1.html文件，里面写基础的vue3代码。
代码可以这样写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../dist/vue.global.js"></script>
</head>
<body>
    <div id="app">{{title}}</div>
    <script>
        const app = Vue.createApp({
            data: () => ({
                title: "hello world"
            })
        })
        app.mount("#app");
    </script>
</body>
</html>