摘要：在本教程中，您将学习如何设置一个使用 TypeScript 和 Vite 的 Web 项目，将 TypeScript 编译成 JavaScript。
Vite 是一款前端构建工具，为现代 Web 项目提供更快速、更精简的开发体验。 “Vite” 在法语中意为“快”，体现了它的目标。
设置 TypeScript 项目
我们将逐步向您展示如何使用 Vite 设置 TypeScript 项目
步骤 1. 安装 Node.js
在 Windows 上打开命令提示符或在 macOS 上打开终端，检查您的计算机上是否安装了 Node.js
node -v如果您遇到错误，则表示 Node.js 不可用。您需要从 下载并安装 Node.js 官方网站。
步骤 2. 创建 Vite 项目
打开终端并使用以下命令创建一个新的 Vite 项目
npm create vite@latestCode language: CSS (css)如果您的计算机上没有安装 Vite，它会提示您安装它
Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) yCode language: CSS (css)输入 y 以继续安装。请注意，您可能在上面看到更高的版本。
安装 create-vite 包后，系统会提示您命名项目、选择框架以及选择变体
√ Project name: ... myapp
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript在本例中，我们使用 myapp 作为项目名称，Valilla 作为框架，以及 TypeScript 作为变体。
该命令将在与项目名称相同的目录中搭建项目
Scaffolding project in D:\myapp...
Done. Now run:
cd myapp
npm install
npm run dev步骤 3. 导航到项目目录
导航到项目目录
cd myapp步骤 4. 安装依赖项
通过运行 npm install 命令来安装必要的依赖项
npm install步骤 5. 启动开发服务器
运行以下命令启动开发服务器
npm run dev它将返回以下输出
> myapp@0.0.0 dev
> vite
VITE v5.4.1 ready in 275 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show helpCode language: CSS (css)在 Web 浏览器上打开 http://localhost:5173/，您将看到该应用程序。
要停止开发服务器，您可以按 Ctrl+C。
检查项目结构
这是项目结构
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
| └── vite.svg
├── src
| ├── counter.ts
| ├── main.ts
| ├── style.css
| ├── typescript.svg
| └── vite-env.d.ts
└── tsconfig.jsonCode language: PHP (php)以下是项目中的文件和目录（我们将重点关注主要文件）
index.html
这是应用程序的入口点。index.html 包含 src/main.ts 文件，它是主要的 TypeScript 文件。
在开发过程中，Vite 会将此 src/main.ts 文件编译成 JavaScript 包并将其注入到 index.html 文件中。
src/main.ts
这是应用程序的入口点。在此 main.ts 文件中。
style.css
此文件存储应用程序的 CSS 代码。您可以使用导入语句在应用程序中使用它
import './style.css';Code language: JavaScript (javascript)请注意，由于 Vite 处理资产捆绑和处理的方式，您可以像 JavaScript 文件一样导入 CSS 文件。因此，您不必在 HTML 中手动链接样式表。
package.json
此 package.json 文件用于管理依赖项、脚本和配置。
node_modules/
此目录包含所有已安装的 npm 包及其依赖项。当您执行 npm install 命令时，它将在此文件夹中安装 package.json 文件中列出的所有包。
tsconfig.json
这是 TypeScript 配置文件，其中包含编译器选项、文件包含/排除以及其他设置。它定义了 TypeScript 的行为方式。
自定义项目
步骤 1. 从 src 目录中删除 counter.ts 文件。此步骤是可选的。
步骤 2. 将 src/main.ts 文件中的所有代码替换为以下内容
import './style.css';
const app = document.querySelector<HTMLDivElement>('#app');
app!.innerHTML = '<h1>Hello, TypeScript!</h1>';Code language: JavaScript (javascript)它是如何工作的。
首先，将 style.css 导入到 main.ts 文件中
import './style.css';Code language: JavaScript (javascript)其次，选择 app 元素并将它的 innerHTML 更改为 HTML 片段
const app = document.querySelector<HTMLDivElement>('#app');
app!.innerHTML = '<h1>Hello, TypeScript!</h1>';Code language: JavaScript (javascript)第三，运行开发服务器，您将看到文本 Hello, TypeScript!
构建用于生产的项目
运行以下命令构建用于生产的项目
npm run build它将在 dist 目录中创建一个经过优化的生产构建，其结构如下
├── assets
| ├── index-Cz4zGhbH.css
| └── index-NXap3Nzt.js
├── index.html
└── vite.svg要在本地预览生产构建，您可以运行以下命令
npm run preview此命令将启动一个本地服务器，以便您可以在 http://localhost:4173/ 上查看产品构建
> myapp@0.0.0 preview
> vite preview
➜ Local: http://localhost:4173/
➜ Network: use --host to expose
➜ press h + enter to show helpCode language: CSS (css)现在，您可以开始使用 Vite 开发 TypeScript 应用程序。祝您编程愉快！
