十分钟快速使用 React18 + vite + TypeScript + antDesign 搭建一个前端框架

原创

已于 2023-06-06 11:10:18 修改 · 2.7k 阅读

于 2023-06-06 10:58:48 首次发布

本文介绍了如何使用React、vite、TypeScript和antDesign创建一个前端框架。通过安装必要工具、创建项目、配置TypeScript、集成React和antDesign库、创建自定义组件、整合Redux以及设置路由，逐步构建一个基本的前端应用。

在这篇博客中，我将向读者们介绍如何使用 React18 + vite + TypeScript + antDesign搭建一个前端框架。React 是一种流行的 JavaScript 库，用于构建用户界面。vite是一个快速的前端构建工具，能够快速创建现代化的应用程序。TypeScript 是一种开源的编程语言，它可以帮助开发者在编写JavaScript 代码时减少错误。antDesign 是一个流行的 UI 库，提供了众多现成的组件可以让开发者更轻松地构建出漂亮的视图。在本博客结束时，读者将了解如何将这些技术组合在一起，创建出一个普普通通的前端框架。

本篇博客将分为以下几个步骤：

准备工作：安装必需的软件和库
创建一个新的项目
安装 React 和 antDesign 库
配置 TypeScript
构建应用程序
创建自定义的 antDesign 组件
集成 Redux
使用路由和导航器

请注意，本篇文章的重点是搭建前端框架，因此我们不会涉及特定领域的业务逻辑。

准备工作：安装必需的软件和库

在开始之前，你需要在计算机上安装必要的工具和库。确保已经安装了 Node.js 和 npm。你可以到 Node.js 官方网站下载适合自己的安装文件，并进行安装。安装完成后，你还需要全局安装 create-vite-app 和 TypeScript，可以直接在命令行工具中执行以下命令：

npm i -g create-vite-app typescript

创建一个新的项目

在安装完必要的软件后，我们需要用 create-vite-app 工具创建一个新项目。从命令行中运行以下命令：

create-vite-app my-app --template react-ts

这将会创建一个名为 my-app 的新项目，使用 react-ts 模板来初始化应用程序。这里我们使用 TypeScript 模板，可以帮助我们在编写代码时发现一些常见的错误。
命令执行完后，你应该可以看到一个文件夹 my-app 被创建出来了。进入 my-app 目录，执行以下命令开始项目：

cd my-app
npm i
npm run dev

这些命令将会跑起应用程序，并在浏览器中打开 localhost:3000 端口以供你访问。

安装 React 和 antDesign 库

我们的下一步是安装 React 和 antDesign 库。在命令行中输入以下命令：

npm i react react-dom antd @types/react @types/react-dom

这将会安装最新的 React，antDesign 库以及类型声明文件。请确保使用的版本是最新的，以便获得最佳的性能和最新功能。

按需加载antd

antd 默认支持基于 ES modules 的 tree shaking，直接引入 import { Button } from 'antd'; 就会有按需加载的效果。

高级配置

目前我这边安装的最新antd版本是5.xx版本，如果项目中需要有主题配置等高级设置，可根据官方文档安装craco

配置 `TypeScript`

接下来，我们需要为 TypeScript 配置项目。创建 tsconfig.json 文件，并添加以下内容：

{
   
   
  "compilerOptions": {
   
   
    "target": "es6",
    "module": "esnext",
    "jsx": "react-jsx",
    "sourceMap": true,
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

这个配置文件告诉 TypeScript 将代码编译为 ES6 模块，并使用 React 的 JSX 语法。此外，我们还启用了严格模式，并支持 ES 模块的导入/导出功能。

构建应用程序

接下来，我们需要将 React 和 antDesign 库集成到实际的应用程序中。
在 App.tsx 文件中，我们需要导入 React 和 antDesign 组件：

import React from 'react';
import {
   
    Layout, Menu } from 'antd';
import './App.css';

const {
   
    Header, Content, Footer } = Layout;

function App() {
   
   
  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={
   
   ['2']}>
          <Menu.Item key="1">nav 1</Menu.Item>
          <Menu.Item key="2">nav 2</Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item>
        </Menu>
      </Header>
      <Content style={
   
   {
   
    padding: '0 50px' }}>
        <div className="site-layout-content">Content</div>
      </Content>
      <Footer style={
   
   {
   
    textAlign: 'center' }}>XXX XXXXX ©2023 Created by XXX XXXX</Footer>
    </Layout>
  );
}

export default App;

在这个例子中，我们导入了 antDesign 的 Layout 和 Menu 组件，创建了一个基本的应用程序布局。
接下来，我们需要在 index.tsx 文件中将 React 组件渲染到页面上：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.