下载源码
git clone git@github.com:vuejs/vue-next.git
cd vue-next
pnpm i
git clone git@github.com:vuejs/vue-next.git
cd vue-next
pnpm i
最新版本的 vue3，必须使用 pnpm 安装依赖，不熟悉 pnpm 的，可以看看官方文档或者这篇文章
构建源码
npm run dev --sourcemap
npm run dev --sourcemap
构建 vue 源码，构建产物会为 packages\vue\dist\vue.global.js 。
由于默认的 vue 打包构建，是不会生成 sourcemap 的，因此我们需要加上 --sourcemap，生成 sourcemap，以方便后面调试时，chrome 能够根据 sourcemap，将构建压缩过的代码，还原成源码。
创建简单的 demo 项目
cd packages
mkdir vue-demo
cd packages
mkdir vue-demo
在 vue-demo 中，创建以下 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const App = {
template:`
<p>{{name}}</p>
`,
setup() {
const name = Vue.ref("vue setup")
return {
name
}
}
}
let vm = Vue.createApp(App).mount("#app");
</script>
</body>
</html>
在 index.html 中，使用 script 直接引入刚刚构建好的 vue.global.js 文件。
然后我们就可以通过 window.Vue 去访问到 Vue 对象了
浏览器预览结果如下：
接下来就可以修改 index.html，调试代码了~
如果我们想使用 vite 的项目，作为 demo，可以继续往下看
创建 vite 的项目
在 packages 文件夹下创建 vite 项目，直接通过脚手架创建
cd packages
pnpm create vite
cd vite-project
pnpm i
创建好项目后，我们进入目录，直接 pnpm i 即可，由于是 monorepo 项目，pnpm 会将本地 vue 安装到项目中
然后我们直接运行 vite 项目的 dev 命令：
cd vite-project
npm run dev
会发现有如下报错：
报错地方如下：
try {
compiler = require("vue/compiler-sfc");
} catch (e) {
try {
compiler = require("@vue/compiler-sfc");
} catch (e2) {
throw new Error(`@vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.`);
}
}
这是因为加载 vue/compiler-sfc 或 @vue/compiler-sfc 失败导致的。
为什么会加载失败？原因是，我们并没有对 vue 等一系列的包进行构建.
下面是其中一个包的 package.json
// packages/vue/package.json
{
"name": "vue",
"version": "3.2.23",
"description": "The progressive JavaScript framework for buiding modern web UI.",
"main": "index.js",
"module": "dist/vue.runtime.esm-bundler.js",
"types": "dist/vue.d.ts",
"unpkg": "dist/vue.global.js"
}
main 是node require 时引入会使用到的文件，module 是 es import 引入时会使用到的文件，这两个文件都没有，因为我们并没有构建，没有 dist 目录
因此，我们需要运行一遍构建，在这之前，我们需要把 vite-project 的 package.json 设为 private，这样 vue 才不会把该项目作为 vue 的包进行构建
在 package.json 加入 "private": "true"
// packages/vite-project/package.json
{
"name": "vite-project",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.25"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"typescript": "^4.4.4",
"vite": "^2.7.2",
"vue-tsc": "^0.29.8"
},
"private": "true"
}
修改根目录 package.json
{
"build": "node scripts/build.js --sourcemap",
}
执行构建，在根目录运行：
pnpm run build
该命令会对 packages 下的所有包（private 包除外）进行构建，并输出各种格式的产物（cjs、esm等等）
我们需要的是 cjs 和 esm，cjs 是 vite 启动 server 时需要的引入的，而 esm 是 vite 编译时需要使用的
此时在执行以下命令，就可以将 vite demo 跑起来了：
cd vite-project
npm run dev
——————————————————————————————————————————————————
vite v2.7.7 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 1231ms.
如果需要修改源码，我们无需每次修改后，重新build，我们只需要对修改的包，重新进行构建即可。
我们可以用 dev 脚本，因为它可以 watch 监听修改，并自动重新构建。
假如需要修改 reactivity 这个包，只需要运行一下这个命令。
{
"dev": "node scripts/dev.js --sourcemap -f esm-bundler reactivity",
}
注意输出格式要用 esm-bundler，因为 module 引入的是 reactivity.esm-bundler.js，该文件对应的格式，是 esm-bundler
{
"name": "@vue/reactivity",
"module": "dist/reactivity.esm-bundler.js",
}
ok，这样又可以愉快的写代码了
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!