ant design在Mac下的简单搭建使用

本文简要介绍如何从0搭建一个ant design项目, 更详细的说明请查阅官方文档:https://ant.design/docs/react/introduce-cn

1. antd 简介

2. 环境要求

1. node 环境

2. npm

3. brew

4. 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

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

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