Vite 2 + TypeScript + Ant Design 系列 01：快速上手

2023-11-20 01:58:50

Vite 2 + TypeScript + Ant Design 系列 01：快速上手

前言

在项目开发过程中，我们常常需要使用一些成熟的前端框架和组件库来提高开发效率和项目的质量。在这个系列中，我将介绍如何使用 Vite 2、TypeScript 和 Ant Design 来快速构建一个现代的前端应用。在第一篇文章中，我们将介绍 Vite 2 的安装和配置，以及如何创建一个新的项目。

一、Vite 2 的安装

npm install -g vite

二、创建一个新的项目

vite create my-app

三、安装 TypeScript 和 Ant Design

npm install typescript @vitejs/plugin-typescript antd

四、配置 Vite

在 vite.config.js 文件中，添加以下配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tsconfigPaths from 'vite-tsconfig-paths'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tsconfigPaths(),
  ],
})

五、修改 tsconfig.json 文件

在 tsconfig.json 文件中，添加以下配置：

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "jsx": "react",
    "moduleResolution": "node",
  },
  "include": [
    "src"
  ],
}