# tmp

**Repository Path**: mm_sqc/tmp

## Basic Information

- **Project Name**: tmp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-04
- **Last Updated**: 2021-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1.删除无用的组件或者配置或者文件
	App.js
	index.js
	reportWebVitals.js		保留
	
2.安装依赖
	配置sass，安装如下依赖即可
		cnpm i sass-loader@10.1.0
		
	安装react-router
		cnpm i react-router-dom -S

	配置reset.css 重置浏览器样式，兼容性
		cnpm i reset-css --save
		
		在index.js中引用 
		import 'reset-css'
		
	配置antd,下载即可，用的时候再引入就可以了
		cnpm i antd -S
		建议在index.js中统一引入antd的样式
		
	配置axios，以及跨域
		cnpm i axios http-proxy-middleware@0.20.0 -S
		配置代理服务器(package.json)
		proxy:"代理域名"
		https://h5.watsons.com.cn/
3.在index.js中引入路由文件
		import App from './router';
		
4.配置路由
	src
		router
			index.js
	index.js代码
	```
		// 配置路由
		import React from 'react'
		import {Route,BrowserRouter,NavLink,Switch} from 'react-router-dom'
		import Commen from '../pages/commen'   //  默认就是index.js
		import Mask from '../pages/mask' 
		import Head from '../component/common/head'
		
		function Rou (){
			return <BrowserRouter>
				<Head/>
				<div>
					{/*配置路由*/}
					<Switch>
						<Route path="/" exact={true} component={Commen} />
						<Route path="/mask" component={Mask} />
					</Switch>
				</div>
			</BrowserRouter>
		}
		export default Rou;
	```
5.在路由中引入了head组件
	src
		component
			common
				head
					index.js
					index.scss
	index.js代码--(结合index.scss)
	```
		import {
		  HomeOutlined,
		  SettingFilled,
		  SmileOutlined,
		  SyncOutlined,
		  LoadingOutlined,
		} from '@ant-design/icons';
		
		
		class C extends React.Component{
			render(){
					return <div><div className="head-box">
						<Row>
							<Col span={4}>
								<SmileOutlined style={{fontSize:"25px"}}/>
							</Col>
							<Col span={16} >
								<input className="searchInput" placeholder="保湿面膜0.1元"/>
							</Col>
							<Col span={4}>
								<SmileOutlined style={{fontSize:"25px"}}/>
							</Col>
						</Row>
					</div>
					<div className="nav-box">
						<NavLink to="/" exact={true}><span>今日推荐</span></NavLink>
						<NavLink to="/mask"><span>面膜中心</span></NavLink>
					</div>
					</div>
			}
		}
		export default C;
	```
	
	

rem
	1rem = 1个html标签字体的大小
em
	1em = 1 个自己的字体的大小
	
px	像素单位

# 首页编写 (src/pages/commen/index.js)
	## 轮播图
	##请求地址
	
	
	
请求地址：
	轮播图数据
	https://h5.watsons.com.cn/aladdin/get_batch_data?codes=[%22sylunbo%22,%22pingou_B%22,%22Home_TopicCase_170505_7%22,%22Home_CategaryNavs_170505_7%22]&province_code=&city_code=&version=&app_channel=wap&plat=wap&access_token=&device_id=cd9bb2f0-7c16-11eb-8cb6-6d080da925d4