vue3源码学习-- 调试环境搭建

1、从github克隆项目

vue3项目地址

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

2、安装依赖

// 1、安装 pnpm
npm i -g pnpm
// 2、安装依赖
pnpm i
// 3、修改 package.json配置,开启sourcemap
"dev": "node scripts/dev.js --sourcemap"
--sourcemap 等效于 -s，在这里不等效于-sourcemap（会产出vue.global.prod.js是 Vue 3 的一个全局、生产环境的构建版本）
// 4、运行
npm run dev
pnpm dev

运行结果

3、调试

1. 访问packages/vue/examples/componsition里面html文件调试
2. 通过创建demo,引入packages/vue/dist/vue.global.js文件

<script src="../packages/vue/dist/vue.global.js"></script>

4、其他配置

A、git相关

• Git下载地址
• 免费的Git工具

// 1、下载安装，运行安装包使用默认配置选项，点击下一步直至完成。
// 2、配置基本信息
git config user.name='xxx'
git config user.email='xxx'
git config --list
// 3、使用http链接克隆项目需要输入用户名密码，可以通过window凭证管理（第一次输入后会自动存储）
// 4、使用ssh认证，在任意目录下右键打开Git Bash here
cd ~/.ssh
ssh-keygen -t rsa -C "xxx@xxx.com"
cat id_rsa.pub
// 5、复制结果，在Github中New SSH key

B、遇到的问题

/// 1、淘宝npm镜像源变更
npm cache clean --force
npm set registry https://registry.npmmirror.com
// 使用nrm 管理npm源
npm install nrm -g
nrm ls
//  npm ---------- https://registry.npmjs.org/
//  yarn --------- https://registry.yarnpkg.com/
//  tencent ------ https://mirrors.cloud.tencent.com/npm/
//  cnpm --------- https://r.cnpmjs.org/
//  taobao ------- https://registry.npmmirror.com/
//  npmMirror ---- https://skimdb.npmjs.com/registry/
nrm use taobao
npm get registry
/// 2、变更绝对路径上文件夹名称导致运行项目失败
// 原因pnpm管理的依赖导致，运行pnpm i可以解决
/// 3、下载代码的压缩包，运行npm run build报错
// 原因打包时会读取.git里面分子版本信息导致失败

C、vue3构建版本

1. 运行时版本 (Runtime-only)：不包含模板编译器，不能用于编译模板字符串。这个版本通常用于与构建工具（如 Webpack）一起使用，这些工具在构建过程中会将模板预编译成渲染函数。
2. 完整版本 (Full Build)：这个版本包含模板编译器，可以直接使用字符串形式的模板。这使得它可以在没有构建步骤的情况下直接用在浏览器中，例如通过 CDN 引入 Vue。
3. UMD 构建：UMD 是 Universal Module Definition 的缩写，这种构建版本允许 Vue 在多种环境中使用，包括 AMD、CommonJS 和全局变量。它使得 Vue 可以与各种模块加载器或直接在浏览器中使用。
4. ES Modules 构建：这是针对现代 JavaScript 环境（如原生支持 ES6 Modules 的浏览器）的构建版本。它允许 Vue 作为 ES6 模块导入，提供了更好的树摇（tree-shaking）和代码分割能力。
5. 生产版本和开发版本：无论是运行时版本还是完整版本，Vue 都提供了生产版本（prod）和开发版本（dev）。生产版本经过优化，用于生产环境，以提供最佳的性能和最小的文件大小。开发版本则包含额外的调试信息和警告，有助于在开发过程中发现和解决问题。