P03: Ant Design 企业级开发UI框架 - 介绍和环境初始化

╰+哭是因爲堅強的太久メ 2023-10-06 20:53 13阅读 0赞

#### 阅读目录 ####

*  阐述
 *  初始化项目
 *  快速生成基本代码结构
 *  安装 \`AntDesign\`

## 阐述 ##

Ant Design 是一套面向企业级开发的UI框架，视觉和动效作的很好。

阿里开源的一套UI框架，它不只支持React，还有 `ng` 和Vue的版本，我认为不论你的前端框架用什么，Ant Design 都是一个不错的选择。习惯性把 AntDesign 简称为 `antd`。 目前有将近5万Star，算是React UI框架中的老大了。

官网为：https://ant.design/index-cn

## 初始化项目 ##

这里我默认你已经看过我的“React16教程”了，所以我认为你这个过程已经了解了知识点，我只是带着你作一遍。

1 如果你没有安装脚手架工具，你需要安装一下：

npm install -g create-react-app

2 直接用脚手架工具创建项目

D:  //进入D盘
    mkdir ReduxDemo   //创建ReduxDemo文件夹
    cd ReduxDemo      //进入文件夹
    create-react-app demo01  //用脚手架创建React项目
    cd demo01   //等项目创建完成后，进入项目目录
    npm  start  //预览项目

这样项目就制作好了，我们删除一下没用的文件，让代码结构保持最小化。

删除 `src` 里边的所有文件，只留一个 `index.js`,并且 `index.js` 文件里也都清空。

## 快速生成基本代码结构 ##

编写 `index.js` 文件，这个文件就是一个基础文件，基本代码也都是一样的。

import React from 'react';
    import ReactDOM from 'react-dom'
    import TodoList from './TodoList'
    
    ReactDOM.render(<TodoList/>,document.getElementById('root'))

编写 `TodoList.js` 文件，这个文件可以用 `Simple React Snippets` 快速生成。  
先输入`imrc`,再输入`ccc`

代码如下：

import React, {
         Component } from 'react';
    class TodoList extends Component {
        
        render() {
         
            return ( 
                <div>Hello World</div>
             );
        }
    }
    export default TodoList;

做完这个，算是项目基本构建完成，可以打开浏览器看一下效果。接下来就可以安装 `Ant DesignUI` 框架了。

![在这里插入图片描述][569cb1596723459091f80550e6396c50.png]

## 安装 `AntDesign` ##

这里使用 `npm` 来进行安装，当然你有可以用 `yarn` 的方式进行安装。

npm install antd --save

yarn的安装方式是:

yarn add antd

如果你的网络情况不好，最好使用 `cnpm` 来进行安装。

等待程序安装完以后，就可以进行使用了。

下节课学习一下如何使用用Ant Design制作UI界面吧。

[569cb1596723459091f80550e6396c50.png]: https://img-blog.csdnimg.cn/569cb1596723459091f80550e6396c50.png