React antd 安裝配置按需加載

Create React App是FaceBook的React團隊官方出的一個構(gòu)建React單頁面應(yīng)用的腳手架工具。它本身集成了Webpack囚痴,并配置了一系列內(nèi)置的loader和默認的npm的腳本,是用React 創(chuàng)建新的單頁面應(yīng)用的最佳方式。

安裝React

第一種方法

  • 全局安裝react腳手架
npm install -g create-react-app   // 等待其安裝
  • 新建React項目
create-react-app my-app
cd my-app
npm start

第二種方法

  • 應(yīng)用npm5.2+ 附帶的package運行工具 npx 創(chuàng)建
    你需要在你的機器上安裝 Node >= 8.10 和 npm >= 5.6
npx create-react-app my-app
cd my-app
npm start

如果你先全局安裝了npm install -g create-react-app 在應(yīng)用 npx create-react-app my-app ,創(chuàng)建出來的應(yīng)用肯能會缺少很多內(nèi)容,如script 相關(guān)等等蟋定,這時可以先卸載、刪除 create-react-app草添,npm uninstall -g create-react-app ,在直接從來一遍第一種方法或是第二種方法驶兜,如果你不確定當前版本是否最新,也可以如上远寸。如果卸載的不干凈促王,可以刪除文件,如下:

 which create-react-app
->/usr/local/bin/create-react-app
rm -rf /usr/local/bin/create-react-app

antd 按需加載

  • 用create-react-app創(chuàng)建項目后,如果需要第三方的插件庫而晒,需要配置webpack配置文件,步驟如下:
    1阅畴、運行npm run eject暴露出webpack的配置文件倡怎,項目會添加config和scripts文件夾。
    2、安裝完antd和babel-plugin-import后监署,修改根目錄下的package.json babel處颤专,在persets后面添加
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 會加載 less 文件
    }]
  ]
}
  • 安裝antd
cnpm i antd -S
  • 安裝babel-plugin-import
cnpm i babel-plugin-import -D

3、運行npm start钠乏,在文件中按需引入antd組件

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <br/>
        <DatePicker />
      </header>
    </div>
  );
}
export default App;

參考

http://www.reibang.com/p/77bf3944b0f4

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末栖秕,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子晓避,更是在濱河造成了極大的恐慌簇捍,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俏拱,死亡現(xiàn)場離奇詭異暑塑,居然都是意外死亡,警方通過查閱死者的電腦和手機锅必,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進店門事格,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人搞隐,你說我怎么就攤上這事驹愚。” “怎么了劣纲?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵逢捺,是天一觀的道長。 經(jīng)常有香客問我味廊,道長蒸甜,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任余佛,我火速辦了婚禮柠新,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘辉巡。我一直安慰自己恨憎,他們只是感情好,可當我...
    茶點故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布郊楣。 她就那樣靜靜地躺著憔恳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪净蚤。 梳的紋絲不亂的頭發(fā)上钥组,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天,我揣著相機與錄音今瀑,去河邊找鬼程梦。 笑死点把,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的屿附。 我是一名探鬼主播郎逃,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼挺份!你這毒婦竟也來了褒翰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤匀泊,失蹤者是張志新(化名)和其女友劉穎优训,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體探赫,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡型宙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了伦吠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片妆兑。...
    茶點故事閱讀 38,643評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖毛仪,靈堂內(nèi)的尸體忽然破棺而出搁嗓,到底是詐尸還是另有隱情,我是刑警寧澤箱靴,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布腺逛,位于F島的核電站,受9級特大地震影響衡怀,放射性物質(zhì)發(fā)生泄漏棍矛。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一抛杨、第九天 我趴在偏房一處隱蔽的房頂上張望够委。 院中可真熱鬧,春花似錦怖现、人聲如沸茁帽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽潘拨。三九已至,卻和暖如春饶号,著一層夾襖步出監(jiān)牢的瞬間铁追,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工茫船, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留脂信,地道東北人癣蟋。 一個月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像狰闪,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子濒生,可洞房花燭夜當晚...
    茶點故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容