Vue3 造轮子之-项目 TypeScript 配置

本项目基于 vite 构建的 vue3.0 项目

一、初始化项目

创建项目有两种方式

官方文档中写的是

npm init vite-app <项目名>
或者
yarn create vite-app <项目名>

而我创建项目使用的是以下的方法

首先，通过命令行全局安装 create-vite-app

npm i -g create-vite-app@1.18.0
或
yarn global add create-vite-app@1.18.0

安装完成后，可以使用 create-vite-app 或者 cva 来创建项目

项目创建完成后 cd 进入目录，先执行 install 安装依赖

之后就可以 run dev 在本地运行项目了

打开链接看到下图说明项目已经成功运行了

二、声明 vue 文件

首先我们将主入口文件 main.js 的后缀名修改为ts

然后编辑器会有报错提示，因为 TypeScript 只能理解 ts 的文件，此时我们引入的 .vue 文件在 ts 中无法解析

解决此问题，需要新增一个 xx.d.ts 的声明文件

内容写入

// 增加对vue文件的声明
declare module "*.vue" {
  import {ComponentOptions} from 'vue'
  const componentOptions:ComponentOptions
  export default componentOptions
}

增加的 d.ts 类型为文件时告诉 ts 如何理解 .vue 的文件