antd mobile(一) 环境搭建

r囧r小猫 2022-06-10 06:20 318阅读 0赞

以前需要一个组件，大概就3步，下载、引入、测试。  
现在用个组件可能就是n步了，一个下午都没把antd mobile的组件展示出来，各种坑啊，看着官方文档一步一步也还是满地坑。  
吐槽就免了，还是记录下来吧：  
第一步：采用dva创建项目，这个如果不会看我前面写的文章。

dva new goingMobile1

创建完后，文件结构如下：  
![这里写图片描述][SouthEast]

第二步：配置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 的内容:

第四步：写个测试界面：我直接修改的/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文件：  
将以前的

修改成：

执行npm start后查看效果:  
界面效果：  
![这里写图片描述][SouthEast 1]

[SouthEast]: /images/20220610/ae0211faface470e87d2e6c3697c5e8c.png
[SouthEast 1]: /images/20220610/5a675fddf5474fcb991b44d16bbcdcdb.png