Vite + Vue3 + TypeScript 架构搭建

• 🚧 初始化方式一 vite

  • npm init @vitejs/app
    • project name： 项目名称
    • select a framework: vue
    • select a variant: vue-ts
  • 另：npm init @vitejs/app 项目名称 --template vue-ts 暂未尝试，等同上述初始化过程
  • npm install

• ⚡ 运行

  • npm run dev

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

  • 设置@指向src目录

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

    • 编辑器此时错误提示 path 模块找不到
      @types/node -> npm i @types/node -D | npm install @types/node --save-dev
      • 原因分析：path模块是node.js的内置功能，node.js本身是不支持TypeScript的，因此直接在TypeScript项目内使用是行不通的。
      • 解决方案：安装@types/node
    • tsconfig.json:15:8: warning: Non-relative path "src/*" is not allowed when "baseUrl" is not set (did you forget a leading "./"?)

      • 路径设置好后不影响项目启用，但vscode编译时会提示找不到相应文件

      • 原因分析：除vite.config.ts中进行设置外，TS+vue3需额外在tsconfig.json文件内添加如下配置，方可兼容vscode编译

      • 解决方案：

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

• icon图标显示错误-出现白色空块

  • 原因分析：iconfont未添加family类名
  • 解决方案：class="xinyufont xinyu-xingbiao" 加上xinyufont类名即可。

• 使用el-icon

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

技术研读、相关资料

1. TypeScript官方文档
   TypeScript属于强类型语言，主要优势在于静态类型检查，包括以下几点：

• 静态类型检查
• IDE智能提示
• 代码重构
• 可读性
  延伸：
  强类型语言：是一种强制类型定义的语言，一旦某个变量被定义类型，如果不经过强制转换，则它永远是该类型。
  弱类型语言：定义一个变量的数据类型后 ，其数据类型可根据环境变化自动进行转换，不需要经过显性强制转换。
  二者区别：区分二者的依据是是否会隐形的类型转换，强类型语言在速度上较弱类型语言稍微逊色一些，但是强类型语言的严谨性可以避免许多不必要的错误

搭建流程

常用的markdown语法

1. 文字超链：链接名称。
   示例： TypeScript官方文档
2. 标题设置：使用#，一个#代表一级，最多到六级。
   示例：

一级标题

二级标题

三级标题

...

六级标题

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