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;

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

antd按钮测试

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P22:后台管理系统开发01-开发环境搭建

发表评论

提供最优质的资源集合

立即查看 了解详情