Vite + Vue3 + TypeScript 架構(gòu)搭建

• ?? 初始化方式一 vite

  • npm init @vitejs/app
    • project name： 項(xiàng)目名稱
    • select a framework: vue
    • select a variant: vue-ts
  • 另：npm init @vitejs/app 項(xiàng)目名稱 --template vue-ts 暫未嘗試，等同上述初始化過(guò)程
  • npm install

• ? 運(yùn)行

  • npm run dev

• ?? 修改Vite配置-vite.config.ts

  • 設(shè)置@指向src目錄

      import { resolve } from 'path'  
      export default defineConfig({  
          resolve: {  
              alias: {  
                  "@": resolve(__dirname, "src"), // 設(shè)置 `@` 指向 `src` 目錄  
              },  
          }  
      })  
    

    • 編輯器此時(shí)錯(cuò)誤提示 path 模塊找不到
      @types/node -> npm i @types/node -D | npm install @types/node --save-dev
      • 原因分析：path模塊是node.js的內(nèi)置功能，node.js本身是不支持TypeScript的，因此直接在TypeScript項(xiàng)目?jī)?nèi)使用是行不通的。
      • 解決方案：安裝@types/node
    • tsconfig.json:15:8: warning: Non-relative path "src/*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

      • 路徑設(shè)置好后不影響項(xiàng)目啟用，但vscode編譯時(shí)會(huì)提示找不到相應(yīng)文件

      • 原因分析：除vite.config.ts中進(jìn)行設(shè)置外，TS+vue3需額外在tsconfig.json文件內(nèi)添加如下配置，方可兼容vscode編譯

      • 解決方案：

        "baseUrl": ".",
        "paths": {
        "@/": [
        "src/"
        ]
        }

• icon圖標(biāo)顯示錯(cuò)誤-出現(xiàn)白色空塊

  • 原因分析：iconfont未添加family類名
  • 解決方案：class="xinyufont xinyu-xingbiao" 加上x(chóng)inyufont類名即可。

• 使用el-icon

  • npm install @element-plus/icons
  • main.ts內(nèi)
    import * as ElIcons from '@element-plus/icons'
for (const name in ElIcons){ app.component(name,(ElIcons as any)[name]) }

技術(shù)研讀、相關(guān)資料

1. TypeScript官方文檔
   TypeScript屬于強(qiáng)類型語(yǔ)言，主要優(yōu)勢(shì)在于靜態(tài)類型檢查，包括以下幾點(diǎn)：

• 靜態(tài)類型檢查
• IDE智能提示
• 代碼重構(gòu)
• 可讀性
  延伸：
  強(qiáng)類型語(yǔ)言：是一種強(qiáng)制類型定義的語(yǔ)言，一旦某個(gè)變量被定義類型，如果不經(jīng)過(guò)強(qiáng)制轉(zhuǎn)換，則它永遠(yuǎn)是該類型。
  弱類型語(yǔ)言：定義一個(gè)變量的數(shù)據(jù)類型后 ，其數(shù)據(jù)類型可根據(jù)環(huán)境變化自動(dòng)進(jìn)行轉(zhuǎn)換，不需要經(jīng)過(guò)顯性強(qiáng)制轉(zhuǎn)換。
  二者區(qū)別：區(qū)分二者的依據(jù)是是否會(huì)隱形的類型轉(zhuǎn)換，強(qiáng)類型語(yǔ)言在速度上較弱類型語(yǔ)言稍微遜色一些，但是強(qiáng)類型語(yǔ)言的嚴(yán)謹(jǐn)性可以避免許多不必要的錯(cuò)誤

搭建流程

常用的markdown語(yǔ)法

1. 文字超鏈：鏈接名稱。
   示例： TypeScript官方文檔
2. 標(biāo)題設(shè)置：使用#，一個(gè)#代表一級(jí)，最多到六級(jí)。
   示例：

一級(jí)標(biāo)題

二級(jí)標(biāo)題

三級(jí)標(biāo)題

...

六級(jí)標(biāo)題

3. 文字斜體：將所需處理文字兩端使用“*”或者“_”包裹。
   示例： 斜體 斜體

Hold The Faith . Forever !
We can find a way .
Someday .
A path to a new world
And maybe
Maybe its just the begnning after all

author - Foraging Pawn