86883a42gy1fgqb9qn599j208c08cwes.jpg

后台管理系统项目起步

一、在码云创建两个仓库，一个前端页面，一个后台假数据，分开创建！因为要实现前后端分离，示例如下图

image.png

二、仓库创建好后，在本地创建一个文件夹名字随意，然后在这个文件夹下面使用 react 脚手架创建一个 react 项目

npx create-react-app 你的项目名

2. 项目创建好后 cd 到项目目录下，然后 code ./ 打开到 vs code里面

三、打开项目目录后，对该目录进行一些修改

1. 删除 src 文件，自己创建一个 src 文件，里面只要有 index.js 即可
2. 删掉 public 文件夹里面多余的东西，保留 index.html 和小图标即可
3. 重写 index.html，将小图标引进去即可 （小图标引不引看个人喜爱）
4. 如何引入小图标？

<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

简写：link: facv 回车即可

四、安装 antd 并配置 antd 的使用环境

ps: 由于 node-sass 用 yarn 不好安装，所以建议使用 npm，可以将 yarn.lock 这个文件删除，将 node-modules 也删除，然后就可以了，删除后，千万要记得初始化！ npm i

npm install --save antd

2. 安装完 antd 后再安装 react-app-rewired customize-cra

npm install --save react-app-rewired customize-cra

3. 安装完上面的东西后，在 package-json 文件下，修改 scripts 脚本，对比图如下

image.png

其实就是把 最下面那条 eject 那条给删了，然后把上面 react-scripts 改为 react-app-rewired

4. 安装一下 babel 插件

npm install --save babel-plugin-import

5. 在项目根目录下创建一个 config-overrides.js 文件，里面的代码如下：

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css',
}),
)

6. 做一个简单的仓库提交 （以上，我们实现了项目的创建以及 antd 的按需引入配置）

注意！提交之前要记得先关联一下远程仓库！关联后就可以提交了

git remote add origin 你第一步建的前端仓库地址

再次注意！第一次提交，要加 -u

git push -u origin master

7. 远程提交后，就可以在远程仓库里面看到我们的东西了，但是我们写代码不要再 master 分支里面去改，我们可以在本地创建一个 develop 分支，可以在该分支上去改代码

1. git checkout -b develop
2. git push -u origin develop

这时，在远程仓库里面也可以看到我们创建的 develop 分支了，为了避免其他合作者在 master 上进行代码操作，我们可以在分支管理上将 develop 分支设置为默认分支，将 master 分支设置为保护分支

8. 启动项目，npm start ，启动后，默认一片空白就对了！

五、在 src 文件夹下对 index.js 进行如下操作

image.png

2. 在 src 文件夹下创建一个 App.js 文件，里面的代码如下

image.png

3. 做一些全局样式的操作，清除浏览器的默认样式，在 src 目录下创建一个 base.scss 文件 （去reset.css里面找，它是一个重置浏览器默认样式的 css ）万能代码如下

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

//== 万能分割线，这里是我根据项目加的，你们看情况=======
html, body, #root {
height: 100%
}

用了记得在 App.js 或者 index.js 下引入

注意！！！ 引入了 scss 文件就需要安装 node-sass

npm install --save-dev node-sass

脚本启动的话，用 yarn 启动也行，没多大影响

4. 可以再进行一个简单的远程仓库提交，以上我们做了项目支持 sacc 的功能

六、选布局

1. antd 里面选一个 layout 布局

 目录结构如下： 
 >src
      >layouts 文件夹
              >BaseLayout.js     基础页面（在右侧那些页面）

2. 将看中的 layout 布局代码复制粘贴到 BaseLayout.js 页面下，并根据项目需要对代码进行修改

3. 由于我们是路由页面，所以我们要在所需的组件下放坑，这就需要我们下载路由

npm install --save-dev react-router-dom

4. 然后再 App.js 引入我们的路由，注意！！！ 哪里要放坑哪里要引入路由和你坑里要放的组件这两样东西 ！！！代码如下

image.png

5. 在 src 下创建一个 page 文件夹，用于存放我们的路由页面，目录结构如下

image.png

6. 在 App.js 页面引入 login 页面，并将它放进坑里， 代码如下

image.png

7. 简单的远程代码提交，以上我们什么都没干，只是做了一些基础路由的处理

七、制作页面左边菜单项

1. 在 antd 中 layout 布局里找到 Menu 组件，复制到 logo下面，这是菜单栏的代码，用之前记得引入，但是这个 layout 布局比较特殊，我们在使用时还要解出他里面的一下 子组件或者孙组件

image.png

2. 由于 Menu 组件没有 href 属性，所以我们可以使用 Link （用link相当于在外面包了一层a标签） 或者编程式导航实现页面跳转，这里我们选择编程式导航，那就给 Menu.Item 加一个点击事件

image.png

image.png