基于Ant Design UI框架的React项目

青旅半醒 2022-05-31 13:28 358阅读 0赞

# 概述 #

这款基于React开发的UI框架，界面非常简洁美观，在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/12205.html][http_www.demodashi.com_demo_12205.html] ####

#### 一、安装webstorm + Noje.js(全局安装) ####

详细安装这里略过

#### 二、全局安装create-react-app脚手架 ####

用管理员身份运行cmd，输入：

npm install -g create-react-app yarn

![image.png][]

成功！

#### 三、创建React项目antd-demo1 ####

继续在cmd命令窗口输入：

create-react-app antd-demo1

（因为之前已经创建过一个antd-demo，此处的antd-demo1是项目名称）

![image.png][image.png 1]

![image.png][image.png 2]

![image.png][image.png 3]

如上图，则创建成功！

#### 四、引入Ant Design组件库 ####

cmd命令进入项目根目录：

yarn add antd

![image.png][image.png 4]

如图引入成功！

#### 五、打开webstorm，导入antd-demo1项目 ####

![image.png][image.png 5]

#### 六、项目启动 ####

打开cmd，进入项目位置，输入：

npm start

![image.png][image.png 6]

![image.png][image.png 7]

网页自动打开，如图：

![image.png][image.png 8]

项目基本构建完成！

#### 七、创建自己的页面 ####

1. 在src目录下创建一个Home文件夹用来存放自己的代码

![image.png][image.png 9]

2. 在myIndex.js页面添加如下代码：

import React,{Component} from 'react';
            import { Layout, Menu, Breadcrumb, Icon } from 'antd';
            import 'antd/dist/antd.css';
            import logo from '../logo.svg';
            import './myCss.css'
            const { Header, Content, Footer, Sider } = Layout;
            
            //自定义组件SiderDemo
            class SiderDemo extends Component {
                state = {
                    collapsed: false,
                    mode: 'inline',
                };
            
                toggle = () => {
                    this.setState({
                        collapsed: !this.state.collapsed,
                    });
                }
            
                render() {
                    return (
                        <Layout>
                            <Sider
                                trigger={null}
                                collapsible
                                collapsed={this.state.collapsed}
                            >
                                <div className="logo" />
                                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                                    <Menu.Item key="1">
                                        <Icon type="user" />
                                        <span className="nav-text">nav 1</span>
                                    </Menu.Item>
                                    <Menu.Item key="2">
                                        <Icon type="video-camera" />
                                        <span className="nav-text">nav 2</span>
                                    </Menu.Item>
                                    <Menu.Item key="3">
                                        <Icon type="upload" />
                                        <span className="nav-text">nav 3</span>
                                    </Menu.Item>
                                </Menu>
                            </Sider>
                            <Layout>
                                <Header style={
        { background: '#000', padding: 0 }}>
                                    <span style={
        {color:'#fff', paddingLeft:'2%', fontSize:'1.4em'}}>
                                        <Icon
                                            className="trigger"
                                            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                            onClick={this.toggle}
                                            style={
        {cursor: 'pointer'}}
                                        />
                                    </span>
                                    <span style={
        {color:'#fff', paddingLeft:'2%', fontSize:'1.4em'}}>Information Management System</span>
                                    <span style={
        {color:'#fff', float:'right', paddingRight:'1%'}}>
                                        <img src={logo} className="App-logo" alt="logo" />
                                    </span>
                                </Header>
                                <Content style={
        { margin: '0 16px' }}>
                                    <Breadcrumb style={
        { margin: '12px 0' }}>
                                        <Breadcrumb.Item>User</Breadcrumb.Item>
                                        <Breadcrumb.Item>Bill</Breadcrumb.Item>
                                    </Breadcrumb>
                                    <div style={
        { padding: 24, background: '#fff', minHeight: 780 }}>
            
                                    </div>
                                </Content>
                                <Footer style={
        { textAlign: 'center' }}>
                                    Ant Design ©2016 Created by Ant UED
                                </Footer>
                            </Layout>
                        </Layout>
                    );
                }
            }
            
            //输出组件
            export default SiderDemo;

3. 在myCss页面添加

.App-logo {
                animation: App-logo-spin infinite 10s linear;
                height: 60px;
            }
            
            @keyframes App-logo-spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            
            .logo {
                height: 32px;
                background: #333;
                border-radius: 6px;
                margin: 16px;
            }
            
            .ant-layout-sider-collapsed .anticon {
                font-size: 16px;
            }
            
            .ant-layout-sider-collapsed .nav-text {
                display: none;
            }

4. 修改src\\index.css内容

body {
              margin: 0;
              padding: 0;
              font-family: sans-serif;
            }
            @import "./Home/myCss.css";/*引入自己写的css样式**/

5. 修改src\\index.js内容

import React from 'react';
            import ReactDOM from 'react-dom';
            import './index.css';//引入样式
            import SiderDemo from './Home/myIndex';//引入自己写的组件(class)
            import registerServiceWorker from './registerServiceWorker';
            
            ReactDOM.render(<SiderDemo />, document.getElementById('root'));
            registerServiceWorker();
            //registerServiceWorker就是为react项目注册了一个service worker，
            // 用来做资源的缓存，这样你下次访问时，就可以更快的获取资

#### 八、运行效果 ####

此时如果cmd命令窗口未关闭，网页会自动刷新，如果关闭窗口，请按上述步骤5重新启动项目

![image.png][image.png 10]

成功！

#### 代码下载：[http://www.demodashi.com/demo/12205.html][http_www.demodashi.com_demo_12205.html] ####

#### 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_12205.html]: http://www.demodashi.com/demo/12205.html
[image.png]: /images/20220531/89612687bd03417ab83f36663f2b8a86.png
[image.png 1]: /images/20220531/68fd5e738a28454eb9cac4156ee1e3ea.png
[image.png 2]: /images/20220531/c911a04d89814a66ab9e57bd272cef55.png
[image.png 3]: /images/20220531/8810bd04781c4f3d891ffe944e524e01.png
[image.png 4]: /images/20220531/0aa7a728dfef47b49e8f3fdf38c5cd65.png
[image.png 5]: /images/20220531/6ccfa0c22d7d4933a2f2aa5f939fc556.png
[image.png 6]: /images/20220531/21e9fe83c62d46b38944e9cfa0bfbb80.png
[image.png 7]: /images/20220531/0676148eec7f4d78a555f8acbd018d0e.png
[image.png 8]: /images/20220531/4a68bc35726f488c897f3062b9f31f30.png
[image.png 9]: /images/20220531/d5719ec39a1448f1bf1c1175836229fb.png
[image.png 10]: /images/20220531/37dec65e3e554dc7ad81472319d39819.png