标签：-- react mobile nbsp antd import 搭建
一，初始项目搭建
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
标签：--,react,mobile,nbsp,antd,import,搭建 来源： https://blog.csdn.net/weixin_42349568/article/details/116567355
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。