antd-mobile环境搭建详细步骤以及遇到的坑

1、创建项目，这里使用dva新建项目

dva new YGAntdMobileDemo

2、安装antd-mobile

npm install antd-mobile --save

3、按需加载，安装babel-plugin-import

官网强烈推荐使用，可以提高打包的编译速度和浏览器下载资源的速度，babel-plugin-import 可以从组件库中仅仅引入需要的模块，而不是把整个库都引入，从而提高性能

npm install babel-plugin-import --save-dev

4、将原有的.roadhogrc文件修改为.roadhogrc.js，配置文件如下

import pxtorem from 'postcss-pxtorem';
const path = require( 'path' );


export default {
  entry : "src/index.js" ,
  disableCSSModules : true ,
  cssModulesExclude:[
    './src/index.css'
  ],
  publicPath : "/go-nifty/pp/app/index/" ,
  autoprefixer : {
    browsers : [
      "iOS >= 8" ,
      "Android >= 4"
    ]
  } ,
  extraPostCSSPlugins : [
    pxtorem( {
      rootValue : 100 ,
      propWhiteList : [] ,
    } ) ,
  ] ,
  extraBabelPlugins : [
    "transform-runtime" ,
    [
      "import" ,
      { libraryName : "antd-mobile" , "libraryDirectory" : "lib", "style": true }
    ]
  ] ,
  env : {
    development : {
      "extraBabelPlugins": [
        "dva-hmr",
        "transform-runtime"
      ]
    }
  }
};

以上代码段注意点：

1>、extraBabelPlugins节点下是组件按需加载主要配置项

注意：样式必须加载 less 。保持 babel-plugin-import 的 style 属性配置为 true。

2>、运行会报错，安装postcss-pxtorem（移动端采用Flexible将px转换rem适配）

npm install postcss-pxtorem

5、添加 webpack.config.js，配置文件如下

const path = require('path');
const pxtorem = require('postcss-pxtorem');
let webpack = require('webpack');

const vendors = [
  'react',
  'react-dom',
  'react-redux',
  'react-router',
  'react-router-redux',
  'redux',
];


module.exports = function (webpackConfig, env) {
  webpackConfig.entry = {
    index: './src/index.js',
    vendor: vendors,
  };
  const svgDirs = [
    require.resolve('antd-mobile').replace(/warn\.js$/, ''),  // 1. 属于 antd-mobile 内置 svg 文件
    path.resolve(__dirname, 'src/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
  if (webpackConfig.module.loaders && Array.isArray(webpackConfig.module.loaders)) {
    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 插件处理
    });
  }

  webpackConfig.plugins.push(new webpack.optimize.CommonsChunkPlugin({
    names: ['vendor'],
    minChunks: Infinity,
  }));

  return webpackConfig;
};

以上代码段注意点：

1>、Array.isarray(XXX)的方法必须加上，不然会报错：TypeError: Cannot read property 'forEach' of undefined

2>、编译过程中报错指定的CSS文件无法导入，报错

Module parse failed .css Unexpected token (1:0) You may need an appropriate loader to handle this file type

（并没有找到为什么会这样，然后配置完成之后安装以下插件，再编译又通过了。。。。。。）

配置支持svg图片，需要安装插件

npm install --save-dev gulp-svg-sprites

npm i svg-sprite-loader

6、高清方案配置，修改index.ejs文件，将Viewport的设置通过一个js脚本来代替

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- 原来的meta配置 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
  <!-- 更改后的配置，将viewport的设置通过一个js脚本代替 -->
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <script>
    !function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
    // 原来值为100，修改为200了，则正常展示了，此处修改待考究
    flex(200, 1);
  </script>
  <title>登录系统</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
  <div id="root"></div>
</body>
</html>

在运行时，开始组件超级大，后来在谷歌上只展示50%的大小，就修改了flex里的值为200页面就正常展示了

7、页面测试，修改indexPage.js页面，运行成功

import React from 'react';
import { NavBar, Icon } from 'antd-mobile';
import { connect } from 'dva';

function IndexPage() {
  return (
    <div>
      <NavBar
        mode="light"
        icon={<Icon type="left" />}
        onLeftClick={() => console.log('onLeftClick')}
        rightContent={[
          <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
          <Icon key="1" type="ellipsis" />,
        ]}
      >标题啊喂</NavBar>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

npm start

8、antd-mobile自定义主题开发， 修改 Ant Design 的样式变量

1>、新建themes文件夹，新增default.less文件，内容如下

@import '~antd-mobile/lib/style/themes/default.less';
// 背景色
@fill-base: #e9102d;
// @fill-base: #fff;                           // 组件默认背景，设置修改后的色值
@fill-body: #f5f5f9;                           // 页面背景
// 全局/品牌色
@brand-primary: #e9102d;

注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）

参数链接：ant-mobile设计变量表以及命名规范、支付宝钱包默认主题配置文件

2>、新建theme.config.js文件，内容如下

const fs = require('fs');
const path = require('path');
const lessToJs = require('less-vars-to-js');

module.exports = () => {
  const themePath = path.join(__dirname, './themes/default.less');
  return lessToJs(fs.readFileSync(themePath, 'utf8'));
};

通过 less-vars-to-js 的工具读取 less 文件变量，安装 less-vars-to-js

npm install less-vars-to-js

3>、配置在.roadhogrc.js下的theme字段，theme可以配置为对象或文件路径

theme : "./theme.config.js" ,

4>、注意：在修改了theme.config.js里的变量配置时，需要用npm start重启，才能生效。

参考博文：点击打开链接

antd-mobile环境搭建详细步骤以及遇到的坑

猜你喜欢