前言
还是为了备忘,记录一下自己利用Create-React-App
脚手架搭建antd-mobile
的开发环境
安装
npm install -g create-react-app
create-react-app test
cd test
nppm start
至此 react已经运行起来了
然后引入 fastclick
不然在使用过程中会出现一些问题,在header
添加如下代码
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<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>
引入
引入 react-app-rewired
并修改 package.json
里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系,你需要还需要安装 customize-cra。
npm install react-app-rewired customize-cra --save-dev
package.json 修改如下:
/* 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",
}
添加配置文件
在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
要使用 babel-plugin-import,按需加载, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件:
安装:
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',
+ }),
+ );
按照官网的文档这样就行了,但是!我这儿没有成功,不过官网提供了已经做好的示例
直接下载示例,在示例的基础上开发吧
示例都是好多年前的了,先用着吧
坑
- antmobile设置主题色无效
在 config-overrides.js 可以修改主题颜色,修改以后发现不生效:
主要还是一些库的版本不对应,改成下面的版本就好了,具体是哪个库引起的也不去细究了
npm install react-app-rewired@1.4.1
npm install babel-plugin-import
npm install react-scripts@1.1.4
npm install less@2.7.2
npm install less-loader
后续
项目终于能够跑起来了,要写多个页面的话就需要配置路由
npm install react-router-dom
修改App.js
文件代码如下:
import React from 'react';
import {Switch, Route,BrowserRouter } from 'react-router-dom';
import {Home} from './pages';
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<BrowserRouter >
<div>
<Route path="/" exact component={Home}/>
</div>
</BrowserRouter >
);
}
}
是的,再贴一下App.js
引入的Home
:
import React from 'react';
import {Button} from 'antd-mobile';
class Home extends React.Component{
constructor(props){
super(props);
this.state={
name : "说明书"
};
}
render(){
return(
<div>
<Button type="primary">{this.state.name}</Button>
</div>
);
}
}
export default Home ;
这样就可以了
再更
还要更新,还有状态管理,用mobx-react,参考这个