一、安裝最新版：

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

按照操作提示新建一個模板項目。

運行 npx vite --help獲取命令參數(shù)列表，如下

--host [host] [string] 指定主機名
--port <port> [number] 指定端口
--https [boolean] 使用 TLS + HTTP/2
--open [path] [boolean | string] 啟動時打開瀏覽器
--cors [boolean] 啟用 CORS
--strictPort [boolean] 如果指定的端口已被使用，則退出
--force [boolean] 強制優(yōu)化器忽略緩存并重新捆綁
-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] 設置環(huán)境模式
-h, --help 顯示此消息
-v, --version 顯示版本號

新建的項目目錄結構大概如下這樣：

image.png

和用 vue-cli 初始化的目錄有兩處不同：

index.html 入口文件被移到了根目錄下。官方解釋是：在開發(fā)期間 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 的版本已經(jīng)是最新的 Vue3了。而開發(fā)時依賴也從 vue-cli/webpack 系列切換到了 vite 系列。
注意：vite 配置文件默認是在跟目錄的vite.config.js,我們也可以自定義config,如上面配置的vite build --config vite2.config.js我自己配置了一份自定義名稱的vite2.config.js

啟動項目 npm run dev

冷啟動，速度是真的快到飛起。這是因為在本地開發(fā)時，Vite 使用了 原生 ES 模塊，所以期間沒有涉及模塊編譯過程，節(jié)約了不少時間。f12可以看到代碼都是沒有經(jīng)過編譯的

image.png

html 中引入了 main.js，也就是我們這個項目的入口文件

image.png

從上面這張圖可以看出，代碼還是原生的 import，沒有經(jīng)過任何轉譯。