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 DesignReact 實現,開發和服務於企業級後臺產品。

特性

  • 提煉自企業級中後臺產品的交互語言和視覺風格。
  • 開箱即用的高質量 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';

引入成功後頁面樣式變成入下圖所示:
引入antd後的樣式

5. 完成

一個antdreact項目就搭建完成了
然後就可以通過導入的方式直接使用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

看到下圖這個效果就是生效了
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章