使用Vite+TS+Antd构建React项目

安装Vite

npm install -g vite

#yarn global add vite

创建React项目　

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

安装React Router　

npm install react-router-dom @types/react-router-dom
#yarn add react-router-dom @types/react-router-dom

安装Ant Design　　

npm install antd
yarn add antd

配置React Router　

现在，我们已经安装了React Router，可以开始配置路由了。在src目录下创建一个新的文件夹，名为“pages”。在pages文件夹中创建两个新的文件，名为“Home.tsx”和“About.tsx”。这些文件将会成为我们的两个页面。

在Home.tsx中，可以编写以下代码：

import React from 'react';

const Home : React.FC= () => {
  return (
    <div>
      <h1>Welcome to the Home page!</h1>
    </div>
  );
};

export default Home;

 

在About.tsx中，可以编写以下代码：

import React from 'react';

const About : React.FC= () => {
  return (
    <div>
      <h1>Welcome to the About page!</h1>
    </div>
  );
};

export default About;

现在，我们需要在App.tsx中配置React Router。可以编写以下代码：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import Home from './pages/Home';
import About from './pages/About';

const { Header, Content } = Layout;

const App : React.FC= () => {
  return (
    <Router>
      <Layout>
        <Header>
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to="/about">About</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <div className="site-layout-content">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
            </Switch>
          </div>
        </Content>
      </Layout>
    </Router>
  );
};

export default App;

使用Ant Design　

现在，我们已经安装了Ant Design，可以开始使用Ant Design来构建我们的UI界面了。在App.tsx中，可以编写以下代码：

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
import { HomeOutlined, InfoCircleOutlined } from '@ant-design/icons';
import Home from './pages/Home';
import About from './pages/About';

const { Header, Content } = Layout;

const App: React.FC = () => {
  return (
    <Router>
      <Layout>
        <Header>
          <div className="logo" />
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<HomeOutlined />}>
              <Link to="/">Home</Link>
            </Menu.Item>
            <Menu.Item key="2" icon={<InfoCircleOutlined />}>
              <Link to="/about">About</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 50px' }}>
          <div className="site-layout-content">
            <Switch>
              <Route exact path="/">
                <Home />
              </Route>
              <Route path="/about">
                <About />
              </Route>
            </Switch>
          </div>
        </Content>
      </Layout>
    </Router>
  );
};

export default App;

启动　　

yarn dev

打包　

yarn vite build #生成dist目录