从零开始使用react+Ant Design撸一个后台管理系统(一)

前言

从本篇开始，教大家从零开始使用react+Ant Design做一个后台管理系统，系列文章持续更新，完成之后会把代码发给大家学习参考，话不多说，直接开冲
如果react基础不太好的同学，可以看一下我的react专栏文章回顾一下基础知识：从零入门react系列

1.先来搭个架子—创建项目

这里使用react脚手架搭建项目，并且删掉初始乱七八糟的文件得到一个纯净的react项目
如果不知道怎么操作，查看 使用react脚手架快速搭建项目
下面默认大家已经创建并得到了纯净的react项目

2.准备工作—装些工具

路由和axios

yarn add -D react-router-dom axios # 用yarn安装路由和axios
npm i -D react-router-dom axios # 用npm安装路由和axios

CSS预处理器SCSS

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm i node-sass -D #不指定版本默认下载最新版,可以用@5.0.0指定版本

安装Ant Design

AntDesign是蚂蚁金服开源的一款react-ui的组件库,兼容性很不错,常用的浏览器以及IE11都兼容。(兼容IE11需要polyfiles,它是一个JS库,主要作用是解决兼容问题,解决不同浏览器之间对js实现的一个差异),它还支持服务端渲染(SSR)

cnpm i antd -D

3.开始写项目

定义项目文件结构

开始之前，我们先想好项目的一个布局，创建好文件夹和文件
1.定义components文件夹存放组件，目前内容为头部底部和导航栏
2.定义config文件夹存放目录的内容，因为先不接入接口，写一些死数据在里面
3.定义style文件夹，存放一些样式文件（默认样式，公共样式）

app.js进行布局

先把组件中的footer，header，nav文件下的index.js文件写一下，这里举一个例子：

import React, {
   
    Component } from 'react'

export class Index extends Component {
   
   
  render() {
   
   
    return (
      <div>我是footer</div>
    )
  }
}

export default Index

然后在app.js中引入，进行布局：

import {
   
    Row, Col }