vue3.x 源码学习 (vuejs/core)

一、在git上下载项目

git链接

第一种方式:直接终端下载

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

第二种方式:Download ZIP


注意点:一般情况下会选择稳定的包,切换分支至稳定的版本,最好不要选择带beta的版本
image.png

选择第二种方式后打开项目终端继续操作
  • git init
  • git add .
  • git commit -m "vue3项目"
    注意项目里使用了pnpm 所以要先安装pnpm
  • sudo npm install -g pnpm
  • pnpm install
    需要等待一会
  • 修改一些配置 使得debugger的时候会跳转进源目录下的文件中方便调试

package.json
"scripts": {
"dev": "node scripts/dev.js --sourcemap",
}

  • 这里可以先查一下自己的node版本 如果低于‘v16.5.0’ 会在 pnpm run dev 的时候会报错

第一个方案 升级node版本 >= v16.5.0

  1. npm cache clean -f 清除npm缓存
  2. sudo npm install -g n
  3. sudo n 16.5.0 or sudo n stable

第二个方案按照报错提示直接修改scripts>dev.js中的内容
pkg.buildOptions?.name 修改成 pkg.buildOptions.name

  • 运行项目 pnpm run dev

二、通过packages/vue/dist/vue.global.js调试运行代码

  • packages/vue/examples 中新增一个目录(name随便),在里面新增一个index.html
<!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>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="../../dist/vue.global.js"></script>
    <script>
        debugger;
        Vue.createApp({
            template:`<h1>444</h1>`
        }).mount("#app")
    </script>
</body>
</html>
  • 直接在浏览器中运行即可


本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):