Vite + Vue3 初体验 —— Vite 篇
上手
直接运行 npm create vite@latest 命令即可。
npm create 是 npm init 的别名，如果不带上 <initializer>，他们的作用都是生成 package.json 文件。
如果他们的后面带上一个 <initializer>：（这里以 npm create initializer 举例）
npm create <initializer>那么它的意图与执行下面的脚本的是一样的：
npx create-<initializer>也等同于
npm install create-<initializer> -g
create-<initializer>输入命令后，需要添加项目名称和技术栈，可以看到可供选择的技术栈有这么几种（如下图） 
vite 支持的框架有 6 种：
- vanilla：Vanilla JS 是一个快速、轻量级、跨平台的 JavaScript 框架。Vanilla JS 是世界上最轻量的 JavaScript 框架（没有之一）其实这玩意就是原生 JS。
- vue/react：这两个应该不用过多介绍了吧。
- preact：React 的轻量级替代方案。
- lit：Lit 是一个简单的库，用于构建快速、轻量级的 Web 组件。（看了一眼语法，感觉还挺好玩的。）
- svelte：一个不使用 Virtual DOM 的库 —— 真酷。这个库的作者和 Rollup 的作者是同一人。
- solid：不知道
- Qwik：不知道
- Others：其它
这里我选了 vue + ts 进行创建。
现在来看看，这个新建的项目目录长啥样吧。（如下图）
和用 vue-cli 初始化的目录有两处不同：
- index.html 入口文件被移到了根目录下。官方解释是：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。
- vite.config.ts 替代了 vue.config.js，作为 vite 项目的配置文件。
接下来，我们看看 package.json 的内容吧。（如下）
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.4"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.2.3",
"typescript": "^5.0.2",
"vite": "^4.4.0",
"vue-tsc": "^1.8.3"
}
}从上面可以看出，使用 Vite 初始化的 Vue 项目，Vue 的版本已经是最新的 Vue3 了。而开发时依赖也从 vue-cli/webpack 系列切换到了 vite 系列。
启动项目
在体验 Vue3 新语法之前，先把项目启动，看看效果吧。
在使用 npm i 安装完依赖后，使用 npm run dev 即可启动 本地开发 模式了。
刚运行项目，启动速度着实让我吃了一惊。
这比 Vue2 初始化的项目启动也快太多了，刚一眨眼项目就已经启动了。
当然，我们从它的介绍可以得知，这是因为在本地开发时，Vite 使用了 原生 ES 模块，所以期间没有涉及模块编译过程，节约了不少时间。
查看本地运行的模块
我们打开控制台，先看看我们的 html 文件。（如下图）
从上面可以看出，html 中引入了 main.ts，也就是我们这个项目的入口文件。（如下图）
从上面这张图可以看出，代码还是原生的 import，没有经过任何转译。
但是，在这里我看到请求的资源，有 ts 还有 vue。
难道谷歌浏览器已经支持直接加载 ts 和 vue 文件了吗？其实并不是，这里的奥妙之处来自于文件的响应头 —— Content-Type，这决定了浏览器以什么样的方式处理该文件。（如下图）
App.vue 的 Contetn-Type 也是 application/javascript。
如果你点开其他 .vue 文件可以看出，.vue 文件还是经过编译，成为了可供浏览器识别的 js 类型，但模块还是使用了谷歌浏览器支持的 原生 ES 模块。（如下图）
