【React入门】【React+Router+Redux+Ant Design】【个人中心项目】（2）Ant Design UI框架、Less与CSS Module

Ant Design UI框架、Less与CSS Module

前置知识：开发环境与生产环境

开发环境中部署源码。生产环境所部属的是编译生成的文件。

相比生产环境，开发环境中额外包括了调试和编译中所需要的包。比如本章会提及的babel-plugin-import是在打包编译中使用的，所以只需要安装在开发环境.

此外，开发环境中各类安装的模块保存在node_modules里面。

而生产环境中需要的包已经被编译到了一些js文件里，如下图所示。

这些文件中同时包括基础的运行环境和业务逻辑。

1. 导入并使用antd

1.1 安装

用terminal安装一下antd，现在的版本是antd 4.6.2，Ant Design 4 是2020年刚出的版本，还是比较新的。

npm install antd -S

可以去官网看看antd是啥：Ant Design

每个组件都有示例和使用方法，页底会列出组件的API。

1.2 使用

该写一下之前写的list

原版的app.js以及其中的列表（<ul>）：

import React from 'react';
import {
    BrowserRouter } from 'react-router-dom';
import Router from './router';
//等同于 // import { default as Router } from './router'; 
function App() {
   
    return (
        <BrowserRouter>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/login">Login</a></li>
                <li><a href="/Register">Register</a></li>
            </ul>
            <Router>
            </Router>
        </BrowserRouter>);
} export default App;

step 1:

把修改为，它是从react-router-dom导入的组件。它的“to”属性可以是传入一个location object之类