Vite + Vue 3 + Vant 4 + TypeScript 安装流程

Vite 是一个由 Vue 核心团队开发的快速构建工具，专为现代前端项目设计。Vue 3 是 Vue.js 的最新版本，带来了许多新特性和性能提升。Vant 4 是基于 Vue 3 的移动端 UI 组件库，提供丰富的组件和功能。TypeScript 则是一种静态类型脚本语言，可以提供更好的代码编辑支持、类型检查和编译时错误检查。
下面我们将分步骤介绍如何安装和配置这些工具。
步骤1：安装 Node.js 和 npm
首先，你需要确保你的计算机上已经安装了 Node.js 和 npm。你可以在终端或命令提示符中运行以下命令来检查它们是否已安装：

node -v
npm -v

如果这两个命令都输出了版本号，说明 Node.js 和 npm 已经成功安装。
步骤2：创建新项目
接下来，你可以使用 Vue CLI 或 Vite CLI 来创建一个新的 Vue 3 项目。这里我们以 Vite 为例：

npm init @vitejs/app my-vue3-project -- --template vue

这将在当前目录下创建一个名为 my-vue3-project 的新项目，并使用 Vue 模板。
步骤3：进入项目目录并安装依赖
进入新创建的项目目录：

cd my-vue3-project

然后，你需要安装项目的依赖项。运行以下命令来安装 Vite、Vue 3 和 Vant 4 的相关依赖：

npm install @vitejs/plugin-vue@3 @vitejs/plugin-typescript @vant/weapp@4 --save-dev

这些依赖项包括 Vite 的 Vue 3 和 TypeScript 插件，以及 Vant 4 的相关依赖。
步骤4：配置 Vite
在项目根目录下，找到 vite.config.ts 文件并打开它。然后，你需要导入并配置 Vite 的相关插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import TypeScript from '@vitejs/plugin-typescript'
import { createVuePlugin } from 'vite-plugin-vue2' // 注意: 这行代码仅用于支持 Vue 2，如果你使用的是 Vue 3，请删除这行代码。