学习 vue3

一. 迁出Vue3 源码 git clone https://github.com/vuejs/vue.git

二. 安装依赖 yarn --ignore-scripts

三. 生成sourcemap文件 (在package.json) // 调试时看源码

"dev": "node scripts/dev.js --sourcemap",
四. 运行 yarn dev

**项目架构分析**
vue  1.compiler-dom  -> compiler-core // 编译程序
     2.reactivity 
     3.runtime-dom(解决浏览器问题) -> runtime-core //运行时模块基于浏览器
项目是基于rollup.config.js 打包
1.也可以看package.json  "dev": "node **scripts/dev.js** --sourcemap",
scripts/dev.js 也可以查看相关配置
2.查看源码信息的话 也可以在浏览器中打断点createApp上 stpe into 会进入 index.ts,接下来一起来看createApp 都做了拿些事
![图片说明](https://uploadfiles.nowcoder.com/images/20210219/934316139_1613715723995/A2F17328AA20BD4756E6F9D53D57ADD3 "图片标题") 

一. 解析源码 
scripts/dev.js 
// 源码的映射
const sourceMap = args.sourcemap || args.s
// 模块:默认vue
const target = args._.length ? fuzzyMatchTarget(args._)[0] : 'vue'
// umd/cjs/esm/global
const formats = args.formats || args.f
// 包路径
const packagesDir = path.resolve(__dirname, 'packages')
// 传进来的 target 默认 vue
const packageDir = path.resolve(packagesDir, process.env.TARGET)
//默认入口是 packages/vue/src/index.ts
  const entryFile = /runtime$/.test(format) ? `src/runtime.ts` : `src/index.ts`
查看生命周期及方法 在vue.global.js 中查看 13565行 查看

 
四. 查看  createApp
全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务