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

看到下图这个效果就是生效了