vue3.x 源码学习 (vuejs/core)
2022-03-06 本文已影响0人
蓝海00
一、在git上下载项目
第一种方式：直接终端下载
git clone https://github.com/vuejs/core.git
第二种方式：Download ZIP
注意点：一般情况下会选择稳定的包，切换分支至稳定的版本，最好不要选择带beta的版本
image.png
选择第二种方式后打开项目终端继续操作
git initgit 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
npm cache clean -f清除npm缓存sudo npm install -g nsudo n 16.5.0orsudo 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>
-
直接在浏览器中运行即可
