Vite+Typescript+Vue3学习笔记

**Vite + Typescript + Vue3 学习笔记**

### 前言随着前端技术的发展，Vite、Typescript 和 Vue3 已经成为现代前端开发的必备工具。作为一名新手，我决定学习这些技术，并记录下我的学习过程和心得。

### Vite####什么是 Vite？

Vite 是一个由 Evan You 等人创建的现代前端构建工具，旨在解决传统 Webpack 构建速度慢的问题。它使用 ESbuild 来进行代码编译和缓存，从而大幅度提高构建速度。

#### 为什么选择 Vite？

1. 构建速度快：Vite 使用 ESbuild 来进行代码编译和缓存，构建速度比传统 Webpack 快很多。
2. 支持热更新：Vite 支持热更新功能，让你可以实时看到页面的变化。
3. 支持 Tree Shaking：Vite 支持 Tree Shaking 功能，让你可以只打包需要的代码。

#### 如何使用 Vite？

1. 安装 Vite：`npm install vite`
2. 创建 `vite.config.js` 文件，配置 Vite 的选项。
3. 使用 `vite` 命令来启动构建过程。

### Typescript####什么是 Typescript？

Typescript 是一个由 Microsoft 创建的静态类型语言扩展，旨在解决 JavaScript 的类型问题。它可以让你编写更安全、更易维护的代码。

#### 为什么选择 Typescript？

1. 静态类型检查：Typescript 支持静态类型检查，让你可以在编译时就发现类型错误。
2. 强大的类型系统：Typescript 有一个强大的类型系统，支持类似于 Java 和 C# 的类型特性。
3. 可以使用 JavaScript代码：Typescript 支持使用 JavaScript代码，并且可以轻松地将 Typescript代码转换为 JavaScript。

#### 如何使用 Typescript？

1. 安装 Typescript：`npm install typescript`
2. 创建 `tsconfig.json` 文件，配置 Typescript 的选项。
3. 使用 `tsc` 命令来编译 Typescript代码。

### Vue3####什么是 Vue3？

Vue3 是一个由 Evan You 等人创建的现代前端框架，旨在解决传统 Vue2 的问题。它使用 Composition API 来进行组件编写，让你可以更轻松地管理组件之间的关系。

#### 为什么选择 Vue3？

1. Composition API：Vue3 使用 Composition API 来进行组件编写，让你可以更轻松地管理组件之间的关系。
2. 支持 TypeScript：Vue3 支持使用 Typescript代码，并且可以轻松地将 Vue3代码转换为 Typescript。
3. 构建速度快：Vue3 使用 Vite 来进行构建过程，从而大幅度提高构建速度。

#### 如何使用 Vue3？

1. 安装 Vue3：`npm install vue`
2. 创建 `main.ts` 文件，配置 Vue3 的选项。
3. 使用 `vite` 命令来启动构建过程。

###代码示例#### Vite 配置文件

javascript// vite.config.jsimport { defineConfig } from 'vite';

export default defineConfig({
 base: './',
 server: {
 port:3000,
 },
});

json// tsconfig.json{
 "compilerOptions": {
 "target": "es5",
 "module": "commonjs",
 "strict": true,
 "esModuleInterop": true,
 "outDir": "./dist"
 }
}

typescript// Hello.vue<template>
 <div>
 <h1>Hello, {{ name }}!</h1>
 </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const name = ref('World');
</script>

typescript// useHello.tsimport { ref } from 'vue';

export function useHello() {
 const name = ref('World');

 return { name };
}