1.Vue3+Vite+TypeScript 概述
1.1 vue3
1.1.1 Vue3 概述
Vue.js是一种前端JavaScript框架，可以用于构建交互式Web页面和单页应用程序。Vue.js 3是Vue.js框架的最新版本，于2020年9月正式发布。Vue.js 3相对于Vue.js 2来说有以下的变化和改进：
1. 更好的性能：Vue.js3在性能上进行了优化，通过优化响应式系统，可以提高应用程序的性能。
2. 更好的TypeScript支持：Vue.js 3对TypeScript的支持更好，并且内置了TypeScript支持。
3. 更好的开发人员体验: Vue.js 3 对于模板编译器进行重大升级，所有原始模板现在都被编译成函数，这意味着编译时会更快，运行时将更少依赖于Vue.js本身。
4. 更好的组件API：Vue.js 3引入了Composition API，它可以帮助开发者更轻松、更灵活地编写组件代码。
5. 更好的Tree-Shaking支持：Vue.js 3 支持了更好的树摇功能。它允许您仅包含应用程序中需要的代码，从而大大减少了加载时间和应用程序的大小。
1.1.2 vue3的现状与发展趋势
目前，Vue 3 已经成为前端开发中非常流行的框架之一。很多公司和开发者都在使用 Vue 3 开发他们的项目。以下是 Vue 3 的一些发展趋势：
1.更好的 TypeScript 支持：Vue 3 引入了很多新的 TypeScript 类型定义，提供了更好的类型检查和自动补全功能。这使得开发者可以更加轻松地使用 TypeScript 编写 Vue 应用。
2.Composition API 的普及：Composition API 是 Vue 3 中引入的一种新的组件 API，可以帮助开发者更好地组织和重用组件逻辑。随着越来越多的开发者开始使用 Composition API，它将成为 Vue 3 开发中的一个重要组成部分。
3.更快的性能和更小的包体积：Vue 3 引入了很多性能优化，包括更快的渲染速度、更小的包体积等等。这些改进使得 Vue 3 成为一个更加高效和可靠的框架，可以帮助开发者更快地构建高质量的应用。
4.更多的社区贡献：Vue 3 已经得到了广泛的社区支持，很多开发者和公司都在为 Vue 3 开发新的插件、组件和工具。这将进一步增强 Vue 3 的功能和可用性。
1.2 Vite
1.2.1 现实问题
在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对 “打包” 这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。
时过境迁，我们见证了诸如 webpack、Rollup 和 Parcel 等工具的变迁，它们极大地改善了前端开发者的开发体验。
然而，当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。基于 JavaScript 开发的工具就会开始遇到性能瓶颈：通常需要很长时间（甚至是几分钟！）才能启动开发服务器，即使使用模块热替换（HMR），文件修改后的效果也需要几秒钟才能在浏览器中反映出来。如此循环往复，迟钝的反馈会极大地影响开发者的开发效率和幸福感。
Vite 旨在利用生态系统中的新进展解决上述问题：浏览器开始原生支持 ES 模块，且越来越多 JavaScript 工具使用编译型语言编写。
1.2 搭建vite项目
使用 NPM:
npm create vite@latest
使用 PNPM:
pnpm create vite
1.3 TypeScript
1.3.1 TypeScript 定义
TypeScript 简称：TS，是 JavaScript 的超集。在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript
1.3.2 TypeScript 基本数据类型
如下图所示：
1.3.3 TypeScript语法简单介绍
1.3.3.1 原始类型
// 数值类型 let age: number = 20 // 字符串类型 let myName: string = 'hello' // 布尔类型 let isLoading: boolean = false // undefined let un: undefined = undefined // null let timer:null = null
1.3.3.2 联合类型
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
let arr: (number | string)[] = [12, 'a']
1.3.3.3 数组类型
1. let 变量: 类型[] = [值1，...] 2. 3. let 变量: Array<类型> = [值1，...]
1. 2. let numbers: number[] = [40, 43, 45]
1.3.3.4 函数类型
普通函数：function 函数名(形参1： 类型， 形参2：类型): 返回值类型 { }
箭头函数：const 函数名（形参1： 类型， 形参2：类型):返回值类型 => { }
// 函数声明 function add(num1: number, num2: number): number { return num1 + num2 } // 箭头函数 const add = (num1: number, num2: number): number => { return num1 + num2 }
1.3.3.5 接口
当一个对象类型被多次使用时，可以有两种方式来来描述对象的类型，达到复用的目的。
interface 接口名 { 属性1: 类型1, 属性2: 类型2, }
interface login_form { username:string, password:string }
如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用
interface 接口1 extends 接口2来实现属性或方法的复用。
1.3.3.6 泛型
泛型，顾名思义，宽泛的类型，就是类型是不固定的；可以适用于多个类型，使用类型变量（比如T）帮助我们捕获传入的类型，之后我们就可以继续使用这个类型。
泛型函数
// T 只是一个名字而已，可以改成其他的，例如 R function fn<T>(value: T): T { return value } const num = fn<number>(10)
泛型接口
interface myinterface<T> { list:Array<T> }
当然ts还有很多内容，这里仅仅只是进行简单介绍。
2. 项目配置简单概述
2.1 eslint 校验代码工具配置
2.1.1 eslint定义
官网上告诉我们，ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，哦，所以我们可以知道，ESLint 就是一个工具，而且是一个用来检查代码的工具。
代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。
JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。ESLint 这样的工具可以让程序员在编码的过程中发现问题，而不是在执行的过程中发现问题。
2.1.2 eslint安装
安装eslint
pnpm i eslint -D
生成配置文件:.eslint.cjs
npx eslint --init
2.2 prettier格式化工具配置
2.2.1 prettier 定义
有了eslint，为什么还要有prettier？eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次；
而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持包含js在内的多种语言。总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。
2.2.2 prettier安装
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
2.3 stylelint 配置
2.3.1 stylelint定义
stylelint为css的lint工具。可格式化css代码，检查css语法错误与不合理的写法，指定css书写顺序等。
2.3.2 scss 安装stylelint依赖
项目中使用scss作为预处理器，安装以下依赖：
pnpm add sass sass-loader stylelint postcss postcss-scss postcss-html stylelint-config-prettier stylelint-config-recess-order stylelint-config-recommended-scss stylelint-config-standard stylelint-config-standard-vue stylelint-scss stylelint-order stylelint-config-standard-scss -D
2.4 husky配置
2.4.1 husky定义
在上面我们已经集成好了我们代码校验工具，但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了远程仓库中，那这个规范就没什么用。所以我们需要强制让开发人员按照代码规范来提交。
要做到这件事情，就需要利用husky在代码提交之前触发git hook(git在客户端的钩子)，然后执行pnpm run format来自动的格式化我们的代码。
2.4.2 husky 安装
安装husky
pnpm install -D husky
执行
npx husky-init
会在根目录下生成个一个.husky目录，在这个目录下面会有一个pre-commit文件，这个文件里面的命令在我们执行commit的时候就会执行。
