安装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目录
标签:react,About,import,App,TS,React,Home,Antd From: https://www.cnblogs.com/boye169/p/18355513