vite 是 vue 3 新出的打構建工具，據說執行速度比webpack  要快不少

• 一個開發伺服器，它基於 原生 ES 模組 提供了 豐富的內建功能，如速度快到驚人的 模組熱更新（HMR）。

• 一套構建指令，它使用 Rollup 打包你的程式碼，並且它是預配置的，可輸出用於生產環境的高度優化過的靜態資源。

vite 的基本使用，建立專案

• 建立專案

• 專案名稱

•  選擇框架（這裡我選擇的vue）

• 選擇變體JS 還是 TS （這裡推薦使用TS,vue3 已經全面適應TS，後期專案更容易維護）

• 專案建立成功，下載依賴，即可執行

• 在main.ts 中 我們可以發現 已經是vue3 專案

　　vue3 中 最大的區別幾位 setup 找個函式，但是每次宣告都需要return 出去變數，很是麻煩，所以，官方提供了 <scriptsetuplang="ts"> 語法糖，直接命名即可

       語法糖 地址 

<template>  // 可以都多個根目錄，vue2 只允許有一個根目錄
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
  {{ aa }}
</template>
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from "./components/HelloWorld.vue";
import { ref } from "vue";
const aa = ref("你好");
</script>

　　如果建立專案時，沒有ts,則需要下載typeScript ，那麼專案可能會報錯，是因為它不能解析 vue檔案 那麼需要進行 ts 初始化

tsc  --init 

　　然後建立 tsconfig.json 檔案 

  檔案中寫入：

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

　　建立 tsconfig.node.json 

{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": ["vite.config.ts"]
}