vite初体验

一、安装最新版：

使用 NPM:
$ npm create vite@latest
使用 Yarn:
$ yarn create vite
使用 PNPM:
$ pnpm create vite

按照操作提示新建一个模板项目。

运行 npx vite --help获取命令参数列表，如下

--host [host] [string] 指定主机名
--port <port> [number] 指定端口
--https [boolean] 使用 TLS + HTTP/2
--open [path] [boolean | string] 启动时打开浏览器
--cors [boolean] 启用 CORS
--strictPort [boolean] 如果指定的端口已被使用，则退出
--force [boolean] 强制优化器忽略缓存并重新捆绑
-c, --config <file> [string] 使用指定的配置文件
-r, --root <path> [string] 使用指定的根目录
--base <path> [string] 公共基本路径（默认：/）
-l, --logLevel <level> [string]info | warn | error | silent
--clearScreen [boolean] 记录时允许/禁用清除屏幕
-d, --debug [feat] [string | boolean]显示调试日志
-f, --filter <filter> [string] 过滤调试日志
-m, --mode <mode> [string] 设置环境模式
-h, --help 显示此消息
-v, --version 显示版本号

新建的项目目录结构大概如下这样：

image.png

和用 vue-cli 初始化的目录有两处不同：

index.html 入口文件被移到了根目录下。官方解释是：在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。
vite.config.js 替代了 vue.config.js，作为 vite 项目的配置文件。

{
  "name": "vite-test",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "build:vite2": "vite build --config vite2.config.js"
    "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"
  }
}

从上面可以看出，使用 Vite初始化的 Vue项目，Vue 的版本已经是最新的 Vue3了。而开发时依赖也从 vue-cli/webpack 系列切换到了 vite 系列。
注意：vite 配置文件默认是在跟目录的vite.config.js,我们也可以自定义config,如上面配置的vite build --config vite2.config.js我自己配置了一份自定义名称的vite2.config.js

启动项目 npm run dev

冷启动，速度是真的快到飞起。这是因为在本地开发时，Vite 使用了 原生 ES 模块，所以期间没有涉及模块编译过程，节约了不少时间。f12可以看到代码都是没有经过编译的

image.png

html 中引入了 main.js，也就是我们这个项目的入口文件

image.png

从上面这张图可以看出，代码还是原生的 import，没有经过任何转译。