第一步：使用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;
}