UI解决方案

2018-12-11 本文已影响32人 fanlehai

简介：使用[create-react-app] + [ant-design]来解决UI问题；
learn-anything | 2018年12月11日21:18:30

按照下面步骤执行即可：

创建应用：

$ npm install -g create-react-app yarn
$ create-react-app antd-demo
$ cd antd-demo

启动应用

$ yarn start
// 此时打开下面链接即可访问：
http://localhost:3000/.

安装antd
```
$ yarn add antd
```

修改项目文件使之引入antd库：

打开项目的src/App.js文件，修改如下内容：

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

打开项目的src/App.css文件，在第一行加入

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

打开项目目录，运行下面启动命令，即可看到页面有个button(antdesign样式的button)
```
$ yarn start
// 此时打开下面链接即可访问：  
http://localhost:3000/. 
```

参考链接：

UI解决方案

按照下面步骤执行即可：

猜你喜欢

热点阅读