完整的项目地址
1、使用creat-react-app搭建脚手架
我使用的是 VSCode,看个人喜好
打开一个空项目时的样子:
在控制台输入以下命令,或者在项目的文件夹中打开GitBash:
npm install -g creat-react-app 全局下载工具
create-react-app your_projectname 初始化一个项目模板
npm start
2、搭建项目的开发目录
2.1 删除掉src目录下的所有文件,新建App.js
import React from 'react';
function App() {
return (
<div className="App">
index
</div>
);
}
export default App;
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))
2.2 在src下新建一下目录
2.3安装antd
yarn add antd
引入antd
引入antd的全局样式
3、配置页面路由
3.1 引入路由包
yarn add react-router-dom
3.2 创建路由组件admin
import React from 'react'
/* 管理路由组件 */
export default class Admin extends React.Component {
render() {
return (
<div>admin</div>
)
}
}
3.3 登录路由组件Login
import React from 'react'
/*
登录路由组件
*/
export default class Login extends React.Component {
render() {
return (
<div>Login</div>
)
}
}
3.4 App.js引入路由
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Login from './pages/login/login'
import Admin from './pages/admin/admin'
function App() {
return (
<BrowserRouter>
<Switch>
<Route path='/login' component={Login}></Route>
<Route path='/' component={Admin}></Route>
</Switch>
</BrowserRouter>
);
}
export default App;
效果图