react-antd JYadmin 封裝的優秀后台模板集成方案("^1.0.0") -- 第1節：【react+antd 基礎框架搭建（登錄）】

版本：【 "JYadmin-react-antd": "^1.0.0"】

版權所有：微信公眾號【微新悅】

原文鏈接： https://www.weixinyue.cn/frontCourses/#/JYAdminReactAntd1.0/1（閱讀效果更佳）

 文章說明：本課題會帶大家從零到一打造一套基於react+antd封裝的優秀后台模板集成方案

 

第一節：【react+antd 基礎框架搭建（登錄）】

 

第一步：使用create-react-app腳手架創建一個項目

 

create-react-app my-project

　　

第二步：修改端口號

 

 "start": "set PORT=9000 && react-scripts start"

　　說明：

在根目錄【package.json】的【scripts】對象里修改【start】為上述命令

 

第三步：配置@符號-資源路徑指向

 

（1）、執行 npm run eject

（2）、在config/webpack.config.js文件的alias中插入代碼

（3）、'@': path.resolve('src')

 

說明：

運行npm run eject此命令會把 react-scripts 封裝的一些webpack配置等全部解壓到項目目錄，項目結構中

 

第四步(1)：配置路由模塊

cnpm install --save react-router react-router-dom

　　第四步(2)：修改根目錄App.js代碼

 

 

 ui效果：如下圖

 

 第五步：編寫后台管理系統登錄頁（ES6 class 來定義一個組件）

 

第五步(1)、class組件基本構成

 

 

第五步(2)、引入antd 按需加載

cnpm install --save antd
cnpm i babel-plugin-import -D

　　交互效果：如下視頻

1、css使用行內元素 js文件配置
2、使用antd form表單以及實現表單輸入校驗