P22：后台管理系统开发01-开发环境搭建

前台的主要功能我们已经开发完成了，接下来我们开始制作后台博客的管理界面。后台将采用React Hooks + Ant Design,我们主要会对博客文章的管理和登录系统进行讲解。本文主要是搭建后端开发环境。

用脚手架生成项目

进入项目目录，然后直接使用create-react-app 生成目录，记得生成的目录要全部小写。

create-react-app admin

安装好以后，把项目进行最小化设置（删除/src 下的大部分代码和文件），只留下/src/index.js文件，然后把里边的代码删减成下面的样子。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />,document.getElementById('root'));

最后干净到像下面图片中的样子，

安装和引入 Ant Design

进入/admin文件夹，然后用 npm 进行安装。

npm install antd --save

也可以使用 yarn 来进行安装。

yarn add antd

安装完成后，我们来测试一下是否安装成功，可以在要使用的组件中进行引入代码如下（我这里直接在 App.js 组件下进行测试）。

import { Button } from 'antd';
import 'antd/dist/antd.css';

然后编写一个代码，如果能正常展示，说明我们完成了设置。

import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.css';

function App() {
  return (
    <div className="App">
      <Button type="primary">Hello World</Button>
    </div>
  );
}

export default App;

这时候我们到浏览器中，预览一下结果，如果能成功出现按钮，说明我们的搭建成功了。