VUE3.0 學習筆記- vite的使用，與typescript 的配置

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"]
}