idea使用ant design, create-react-app的使用

下載下傳安裝node npm

進入node 選擇Windows 安裝包 (.msi) 64bit 下載下傳 安裝

使用msi會配置好環境變量path，友善

所有指令，基本都是在項目路徑下，或者直接在idea的terminal裡

//打開指令提示如測試安裝是否成功
node -v
npm -v
           

全局安裝create-react-app yarn

npm install -g create-react-app yarn

//檢視全局安裝路徑
npm root -g
           

建立項目工程

create-react-app antd-demo
           

完成後，使用idea打開antd-demo目錄，可以在idea的terminal使用指令

//直接啟動，因為create-react-app已經配置好了項目，看到react畫面就好了，http://localhost:3000/
npm start
           

項目結構

npm start啟動後不要關閉（ctrl + c），直接寫代碼，直接頁面自動重新整理(修改public/index.html 的 title 試試)，生效

點選idea的terminal左側+ ，新開一個指令視窗

//加入ant design
yarn add antd
           

src下是寫react代碼，public是頁面檔案

使用ant design

//  src/index.js
注釋
// ReactDOM.render(<App />, document.getElementById('root'));

上面添加import
import { DatePicker, Button ,Pagination } from 'antd';
import 'antd/dist/antd.css';

檔案末尾，添加渲染
ReactDOM.render(<DatePicker />, document.getElementById('root2'));
ReactDOM.render(
    <div>
        <Button type="primary">Primary</Button>
        <Button>Default</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="danger">Danger</Button>
    </div>,
    document.getElementById('root3'));
ReactDOM.render(<Pagination defaultCurrent={1} total={50} />, document.getElementById('root4'));
           

//  public/index.html
<div id="root"></div>下面多加幾個

<div id="root2"></div>
    <div id="root3"></div>
    <div id="root4"></div>
           

自動編譯完成，看看效果

以後使用ant design 就是到 Ant Design, 找到需要的，然後點選右側每個示範的右下角的 <> ,會在下面顯示源代碼

上面的import 是加入，下面主要替換mountNode，就是你要放入哪個dom節點

其他

按需加載

// https://github.com/ant-design/babel-plugin-import
npm install  babel-plugin-import

// .babelrc or babel-loader option  編輯器建立 .babelrc檔案，libraryName: "antd-mobile"
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css" // `style: true` 會加載 less 檔案
    }]
  ]
}

手動引入
import DatePicker from 'antd/lib/date-picker';  // 加載 JS
import 'antd/lib/date-picker/style/css';        // 加載 CSS
// import 'antd/lib/date-picker/style';         // 加載 LESS
           

打包react項目

項目的build目錄下
npm run build
           

靜态伺服器浏覽build目錄

npm install -g serve
serve -s build
           

create-react-app建立的react腳手架項目裡，npm start過程

npm看項目目錄下的package.json，執行scripts節點下的指令

"start": "react-scripts start",
"build": "react-scripts build",
           

package.json  預設build後，加載是從/ 開始，加入下面，可以直接build後，浏覽器通路

"homepage": ".",