以前需要一个组件,大概就3步,下载、引入、测试。
现在用个组件可能就是n步了,一个下午都没把antd mobile的组件展示出来,各种坑啊,看着官方文档一步一步也还是满地坑。
吐槽就免了,还是记录下来吧:
第一步:采用dva创建项目,这个如果不会看我前面写的文章。
dva new goingMobile1
创建完后,文件结构如下:
第二步:配置antd mobile的按需加载脚本和样式
安装依赖:
npm install antd-mobile babel-plugin-import --save
修改.roadhogrc的文件:
{
"entry": "src/index.js",
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
["import", { "libraryName": "antd-mobile", "style": "css" }]
]
}
}
}
第三步:配置支持ICON,官网提供了几种方式,最终采用的是添加 webpack.config.js 的方式,其他的方式都测试过没有那种可以启用。
webpack.config.js 的内容:
const path = require('path');
module.exports = function(webpackConfig, env) {
const svgDirs = [
require.resolve('antd-mobile').replace(/warn\.js$/, ''), // 1. 属于 antd-mobile 内置 svg 文件
// path.resolve(__dirname, 'src/my-project-svg-foler'), // 2. 自己私人的 svg 存放目录
];
// 因为一个 SVG 文件不能被处理两遍. 在 atool-build 默认为 svg配置的svg-url-loade 里 exclude 掉需要 svg-sprite-loader处理的目录
// https://github.com/ant-tool/atool-build/blob/master/src/getWebpackCommonConfig.js#L162
// https://github.com/kisenka/svg-sprite-loader/issues/4
webpackConfig.module.loaders.forEach(loader => {
if (loader.test && typeof loader.test.test === 'function' && loader.test.test('.svg')) {
loader.exclude = svgDirs;
}
});
// 4. 配置 webpack loader
webpackConfig.module.loaders.unshift({
test: /\.(svg)$/i,
loader: 'svg-sprite',
include: svgDirs, // 把 svgDirs 路径下的所有 svg 文件交给 svg-sprite-loader 插件处理
});
return webpackConfig;
}
第四步:写个测试界面:我直接修改的/src/routes/IndexPage.js
内容:
import React,{Component} from 'react';
import { connect,dispatch } from 'react-redux' // 引入connect
import { NavBar, Icon } from 'antd-mobile';
class PersonChar extends Component {
render() {
return (
<div>
<NavBar leftContent="返回"
mode="light"
onLeftClick={() => console.log('onLeftClick')}
rightContent={[
<Icon key="1" type="ellipsis" />,
]}
>个人维度</NavBar>
</div>
)
}
}
// 利用connect将组件与Redux绑定起来
export default connect((personCharMd) => ({personCharMd}))(PersonChar)
界面效果是字体、图标都非常大,根本没法进行开发:
修改/public/index.html文件:
将以前的
<meta name="viewport" content="width=device-width, initial-scale=1">
修改成:
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no">
执行npm start后查看效果:
界面效果: