从0到1搭架子，vue3+ts+vite

1 先创建一个文件夹

mkdir dajiazi

2 在vscode中打开这个文件夹dajiazi

cd dajiaze
code .

3 用yarn 初始化 包描述文件

yarn init -y

4 用yarn 安装vite的开发版本

yarn add vite -D

 vite安装成功后 它引入了下图中的这些文件

 

5 用yarn 安装typescript 的开发版本

yarn add typescript -D

6 创建ts.config.json配置文件，包含所有的配置项

yarn tsc -init

7 在vite.config.ts配置文件中引入defineConfig函数，用来提示ts的数据类型

import {defineConfig} from 'vite'

export default defineConfig({})

8 defineConfig函数最终会返回一个对象

9 在根目录创建一个vite.dev.config.ts文件，开发环境用这个文件

10 在vite.dev.config.ts文件中，从vite文件中引入defineConfig函数，并且默认导出这个函数，这个函数调用时最终会返回一个配置对象

11 在根目录创建一个vite.prod.config.ts文件，生产环境用这个文件

11 在package.json包描述文件里添加scripts字段，用来执行dev，build,preview，开发，生产，预览的命令

12 在项目的根目录中创建一个index.html文件，这个文件是入口文件，依赖预先构建从这个文件开始

13 在项目根目录中创建一个.env.development文件，这个文件是开发环境要用到的一些变量

14 在项目根目录创建一个.env.production文件，这个文件是生产环境要用到的一些变量

15 在这2个环境变量文件中，你要声明变量，必须用VITE_开头 

16 在package.json包描述文件中，在scripts字段的build字段。设置命令vue-tsc --noEmit && vite build 这行命令分2个部分，第1部分是vue-tsc --noEmit命令，这个命令是在你输入yarn build时vue-tsc编译器会进行类型检查，不会创建任何文件。当vue-tsc --noEmit这个命令执行后不报错，执行成功了，就会继续执行&&后面的命令，也就是vite build进行打包。如果vue-tsc --noEmit报错了，执行失败了，那么&&后面的vite build命令就不会执行。

17 在根目录新创建一个src文件夹，在文件夹里新创建一个env.d.ts类型声明文件，这个类型声明文件是给我们在.env.development文件中自己创建的变量添加数据类型，这样才有ts的提示

// 在.env.development和.env.production文件中自己创建的VITE_开头的变量，要让自己创建的变量有ts提示，就要写这个env.d.ts类型声明文件
// 导入vite文件里的client这个类型声明文件，目的是让ts能够识别vite的全局变量和全局函数，如import.meta.env
///<reference types="vite/client" />

18 继续在env.d.ts类型声明文件中，写interface接口

// 在.env.development和.env.production文件中自己创建的VITE_开头的变量，要让自己创建的变量有ts提示，就要写这个env.d.ts类型声明文件
// 导入vite文件里的client这个类型声明文件，目的是让ts能够识别vite的全局变量和全局函数，如import.meta.env
///<reference types="vite/client" />



interface ImportMetaEnv{
    readonly VITE_TITLE:string
}

// import.meta.env
interface ImportMeta{
    readonly env:ImportMetaEnv
}

这2个接口，给import.meta这个对象添加类型声明，给import.meta.env这个对象添加类型声明，这样就会有ts提示了。

19 在vite.prod.config.ts文件中添加依赖预构建的配置，将要引入的依赖文件的模块化统一转成es模块化。然后将内部有很多个模块文件的依赖打包成1个模块文件

// 生产环境的配置
import { defineConfig } from "vite";

export default defineConfig({
    optimizeDeps:{
        exclude:[]
    }
    
})