React--后台管理系统--项目框架的搭建

设置淘宝镜像

初始化项目

yarn init -y npm init -y

下载项目的所有声明的依赖

yarn npm install yarn与npm 使用效果相同

项目及开发

使用create-react-app(脚手架)搭建项目

npm install -g creact-react-app 全局下载工具

creact-react-app react-admin 下载模板项目，名称为react-admin

cd react-admin

npm start 访问localhost:3000

1.下载组件库包 yarn add antd

2.实现组件的按需打包

1)下载依赖模块 yarn add react-app-rewired customize-cra babel-plugin-import

2)定义加载配置的js模块：config-overrides.js const {override, fixBabelImports} = require('customize-cra');

module.exports = override(

// 针对antd实现按需打包，根据import来打包（使用的babel-plugin-import）名字只需import引入即可

fixBabelImports('import', {

　　libraryName: 'antd',

　　libraryDirectory: 'es',

　　style: 'css', // 自动打包相关的样式

}),

);

3)修改配置:package.json--删掉原来的配置

"scripts": {

"start": "react-app-rewired start",

"build": "react-app-rewired build",

"test": "react-app-rewired test",

"eject": "react-scripts eject" },

删掉下面的--下面的不会读取config-overrides.js文件--不会按需加载

"scripts": { "start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject" },

这样可以注释掉index引入的全部样式

// import 'antd/dist/antd.min.css' // 引入antdcss样式注释掉，按需加载

自定义antd主题

下载工具包 yarn add less less-loader

修改config-overrides.js

const {override, fixBabelImports, addlessLoader} = require('customize-cra');

module.exports = override( // 针对antd实现按需打包，根据import来打包（使用的babel-plugin-import）名字只需import引入即可 fixBabelImports('import', {

libraryName: 'antd',

libraryDirectory: 'es',

style: true, // 自动打包相关的样式 }),

 addLessLoader({
    javascriptEnabled: true,
    modifyVars: {'@primary-color': '#1DA57A'}, //颜色
 }),

);

引入路由

下载路由包 yarn add react-router-dom