曾经大圣问过尤雨溪,怎么学习新技术,尤大微微一笑,说:读源码。读源码不仅能知其然,还能知其所以然,还能知道源码种引申出来的更多技术。今天我开始来阅读vue3源码,把读到的,理解到的东西记录下来,希望能坚持下去。

新建Vue3项目

Vue3使用的构建工具是Vite,官方给出的三种创建新应用的方式分别是:

1
2
3
npm init vite@latest
yarn create vite@latest
pnpm dlx vite@latest

npm init vite@latest 将会将用实际上调用的命令是 npx create-vite@latest;

npx命令会检查npm全局和$PATH下是否安装create-vite的最新版本,如果安装,则执行create-vite命令,

否则自动下载create-vite到临时目录,并执行create-vite命令,然后删除安装包。

如下图,将会执行https://github.com/vitejs/vite/tree/main/packages/create-vite/index.js 文件。

1
2
3
4
5
6
7
8
{
"name": "create-vite",
"bin": {
"create-vite": "index.js",
"cva": "index.js"
}
...
}

npx 是npm从5.2版本开始就新增的命令,目前npm的最新版本是7.x,7.x版本又新增了一个 npm exec 命令,其功能和npx很相似,当在7.x版本上运行 npm init 时,实际上运行的是 npm exec 命令。

npm init 还有个别名,叫 npm create;

yarn createpnpm dlx 原理和npm init大同小异。

值得一提的是pnpm是一个新兴的包管理工具,他使用硬链接和非扁平化的包管理方式,解决了npm和yarn安装慢,占内存多,以及源代码可直接访问没有申明依赖的包等问题。

运行Vue3项目

浏览器打开,看到network请求的如下:

upload successful

首先看到第一个请求的内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module" src="/@vite/client"></script>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

其中两个script标签的type属性都是module,也就是说vue3默认情况下是基于原生ES module的。

什么是es module, 有多少种module

查看caniusemodule的支持情况如下:

upload successful

所以vue3默认情况下对IE浏览器全都不支持,而能在xp系统上跑的最高版本的chrome 49也不能得到支持。

参考文档

npm

npx 使用教程