Ant Design 經常使用命令彙總

時間 2019-11-13

原文原文鏈接

Ant Design React

安裝

1. 安裝腳手架工具#

antd-init 是一個用於演示 antd 如何使用的腳手架工具，真實項目建議使用 dva-cli。javascript

$ npm install antd-init -g

更多功能請參考腳手架工具和開發工具文檔。css

除了官方提供的腳手架，您也可使用社區提供的腳手架和範例：html

antd-adminjava

reactSPAnode

react-redux-antd by Justin-lureact

react-redux-antd by okoalagit

react-antd-admines6

react-antd-redux-router-startergithub

react-redux-antd-starterweb

更多腳手架能夠查看腳手架市場

2. 建立一個項目#

使用命令行進行初始化。

$ mkdir antd-demo && cd antd-demo $ antd-init

antd-init 會自動安裝 npm 依賴，如有問題則可自行安裝。

若安裝緩慢報錯，可嘗試用 cnpm 或別的鏡像源自行安裝：rm -rf node_modules && cnpm install。

3. 使用組件#

腳手架會生成一個 Todo 應用實例（一個頗有參考價值的 React 上手示例），先無論它，咱們用來測試組件。

直接用下面的代碼替換 index.js 的內容，用 React 的方式直接使用 antd 組件。

import React from 'react'; import ReactDOM from 'react-dom'; import { LocaleProvider, DatePicker, message } from 'antd'; // 因爲 antd 組件的默認文案是英文，因此須要修改成中文 import zhCN from 'antd/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); class App extends React.Component { constructor(props) { super(props); this.state = { date: '', }; } handleChange(date) { message.info('您選擇的日期是: ' + date.toString()); this.setState({ date }); } render() { return ( <LocaleProvider locale={zhCN}> <div style={{ width: 400, margin: '100px auto' }}> <DatePicker onChange={value => this.handleChange(value)} /> <div style={{ marginTop: 20 }}>當前日期：{this.state.date.toString()}</div> </div> </LocaleProvider> ); } } ReactDOM.render(<App />, document.getElementById('root'));

你能夠在左側菜單選用更多組件。

4. 開發調試#

一鍵啓動調試，訪問 http://127.0.0.1:8000 查看效果。

$ npm start

5. 構建和部署#

$ npm run build

入口文件會構建到 dist 目錄中，你能夠自由部署到不一樣環境中進行引用。

Ant Design Pro安裝#

有兩種方式進行安裝：

直接 clone git 倉庫#

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project $ cd my-project

使用命令行工具#

你可使用集成化的命令行工具 ant-design-pro-cli。

$ npm install ant-design-pro-cli -g $ mkdir my-project && cd my-project $ pro new # 安裝腳手架

目錄結構#

咱們已經爲你生成了一個完整的開發框架，提供了涵蓋中後臺開發的各種功能和坑位，下面是整個項目的目錄結構。

├── mock                     # 本地模擬數據 ├── public │ └── favicon.ico # Favicon ├── src │ ├── assets # 本地靜態資源 │ ├── common # 應用公用配置，如導航信息 │ ├── components # 業務通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用佈局 │ ├── models # dva model │ ├── routes # 業務頁面入口和經常使用模板 │ ├── services # 後臺接口服務 │ ├── utils # 工具庫 │ ├── g2.js # 可視化圖形配置 │ ├── theme.js # 主題配置 │ ├── index.ejs # HTML 入口模板 │ ├── index.js # 應用入口 │ ├── index.less # 全局樣式 │ └── router.js # 路由入口 ├── tests # 測試工具 ├── README.md └── package.json

本地開發#

安裝依賴。

$ npm install

若是網絡情況不佳，可使用 cnpm 進行加速。

$ npm start

啓動完成後會自動打開瀏覽器訪問 http://localhost:8000，你看到下面的頁面就表明成功了。

1. 建立一個項目#

能夠是已有項目，或者是使用 dva / create-react(-native)-app 新建立的空項目，你也能夠從官方示例腳手架裏拷貝並修改

參考更多官方示例集或者你能夠利用 React 生態圈中的各類腳手架

2. 安裝#

$ npm install antd-mobile --save

3. 使用#

Web 使用方式

React Native 使用方式

入口頁面 (html 或模板) 相關設置：

引入 FastClick 而且設置 html meta (更多參考 #576)

引入 Promise 的 fallback 支持 (部分安卓手機不支持 Promise)

<!DOCTYPE html> <html> <head> <!-- set `maximum-scale` for some compatibility issues --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <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></body> </html>

組件使用實例：

import { Button } from 'antd-mobile'; ReactDOM.render(<Button>Start</Button>, mountNode);

引入樣式：

import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less'

按需加載#

注意：強烈推薦使用。

下面兩種方式均可以只加載用到的組件，選擇其中一種方式便可。

使用 babel-plugin-import（推薦）。

// .babelrc or babel-loader option { "plugins": [ ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 會加載 less 文件 ] }

而後只需從 antd-mobile 引入模塊便可，無需單獨引入樣式。

// babel-plugin-import 會幫助你加載 JS 和 CSS import { DatePicker } from 'antd-mobile';

手動引入

import DatePicker from 'antd-mobile/lib/date-picker'; // 加載 JS import 'antd-mobile/lib/date-picker/style/css'; // 加載 CSS // import 'antd-mobile/lib/date-picker/style'; // 加載 LESS