一，初始项目搭建
npx create-react-app my-app
cd my-app
npm start
二，项目的目录结构设计
1，新建项目后把src下的东西全删除
2，然后创建相关的目录结构：
三，初始化配置移动端项目文件
1，引入antd-mobile
官网：https://mobile.ant.design/docs/react/introduce-cn
安装：
npm install antd-mobile --save
2,index.html配置移动端参数
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
3，移动端300毫秒问题的插件引入
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
4，实现antd组件的按需打包（使用到哪个组件了，才会打包编译这个组件）
参看文章：https://blog.csdn.net/zwkkkk1/article/details/88823366
具体介绍可以看下官方手册
(1)引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。
npm install react-app-rewired customize-cra --save-dev
修改package的配置：
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
(2)然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
(3)使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。
npm install babel-plugin-import --save-dev
+ const { override, fixBabelImports } = require('customize-cra');
- module.exports = function override(config, env) {
- // do stuff with the webpack config...
- return config;
- };
+ module.exports = override(
+ fixBabelImports('import', {
+ libraryName: 'antd-mobile',
+ style: 'css',
+ }),
+ );
于是就可以在下一步使用了：
四，在应用中使用antd组件
1，入口文件：
import React from 'react'
import ReactDOM from 'react-dom'
import {Button} from 'antd-mobile'
ReactDOM.render(<Button type="primary">Test</Button>,document.getElementById('root'))
然后npm run start
2，安装less,为了修改antd-mobile的默认样式
npm install --save-dev babel-plugin-import less less-loader style-loader css-loader
值得注意的是，目前less-loader只支持到@6.0.0，高于6版本的，会报这个错：
所以这里的less-loader最好指定一下版本，我用的5.0.0
主题定制的官网：https://mobile.ant.design/docs/react/customize-theme-cn
主题样式文件：https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
定制主题，也是在config-overrides.js文件进行更改：
const { override, fixBabelImports , addLessLoader } = require('customize-cra')
const theme = require('./antd-theme.json')
module.exports = override(
addLessLoader({
javascriptEnabled: true,
modifyVars: theme,
}),
fixBabelImports('import', {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style: true,
}),
);
样式文件antd-theme.json新建在根目录下：
{
"brand-primary": "#000000",
"brand-primary-tap": "#ffccbc"
}
使用addLessLoader插入less-loader，修改style为true，确保加载less文件。
然后重启项目，样式文件就生效了：
五，引入路由
1，下载路由依赖包react-router-dom：
官方文档：https://reactrouter.com/web/guides/quick-start
npm install --save react-router-dom
2，新建三个页面组件
3，在入口文件index中映射路由和文件
六，引入redux
1,安装下载相关的包
npm install --save redux@3.7.2 react-redux redux-thunk
npm install --save-dev redux-devtools-extension
2，创建多个仓库，然后合并起来
3，在项目中使用并指定仓库
七，创建登陆和注册组件
1，登陆
// 用户登陆的路由组件
import React from 'react'
import {
NavBar,
WingBlank,
List,
InputItem,
WhiteSpace,
Button
} from 'antd-mobile'
import Logo from '../../components/logo/logo'
export default class Login extends React.Component{
state={
username:'',
password:''
}
//处理输入框的变化，收集数据到state
handleChange(name,value){
this.setState({[name]:value})
}
//跳转到注册路由
toRegister=()=>{
this.props.history.replace('/register')
}
//登陆
login=()=>{
console.log(this.state)
}
render(){
return (
<div>
<NavBar>硅谷直聘</NavBar>
<Logo></Logo>
<WingBlank>
<List>
<InputItem placeholder="输入用户名" onChange={val=>this.handleChange('username',val)}>
用户名：
</InputItem>
<WhiteSpace></WhiteSpace>
<InputItem type='password' placeholder="输入密码" onChange={val=>this.handleChange('password',val)}>
密 码
</InputItem>
<WhiteSpace></WhiteSpace>
<Button type="primary" onClick={this.Login}>登 陆</Button>
<WhiteSpace></WhiteSpace>
<Button onClick={this.toRegister}>还没有账号</Button>
</List>
</WingBlank>
</div>
)
}
}
2，注册
/*
用户注册的路由组件
*/
import React from 'react'
import { NavBar, WingBlank, List, InputItem, WhiteSpace, Radio, Button } from 'antd-mobile'
import Logo from '../../components/logo/logo'
export default class Register extends React.Component {
state = {
username: '',
password: '',
passwors2: '',
type: 'dashen',
}
//处理输入框/单选框的变化，收集数据到state
handleChange = (name, value) => {
this.setState({ [name]: value })
}
//跳转到login路由
toLogin = () => {
this.props.history.replace('/login')
}
//注册
register = () => {
console.log(JSON.stringify(this.state))
}
render() {
const { type } = this.state
return (
<div>
<NavBar>硅谷直聘</NavBar>
<Logo/>
<WingBlank>
<List>
<InputItem placeholder="输入用户名" onChange={val=>this.handleChange('username',val)}>
用户名：
</InputItem>
<WhiteSpace></WhiteSpace>
<InputItem placeholder="输入密码" type="password" onChange={val=>this.handleChange('password',val)}>
密 码：
</InputItem>
<WhiteSpace></WhiteSpace>
<InputItem placeholder="输入确认密码" type="password" onChange={val=>this.handleChange('password2',val)}>
确认密码
</InputItem>
<WhiteSpace></WhiteSpace>
<List.Item>
<span style={{marginRight:30}}>用户类型</span>
<Radio checked={this.state.type==='dashen'} onClick={()=>{this.handleChange('type','dashen')}}>大神</Radio>
<Radio checked={this.state.type==='laoban'} onClick={()=>{this.handleChange('type','laoban')}}>老板</Radio>
</List.Item>
<WhiteSpace></WhiteSpace>
<Button type='primary' onClick={this.register}>注 册</Button>
<WhiteSpace></WhiteSpace>
<Button onClick={this.toLogin}>已经有账号</Button>
</List>
</WingBlank>
</div>
)
}
}
八，封装axios
npm install --save axios