vue3实战 --- 项目初始化配置

「这是我参与2022首次更文挑战的第13天，活动详情查看：2022首次更文挑战」

tsconfig.json

TypeScript在编译为JavaScript的时候的配置文件

{
  // 编译配置
  "compilerOptions": {
    // 目标代码 --- 编译后的代码使用esnext的语法
    "target": "esnext",
    // 目标代码需要使用的模块化方案 --- 编译后的代码使用esnext模块化
    "module": "esnext",
    // 开启所有的严格模式
    "strict": true,
    // 对jsx进行怎么样的处理 --- preserve表示不对jsx进行处理
    "jsx": "preserve",
    // 辅助的导入功能 ---- 如果用到了polyfill的时候，使用import导入的方式，而不是直接在文件中插入
    "importHelpers": true,
    // 按照node的方式去解析模块
    "moduleResolution": "node",
    // 跳过一些库的类型检测 (如axios等)
    // 1. 提高性能 2. 避免多个库出现同名类型 从而发生冲突
    "skipLibCheck": true,
    // 以下2个选项 一般是一起使用的
    // 目的是使ESM 和 CJS 可以一起混用
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // 要不要生成映射文件(ts -> js)
    "sourceMap": true,
    // 文件路径在解析时, 基本URL（即基于那个路径进行解析，一般设计为当前路径即可）
    "baseUrl": ".",
    // 指定具体要解析使用的类型
    "types": ["webpack-env"],
    // 路径解析(类似于webpack alias) --- 方便ts对我们自己配置的路径别名进行解析
    "paths": {
      // 数组表示可以对应多个，但一般配置一个即可
      "@/*": ["src/*"],
      "components/*": ["src/components/*"]
    },
    // 可以指定在项目中可以使用哪些库的类型
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  
  // 那些文件需要经过ts的解析
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  
  // 那些文件不需要经过TS的解析
  // 例如在一个ts后缀文件中引入了第三方库
  // 默认情况下会对引入的第三方进行类型检测
  // 有的时候，这会损失性能，所以排除node_modules
  // 但是TS依旧会对我们引入的类型，也就是我们所使用到的类型进行类型解析
  "exclude": ["node_modules"]
}

shims-vue.d.ts

默认情况下Typescript只能对TS文件进行解析，是无法解析vue的SFC文件的，所以我们需要手动对SFC文件的类型进行声明

declare module '*.vue' {
  // 引入类型 DefineComponent
  import { DefineComponent } from 'vue'
  
  // 引入component变量的类型为 DefineComponent的实例
  const component: DefineComponent<{}, {}, any>
        
  // 导出默认类型      
  export default component
}

normalize.css

默认情况下，界面会存在一些默认的样式，例如存在8px的margin和padding

为了避免这些默认样式对项目的uI产生影响，我们可以使用normalize.css来清除浏览器的一些默认样式

安装

> npm i normalize.css

main.ts

// 在全局进行使用
import 'normalize.css'