dva+antd mobile搭建移动端的项目

第一步：使用dva创建项目，

通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

dva new dva-quickstart

cd dva-quickstart
$ npm start

创建完后，项目的文件结构大概如下：

第二步：安装antd-mobile

npm install antd-mobile --save

安装按需加载组件代码和样式的babel插件：

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

并且需要修改.webpackrc文件，网上各种各样的方式都有，但是没有一个成功，最后尝试后还是觉得这样的方式靠谱。

{
     "extraBabelPlugins": [
    ["import", { "libraryName": "antd-mobile", "style": "css" }]
   ]
}

第三步：需要修改index.html页面根据官方文档的改法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Dva Demo</title>
  <link rel="stylesheet" href="index.css" />
  <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>
</head>
<body>

  <div id="root"></div>
  <script src="index.js"></script>

</body>
</html>

在indexPage.js写测试组件：

import React, { Component } from 'react';
import { connect } from 'dva';
import { DatePicker,Button, Card, WingBlank, WhiteSpace,Icon, Grid,NavBar, } from 'antd-mobile';
import styles from './IndexPage.css';


function IndexPage() {
  
  return (
    <div className={styles.normal}>
    <DatePicker/>
    <Button type='warning'>按钮</Button>
    <WingBlank size="lg">
    <WhiteSpace size="lg" />
    <Card>
      <Card.Header
        title="This is title"
        thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
        extra={<span>this is extra</span>}
      />
      <Card.Body>
        <div>This is content of `Card`</div>
      </Card.Body>
      <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
    </Card>
    <WhiteSpace size="lg" />
  </WingBlank>
  <Icon type="check-circle" />
  <NavBar leftContent="返回"
                mode="light"
                onLeftClick={() => console.log('onLeftClick')}
                rightContent={[
        <Icon key="1" type="ellipsis" />,
      ]}
        >个人维度</NavBar>

    </div>
  );
}

IndexPage.propTypes = {

};

export default connect()(IndexPage);

启动项目：

npm start

效果如下：

还有一个配置是：(仅供参考)

配置支持ICON，添加 webpack.config.js 的方式。这个配置有所保留，这是参考别的博客的做法，但是我没有配置也可以使用ICON

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;
}

dva+antd mobile搭建移动端的项目

猜你喜欢