一直在用ant.design桌面版，現在退出了移動版，必須研究一下，但是這不看不要緊，一看就遇到了好多坑，好多坑···

1.根據官方文件，使用dva腳手架生成專案目錄，這樣簡單一些，如果你喜歡自己建立資料夾的感覺，你也可以自己建立自己的目錄結構。由於是試驗可用性，我就用了dva生成了個目錄結構；

$ dva new mobileApp

建立完成後，已經是npm install過了，所以不需要重新下載依賴。

2.按需載入ant mobile組價的js和css。

首先安裝依賴

$ npm install antd-mobile babel-plugin-import --save

修改roadhog（可以理解為簡化版的webpack）的配置檔案.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" }]
      ]
    }
  }
}

3.配置支援Icon，這個真是很重要的，也是很有用的，在移動端，如果沒有Icon，那是多麼的痛苦；
這個配置在官網說的不是很清楚，首先解釋下，roadhog這個沒有處理Icon的功能，但是他有webpack的介面，也自動尋找專案根目錄下的webpack.config.js檔案，讀取裡面的配置；所以通過在專案根目錄中新增webpack.config.js檔案來配置Icon的svg的loader。（真是神坑啊）

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/assets'),  // 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;
}

這裡配置完了，執行的話，還是不行，你會發現沒有安裝`svg-sprite-loader`，新想這個簡單，直接npm install安裝就好了，安裝結束後，再執行，還是報錯，經錯查資料發現：如果你的ant-mobile的版本是`1.x`的話`svg-sprite-loader`的版本必須是`[email protected]^0.3.1`。
······
可是目前ant mobile的最高版本才是1.6啊親。

所以：

$ npm install svg-sprite-loader@0.3.1 --save-dev

4.配置玩這些，你就可以寫個demo了，但是這裡又出現了問題，為毛我開啟瀏覽器手機模式後，頁面中的字型，圖示都大一倍。機智的我想到的肯定是viewport的問題。所以index.html中的修改：

將生成的publick/index.html檔案中的viewport修改成：

<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no">

好了，這個就可以了。

ant mobile還有個高清方案，這個也是全都是坑，請看下一篇部落格。