vuejs3.0 从入门到精通——基于 Vite 搭建 Vue3 项目
基于 Vite 搭建 Vue3 项目
一、为什么选 Vite
https://www.vitejs.net/
在浏览器支持 ES 模块之前，JavaScript 并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。
时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。
然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。我们开始遇到性能瓶颈 —— 使用 JavaScript 开发的工具通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用 HMR，文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。
参考 Vite 官网给的回答：https://www.vitejs.net/guide/why.html，简单的来说见下图：
| 工具名称 | 开发环境(Dev) | Dev 启动时长(20个组件) | 热更新 (HMR) | 生产环境（Production） | Build 时长 |
|---|---|---|---|---|---|
| Webpack | 会先打包生成 bundle，再启动开发服务器 | 3124ms | HMR 时需要把改动模块及相关依赖全部编译 | 打包生成bundle | 9125ms |
| Vite | 先启动开发服务器，利用新一代浏览器的 ESM 能力，无需打包，直接请求所需模块并实时编译 | 353ms | HMR时只需让浏览器重新请求该模块，同时利用浏览器的缓存（源码模块协商缓存，依赖模块强缓存）来优化请求；使得无论应用大小如何，HMR 始终能保持快速更新。 | 通过成熟的 rollup 打包工具来生成 bundle | 4471ms |
Webpack在启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。（如下图基于 bundle 的开发服务流程图）
Vite在开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时还会使用 esbuild 来进行预构建；（如下图基于原生 ESM 的开发服务流程图）
二、概览
https://www.vitejs.net/guide/
Vite（法语意为 "快速的"，发音/vit/，发音同
"veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
-
-
一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
-
一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
-
Vite 意在提供开箱即用的配置，同时它的插件API和JavaScriptAPI带来了高度的可扩展性，并有完整的类型支持。
三、搭建第一个 Vite 项目
兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。
安装 vite：
npm install vite@latest
使用 NPM:
npm init vite@latest
使用 Yarn:
yarn create vite
使用 PNPM:
pnpm create vite
然后按照提示操作即可！
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
# npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, 需要额外的双横线： npm init vite@latest my-vue-app -- --template vue # yarn yarn create vite my-vue-app --template vue # pnpm pnpm create vite my-vue-app -- --template vue
查看create-vite以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。
四、创建 Vue3 项目
# npm init vite@latest
√ Project name: ... vite-project
√ Select a framework: » Vue
√ Select a variant: » TypeScript
Scaffolding project in D:\worker-vue3\vite-project...
Done. Now run:
cd vite-project
npm install
npm run dev
执行 npm install 和 npm run dev后
VITE v4.5.0 ready in 299 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help
五、社区模版
create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的社区维护模板，里面包含各种工具和不同框架的模板。你可以用如degit之类的工具，使用社区模版来搭建项目。
npx degit user/project my-project cd my-project npm install npm run dev
如果该项目使用main作为默认分支,
需要在项目名后添加#main。
npx degit user/project#main my-project
六、index.html 与项目根目录
你可能已经注意到，在一个 Vite
项目中，index.html在项目最外层而不是在public文件夹内。这是有意而为之的：在开发期间Vite是一个服务器，而index.html是该
Vite 项目的入口文件。
Vite 将index.html视为源码和模块图的一部分。Vite
解析<script type="module" src="...">，这个标签指向你的
JavaScript 源码。甚至内联引入 JavaScript 的<script type="module">和引用 CSS 的<link href>也能利用 Vite
特有的功能被解析。另外，index.html中的 URL
将被自动转换，因此不再需要%PUBLIC_URL%占位符了。
与静态 HTTP 服务器类似，Vite
也有“根目录”的概念，即服务文件的位置，在接下来的文档中你将看到它会以<root>代称。源码中的绝对URL路径将以项目的“根”作为基础来解析，因此你可以像在普通的静态文件服务器上一样编写代码（并且功能更强大！）。Vite
还能够处理依赖关系，解析处于根目录外的文件位置，这使得它即使在基于 monorepo
的方案中也十分有用。
Vite 也支持多个.html作入口点的多页面应用模式。
七、指定替代根目录
vite以当前工作目录作为根目录启动开发服务器。你也可以通过vite serve some/sub/dir来指定一个替代的根目录。
八、命令行界面
在安装了Vite的项目中，可以在npm
scripts中使用vite可执行文件，或者直接使用npx vite运行它。下面是通过脚手架创建的Vite项目中默认的npm scripts：
{
"scripts": {
"dev": "vite", // 启动开发服务器
"build": "vite build", // 为生产环境构建产物
"serve": "vite preview" // 本地预览生产构建产物
}
}
可以指定额外的命令行选项，如--port或--https。运行npx vite --help获得完整的命令行选项列表。
九、使用未发布的功能
如果你迫不及待想要体验最新的功能，可以自行克隆 https://github.com/vitejs/vite 到本地机器上然后自行将其链接（将需要 https://pnpm.io/）：
git clone https://github.com/vitejs/vite.git cd vite pnpm install cd packages/vite pnpm run build pnpm link # you can use your preferred package manager for this step
然后，回到你的Vite项目并运行pnpm link vite（或者使用全局的软链来链接vite）。重新启动开发服务器来体验新功能吧！
