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;

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

以上关于P22：后台管理系统开发01-开发环境搭建的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。