用vite 快速创建一个ts开发环境

我在日常开发中经常使用ts语言，通常需要用webpack来编译和打包，配置起来比较繁琐，后来使用Angular框架，但是用ng来写一个小小的demo感觉非常臃肿，不值当。所以vite是个不错的选择。

使用 Vite 快速创建一个原生 TypeScript 开发的项目非常简单。按照以下步骤进行操作：

确保你已经安装了最新版本的 Node.js（建议使用 LTS 版本）。
打开终端，并进入你想创建项目的目录。
运行以下命令来全局安装 Vite：

lua 复制代码

npm install -g create-vite

运行以下命令来创建一个新的 Vite 项目：

lua 复制代码

create-vite my-app --template vanilla-ts

这将创建一个名为 my-app 的文件夹，并使用 vanilla-ts 模板来初始化一个原生 TypeScript 项目。

--template vanilla-ts 是在使用 Vite 创建项目时的一个选项参数。它指定了所使用的项目模板为 "vanilla-ts"。

在 Vite 中，模板用于提供项目的初始结构和配置。不同的模板可以为不同类型的项目提供特定的配置和预设。"vanilla-ts" 模板是一个用于原生 TypeScript 开发的模板，它提供了一个简单的项目结构和默认的配置，适用于纯粹的 TypeScript 开发。

通过选择 "vanilla-ts" 模板，你将得到一个基本的原生 TypeScript 项目结构，其中包含一些默认的配置文件（如 tsconfig.json、vite.config.js 等），以及一个示例的 TypeScript 文件。这样你可以立即开始编写 TypeScript 代码，而无需手动设置和配置 TypeScript。

除了 "vanilla-ts" 模板，Vite 还提供了其他一些模板选项，例如 "vue-ts"（用于 Vue.js 和 TypeScript 开发）和 "react-ts"（用于 React 和 TypeScript 开发），它们分别适用于不同的前端框架和技术栈。

通过选择不同的模板，你可以快速初始化适合特定项目类型的初始结构和配置，从而更高效地开始开发。

bash 复制代码

cd my-app

安装项目的依赖：

npm install
运行以下命令来启动开发服务器：

arduino 复制代码

npm run dev

这将启动 Vite 的开发服务器，并在浏览器中打开项目。

现在，你就可以开始在 src 目录下编写你的原生 TypeScript 代码了。Vite 会自动监听你的代码变化，并实时更新你的应用程序。

你可以根据你的需求修改和扩展项目，例如添加其他依赖、配置构建选项等。

请注意，原生 TypeScript 项目使用 Vite 不需要额外的配置，因为 Vite 默认支持 TypeScript。如果你想更深入地定制项目的配置，可以查阅 Vite 的官方文档或社区资源。

build

arduino 复制代码

npm run build

开发完之后运行 npm run build 命令来打包项目。

打包压缩、发给甲方。

关机睡觉、等待验收。

验收完成、支付完成。

源码交付、删除项目。

运行后的截图，点击count会++。项目结构和counter.js