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

安装Vite

?

1 2 3

npm install -g vite   #yarn global add vite

创建React项目　

?

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

安装React Router　

?

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

安装Ant Design　　

?

1 2	npm install antd yarn add antd

配置React Router　

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

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

?

1 2 3 4 5 6 7 8 9 10 11

import React from 'react';   const Home : React.FC= () => {   return (     <div>       <h1>Welcome to the Home page!</h1>     </div>   ); };   export default Home;

 

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

?

1 2 3 4 5 6 7 8 9 10 11

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。可以编写以下代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

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中，可以编写以下代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

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;

启动　　

?

1

yarn dev

打包　

?

1	yarn vite build #生成dist目录