改造create-react-app 引入dva和antd
改造create-react-app 引入dva和antd
脚手架搭建项目
先用脚手架把项目搭建
npx create-react-app my-react-a
项目结构
试一下跑起来项目
yarn start
暴露webpack 配置
npm run eject
这边脚手架中的配置就完毕了
将项目改造为dva
引入dva库
- npm install dva -D
改造项目
- src目录下新建models,routes,services,utils文件夹
- 在routes中写三个组件
组件代码如下
import React, { Component } from 'react';class AAA extends Component {render() {debuggerreturn (<div><p>AAA页</p></div>);} }export default AAA;
另外两个组件类似
在model下新建四个文件:aaa.js bbb.js ccc.js 和app.js(app作为全局model使用,将来存放全局变量,如国际化参数,登录用户信息等)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V4fKDllJ-1629276441688)(C:\Users\YC01351\AppData\Roaming\Typora\typora-user-images\image-20210818134045922.png)]
代码如下:
const aaa = {namespace: 'aaa',state: {name:'这是aaa的model'},subscriptions: {},effects: {},reducers: {},};export default aaa;
其他model类似
在src下面创建route.js,用来进行路由控制,
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic'const menuGlobal=[{id:'aaa',pid:'0',name:'aaa页',icon:'user',path: '/', //默认页models: () => [import('./models/aaa')], //models可多个component: () => import('./routes/AAA'),}, {id:'bbb',pid:'0',name:'bbb页',icon:'user',path: '/aaa/bbb',models: () => [import('./models/bbb')], //models可多个component: () => import('./routes/BBB'),}, {id:'ccc',pid:'0',name:'ccc页',icon:'user',path: '/ccc',models: () => [import('./models/ccc')], //models可多个component: () => import('./routes/CCC'),},
];function RouterConfig({ history, app }) {return (<Router history={history}><Switch>{menuGlobal.map(({path,...dynamics},index)=>(<Routekey={index} path={path} exact component={dynamic({app,...dynamics})} />))}</Switch></Router>);
}export default RouterConfig;
改造src目录下的index.js入口文件
import dva from 'dva'; import './index.css'; import createHistory from 'history/createBrowserHistory'// 1. Initialize const app = dva({history:createHistory() });// 2. Plugins // app.use({});// 3. Model app.model(require('./models/app').default);// 4. Router app.router(require('./router').default);// 5. Start app.start('#root');
至此,dva改造完毕
直接 yarn start 就可以把项目跑起来
项目跑起来之后可以改造一下组件,使得各个组件可以通过路由跳转
import React, { Component } from 'react';
import { Link } from 'dva/router';class AAA extends Component {render() {return (<div><p>AAA页</p><Link to={'/aaa/bbb'}>去BBB页</Link></div>);}
}export default AAA;
其他组件类似改造
优化一下资源依赖结构
在utils下新建config.js和index.js两个文件
将路由数组拿到config,js下,注意修改下引入路径,否则会报错
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bjDxYcZM-1629276441692)(C:\Users\YC01351\AppData\Roaming\Typora\typora-user-images\image-20210818141133337.png)]
const menuGlobal=[{id:'aaa',pid:'0',name:'aaa页',icon:'user',path: '/',models: () => [import('../models/aaa')], //models可多个component: () => import('../routes/AAA'),}, {id:'bbb',pid:'0',name:'bbb页',icon:'user',path: '/aaa/bbb',models: () => [import('../models/bbb')], //models可多个component: () => import('../routes/BBB'),}, {id:'ccc',pid:'0',name:'ccc页',icon:'user',path: '/ccc',models: () => [import('../models/ccc')], //models可多个component: () => import('../routes/CCC'),}, ];export default {menuGlobal}
index.js里面引入config.js
import config from './config'export {config }
route.js重新引入依赖
import React from 'react'; import { Router, Route, Switch } from 'dva/router'; import dynamic from 'dva/dynamic'import { config } from './utils/index' const { menuGlobal } = configfunction RouterConfig({ history, app }) {return (<Router history={history}><Switch>{menuGlobal.map(({ path, ...dynamics }, index) => (<Routekey={index}path={path}exactcomponent={dynamic({app,...dynamics})}/>))}</Switch></Router>); }export default RouterConfig;
引入antd组件库
- 安装antd
- cnpm i antd --save
- 引入antd组件的样式
- 方式一:全局一次性引入样式
- 按需加载样式
- 全局引入的方式
- 在src下的index.css目录中直接@import ‘~antd/dist/antd.css’; 引入即可
引入less样式
引入less包
- cnpm install less-loader@7.3.0 --save-dev
- 引入版本过高可能会报错
然后改造webpack
...//添加less,可以仿照项目中对sass的支持 const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; ... //在rules数组中添加如下代码 { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2,sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, }, 'less-loader' ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2, sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, modules: { getLocalIdent: getCSSModuleLocalIdent, }, }, 'less-loader' )}, ...
修改src下面的index.css为index.less
在index中引入index.less
重启项目刷新页面
至此,基本项目改造完毕,可以开发项目了
参考: https://blog.csdn.net/xw505501936/article/details/80621740
改造create-react-app 引入dva和antd相关推荐
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
- Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
- Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
最新文章
- leetcode算法题--对称的二叉树
- 【MM】计划交货成本(Delivery Costs)
- PHP的urlencode
- 浅析Page.LoadTemplate(模板)方法动态获取绑定模板后,通过FindControl获取服务端控件的方法。...
- .NET常用工具类集锦
- .vimrc php,修改home目录下的.vimrc文件,vim配置php高亮显示
- Linux文本界面配置yum源,修改Linux默认语言 配置yum源
- com.mysql.cj.jdbc.Driver这个驱动类
- 东软是如何看待“人与资产”管理的转型
- PHP微信公众开发笔记(一)
- C#学习笔记二: C#类型详解
- ie11兼容性问题,jsp在IE11显示不全问题,ie11覆盖内容问题解决方法
- modbus调试工具开发(1)--windows下编译libmodbus库文件
- 流量控制理论与Sentinel
- 王道2023数据结构笔记
- c#对使用US7ASCII的oracle存取中文的问题
- Leetcode1278
- 没有公网IP,自建网站如何让外网访问?
- 共识算法 —— PoA
- 移动端身份证识别,APP证件信息采集