UI解决方案

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

---

按照下面步骤执行即可：

1. 创建应用：

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

2. 启动应用

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

3. 安装antd

   $ yarn add antd
   

4. 修改项目文件使之引入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;
   }
   
   ...
   

5. 打开项目目录，运行下面启动命令，即可看到页面有个button(antdesign样式的button)

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

---

• 参考链接：
  • 查看原文 >>
  • 知识图谱 >>
  • ant.design官网
  • create-react-app 官网
  • create-react-app 教程
  • create-react-app 源码