本着学习vue3源码的想法，在本地拉取了vue3的源码并且进行了编译，并且使用自己编译的版本替换了npm中的vue，目的是方便下断点查看运行情况。 vue3的源码拉下来查看package.json,发现有build命令，于是执行npm install && npm run build，安装依赖后自动构建，其实vue的源码中是拆分了子工程的，这里的build脚本会自动为每个子工程完成构建。。 vue3的源码全都在packages目录里面，在packages目录里面可以看到按组件功能拆了很多个工程。
点开packages/vue(这是最终暴露给用户的入口，其他的包会都打到@vue里面去)
然而打开index.js之后，发现里面只有这么几行
'use strict'
if (process.env.NODE_ENV === 'production')
{ module.exports = require('./dist/vue.cjs.prod.js') }
else
{ module.exports = require('./dist/vue.cjs.js') }
注意这dist目录是要在源码根目录执行npm run build之后才会生成的，build脚本自动帮每个子工程完成构建。构建结束后打开dist文件夹，查看vue.cjs.js的源码。 开头是这么三行。说实话我困扰了很久这@vue是什么情况，甚至特意去查了查@这符号在引用包的时候是不是有什么特殊含义，是不是代表了什么特定的路径之类的。
var compilerDom = require('@vue/compiler-dom'); var runtimeDom = require('@vue/runtime-dom'); var shared = require('@vue/shared');
然而最后我才晓得@vue也是一个包，在npm install vue的时候自动捆绑下载了的……@vue这个包，包含了源码中除了入口以外的所有子工程
于是，机智的我就把编译后的整个packages里面的内容，都拷贝到了我的项目(shali-ui)的lib/vue3目录下，不再使用npm下载的vue，而是直接使用这里面的vue，这样我遇到问题的时候，可以直接对源码断点调试。
这里因为vue是放在自己的目录下，不再存在@vue这个文件夹了，需要使用webpack的resolve功能，将@vue设置为lib/vue3的别名，这样代码去找@vue的时候，就会自动找到lib/vue3里面去
这么一来就完成了vue的更换，接下来可以开始愉快的开发了
