Vue3+Vite+TypeScript常用项目模块详解

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的时候就会执行。