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
相关文章
- Linux后台运行和关闭jar项目
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
- c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码,java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法(ajax调用) Linq To Json SqlServer 递归查询
- Asp.Net Core 2.0 项目实战(10) 基于cookie登录授权认证并实现前台会员、后台管理员同时登录
- 美多后台管理和项目环境搭建
- Github上 10 个开源免费且优秀的后台控制面板
- 后台开发:核心技术与应用实践3.6 本章小结
- 「基于Python技术的智慧中医商业项目」基于Django的Manage管理后台展示
- Python个人博客项目-7.后台控制管理应用开发
- vue实战入门后台篇十:springboot+mybatis实现网站后台-项目整合发布测试
- ThinkPHP6项目基操(11.实战部分 部署后台静态页面模板及后台登录页面)
- highcharts 结合phantomjs纯后台生成图片
- 织梦cms忘记后台登录密码的三种解决方法
- ExtJs 4.2 treePanel 点击树节点 传送参数到后台(多个参数)
- 谷粒学院——Day05【后台系统前端项目创建、讲师管理模块前端开发】