一起來學習Ant Design

當然，都屬於webpack中的基礎知識，但是套上了atool-build這樣乙個殼子，又有點小懵。還好不是很難，嘗試後，很快搞定了，順手也總結一下吧！

一、安裝ant-init

1

npm install antd-init -g

二、建立目錄

1

mkdir antd-demo && cd antd-demo

三、初始化專案

1

antd-init

這裡先引出dva，後續文章我會以實際專案繼續深入**。

四、使用元件

替換index.js

123

4567
891011
1213
1415
1617
1819
2021
2223
2425
26

import react from

'react';
import reactdom from
'react-dom';
import  from
'antd';
class
extends
react.component;}
handlechange(date) );
}render() }>
this.handlechange(value)} />
margintop: 20 }}>當前日期：
div>);}
}

五、開發除錯

1

npm start

訪問：六、構建和部署

1

npm run build

入口檔案會構建到dist目錄中，可以自由部署到不同環境中進行引用。

七、關於webpack配置

webpack.congfig.js檔案：

123

4567
891011
1213
1415
1617
1819
2021

var path = require('path');

var webpack = require('webpack');
module.exports = function(webpackconfig) );
webpackconfig.babel.plugins.push('transform-runtime');
webpackconfig.babel.plugins.push(['import', ]);
// 避免jquery被打包
webpackconfig.externals = ;
// 設定全域性jquery變數
webpackconfig.plugins.push(
new webpack.provideplugin());
return webpackconfig;
};

八、總結

本文簡單的嘗試了乙個antd小例子，只作為入門介紹，**放在這裡demo，至於為什麼用它，大概是對ant design和react的喜愛吧。

九、相關文件

1.ant design

2.atool-build 簡介

3.webpack

一起來學React Refs學習（一）

在dom中我們獲取乙個節點元素只需要getelementbyid即可，那麼在react中該怎麼做呢 定義refs提供了一種訪問dom節點或在render方法中建立的react元素的方法。這是官方的解釋，那麼這段話到底什麼意思呢？意思是說通過refs可以訪問dom節點或者建立react元素 注意是re...

一起來存方法

1.在動態渲染元素的時候，需要邏輯判斷 在迴圈渲染dom元素時，迴圈遍歷中需要邏輯操作，如果不使用模板 1 var addlist function 7 if 條件2 10lists.push list 11 12 id html lists.join 13 這是在看一同事 時，發現她用push和j...

Intel會議準則，一起來學習。

2004年夏天，英特爾 intel 公司的首席執行官 ceo 貝瑞特 craig r.berrett 夫婦到我的辦公室訪問，對我們的全國辦公網的系統設計十分讚賞。談話間，我向他們指了指牆上的中英文的 會議規則 他們一見便高興地跳了起來，要在 會議規則 牌子下合影。原來這個 會議規則 也是intel的...