Ant Design of React在Mac下的簡單搭建使用
Ant Design of React在Mac下的簡單搭建使用
本文簡要介紹如何從0搭建一個ant design項目, 更詳細的說明請查閱官方文檔:https://ant.design/docs/react/introduce-cn
1. Ant Design of React
簡介
- 是
Ant Design
的React
實現,開發和服務於企業級後臺產品。
特性
- 提煉自企業級中後臺產品的交互語言和視覺風格。
- 開箱即用的高質量
React
組件。- 使用
TypeScript
構建,提供完整的類型定義文件。- 全鏈路開發和設計工具體系。
2. 環境要求
1. node
環境
1. 方案一:直接使用安裝包
下載安裝包執行官方網站
2. 方案二:使用brew
安裝
如果沒有brew
環境, 請看第三步
brew install node
檢查是否安裝
node -v
如果有輸出版本號, 則說明成功
2. npm
安裝完node
自帶npm
環境
檢查是否安裝
npm -v
如果有輸出版本號, 則說明成功
3. brew
將下面命令複製到終端
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
腳本會在執行前暫停(按回車確認並繼續),並說明將它將做什麼。高級安裝選項在這裏 (required for OS X Lion 10.7 and below)。
4. yarn
將下面命令複製到終端(需要有brew
的環境, 如果沒有請看上面第三步)
brew install yarn
3. 項目初始化
1. 安裝create-react-app
在命令行中安裝 create-react-app
工具,你可能還需要安裝 yarn
。
npm install -g create-react-app yarn
2. 新建項目
這裏使用的是create-react-app
進行初始化項目
create-react-app projectName
初始化的時候需要網絡, 可能需要配置代理
3. 啓動項目
我們進入初始化生成的目錄然後啓動項目
cd projectName
yarn start
默認端口爲3000
瀏覽器訪問地址 http://localhost:3000/
4. 引入antd(Ant Design)
1. 導入antd依賴
yarn add antd
2. 修改css
文件
修改src/App.css
, 在文件頂部加入@import '~antd/dist/antd.css';
引入成功後頁面樣式變成入下圖所示:
5. 完成
一個antd
的react
項目就搭建完成了
然後就可以通過導入的方式直接使用ant design封裝的組件
例如:
修改 src/App.js
,引入 antd
的按鈕組件
import React, { Component } from 'react';
import logo from './logo.svg';
import { Tag , Button} from 'antd';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Tag color="red">ant design project</Tag>
<Button type="primary">點贊</Button>
<Button type="primary">主頁</Button>
</div>
);
}
}
export default App;
注意, 要使用組件需要先聲明import
看到下圖這個效果就是生效了