dva与我们的create-react-app创建的两款脚手架是我们写react项目的两款优秀框架,之前一种使用create-react-app这款脚手架进行开发。然后这个框架美中不足的是redux方面着实令人书写麻烦 然而dva框架就对其进行了封装改良 使其看起来vuex相似度十分高 下面给大家介绍下用这两个框架结合起来开发的步骤吧

  首先利用create-react-app生成一个脚手架 然后下载一个dva和history包

接着把脚手架生成的src全部删掉 用我们自己的项目目录进行开发

  首先 建立一个index.js文件夹 作为我们项目的主入口

 import dva from "dva";
import App from "./App" //注意这种引入方式已经报销 在控制台会报警告
// import createHistory from 'history/createBrowserHistory'; //这种为history路由展示方式
//const createHistory=require("history").createBrowserHistory //这种为hash路由展示方式
const createHistory=require("history").createHashHistory //下面是两种注入方式
const app = dva({
history: createHistory(),
}); //const app=dva(createHistory); app.router(App) app.start('#root');

然后建立一个App.jsx作为我们项目路由的主出口文件

 import React,{Suspense} from 'react'

 import {Router} from "dva/router"

 import RouteView from "./routes/RouteView"
import RouteConfig from "./routes/RouteConfig" //注意这里一定要注入history不然页面展示不出来 而且是结构出来的history
function App({history}){
return <Router history={history}>
<Suspense fallback={<div>loading...</div>}>
<RouteView children={RouteConfig}></RouteView>
</Suspense> </Router>
} export default App

为什么使用这个App.jsx呢?

  ---原因当然是想使用路由表了  为了让其与vue项目相似度更高些哈哈   下面展示下个人封装的两个路由表

RouteView

 import React, { Component } from 'react'

 import {Switch,Redirect,Route} from "dva/router"

 export default class RouteView extends Component {
render() {
return (
<Switch>
{this.props.children.map((item,index)=>{
if(item.redirect){
return <Redirect key={index} from={item.path} to={item.redirect}></Redirect>
}else{
return <Route key={index} path={item.path} render={(props)=>{
return <item.component children={item.children} {...props}></item.component>
}}></Route>
}
})}
</Switch>
)
}
}

RouteConfig

 /*
* @Author: chenqiang
* @Date: 2019-08-16 10:59:42
* @Last Modified by: chenqiang
* @Last Modified time: 2019-08-17 20:19:41
* 路由配置表
*/
import React from "react";
const RouteConfig=[
{
path:"/main",
component:React.lazy(()=>import("@/views/main/index.jsx")),
children:[
{
path:"/main/home",
component:React.lazy(()=>import("@/views/main/home/index.jsx"))
},{
path:"/main",
redirect: "/main/home"
}
]
}, {
path:"/login",
component:React.lazy(()=>import("@/views/login/index.jsx"))
},{
path:"/register",
component:React.lazy(()=>import("@/views/register/index.jsx"))
},{
path:"/",
redirect:"/main"
}
] export default RouteConfig;

然后此时我们就可以放心大胆的yarn start运行我们的项目了

很令人无语的是控制台爆出了这么一个警告  虽然不影响我们的代码执行,但是有强迫症的人来说看见这篇警告总是非常不爽的一件事

于是就各种查阅资料进行取消这个警告

  先说下这个警告的意思吧  说第一种引入的方式已被废除让我们用下面哪种引入方式进行引入  然后是不是很神奇呢 ,我明明没有这样

引入过为什么给我报出来了呢???   答案在下面===>

打开我们的node_modulex  找到我们dva包 打开下面这个文件

然后在里面就会有哪种方式的引入 将其更改掉就好了

美中不足的是每次重新下包就会给你自动改回去~~~

剩下的就可以放心大胆的撸代码了  然后下面在贴一个antd的按需加载

建造一个.babelrc文件  内容如下

 {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}
]
]
}

注意package.json  不能再有babelrc这个字段了  不然会报错

dva与create-react-app的结合使用的更多相关文章

  1. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

  2. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  3. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  4. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  5. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  6. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  7. Create React App 安装less 报错

    执行npm run eject 暴露模块 安装 npm i  less less-loader -D 1.打开 react app 的 webpack.config.js const sassRege ...

  8. [React] Use the Fragment Short Syntax in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...

  9. [React] {svg, css module, sass} support in Create React App 2.0

    create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr  ...

  10. create react app 项目部署在Spring(Tomcat)项目中

    网上看了许多,大多数都是nginx做成静态项目,但是这样局限性太多,与Web项目相比许多服务端想做的验证都很麻烦,于是开始了艰难的探索之路,终于在不经意间试出来了,一把辛酸... 正常的打包就不说了. ...

随机推荐

  1. react-native连接华为真机

    android studio的设置:下载google USB Driver 手机部分1.找到手机开发者模式 设置->系统->关于手机->版本号(多次点击出现开发者模式) 提示你已在开 ...

  2. Blow up the city

    Blow up the city 时间限制: 1 Sec  内存限制: 128 MB 题目描述 Country A and B are at war. Country A needs to organ ...

  3. Luogu P1314 聪明的质监员(二分+前缀和)

    P1314 聪明的质监员 题意 题目描述 小\(T\)是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有\(n\)个矿石,从\(1\)到\(n\)逐一编号,每个矿石都有自己的重量\(w_i\) ...

  4. python \r \t \n 各种转义字符

    转义字符 描述 \(在行尾时) 续行符 \\ 反斜杠符号 \’ 单引号 \” 双引号 \a 响铃 \b 退格(Backspace) \e 转义 \000 空 \n 换行 \v 纵向制表符 \t 横向制 ...

  5. 关于node中 require 和 ES6中export 、export default的总结

    nodejs中 require 方法的加载规则 方法的加载规则 1. 优先从缓存中加载 2. 核心模块 3. 路径形式的模块 4. 第三方模块 一.优先从缓存中加载 main.js:执行加载a.js模 ...

  6. 配置android studio环境-Hello world

    运行hello world demo 运行D:\Program Files\Android\Android Studio\bin 选择创建一个项目 出现一系列的选择 如果没有出现下列问题,直接跳过 备 ...

  7. 洛谷2593 [ZJOI2006]超级麻将——可行性dp

    题目:https://www.luogu.org/problemnew/show/P2593 发现三个连续牌的影响范围只有3.相同牌的影响范围只有1之后就可以dp了. O(100^7)T飞. #inc ...

  8. web前端学习(四)JavaScript学习笔记部分(6)-- js内置对象

    1.JS内置对象-什么是对象 1.1.什么是对象: JavaScript中的所有事物都是对象:字符串.数值.数组.函数 每个对象带有属性和方法 JavaScript允许自定义对象 1.2.自定义对象: ...

  9. poj 2398 Toy Storage(计算几何 点线关系)

    Toy Storage Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4588   Accepted: 2718 Descr ...

  10. nginx在win系统下的安装配置与tomcat集成springmvc框架

    先来一个常用命令 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止 ...