dva与create-react-app的结合使用
dva与我们的create-react-app创建的两款脚手架是我们写react项目的两款优秀框架,之前一种使用create-react-app这款脚手架进行开发。然后这个框架美中不足的是redux方面着实令人书写麻烦 然而dva框架就对其进行了封装改良 使其看起来vuex相似度十分高 下面给大家介绍下用这两个框架结合起来开发的步骤吧
首先利用create-react-app生成一个脚手架 然后下载一个dva和history包
接着把脚手架生成的src全部删掉 用我们自己的项目目录进行开发
首先 建立一个index.js文件夹 作为我们项目的主入口
1 import dva from "dva"; 2 import App from "./App" 3 4 //注意这种引入方式已经报销 在控制台会报警告 5 // import createHistory from 'history/createBrowserHistory'; 6 7 //这种为history路由展示方式 8 //const createHistory=require("history").createBrowserHistory 9 10 //这种为hash路由展示方式 11 const createHistory=require("history").createHashHistory 12 13 //下面是两种注入方式 14 const app = dva({ 15 history: createHistory(), 16 }); 17 18 //const app=dva(createHistory); 19 20 app.router(App) 21 22 app.start('#root');
然后建立一个App.jsx作为我们项目路由的主出口文件
1 import React,{Suspense} from 'react' 2 3 import {Router} from "dva/router" 4 5 import RouteView from "./routes/RouteView" 6 import RouteConfig from "./routes/RouteConfig" 7 8 //注意这里一定要注入history不然页面展示不出来 而且是结构出来的history 9 function App({history}){ 10 return <Router history={history}> 11 <Suspense fallback={<div>loading...</div>}> 12 <RouteView children={RouteConfig}></RouteView> 13 </Suspense> 14 15 </Router> 16 } 17 18 export default App
为什么使用这个App.jsx呢?
---原因当然是想使用路由表了 为了让其与vue项目相似度更高些哈哈 下面展示下个人封装的两个路由表
RouteView
1 import React, { Component } from 'react' 2 3 import {Switch,Redirect,Route} from "dva/router" 4 5 export default class RouteView extends Component { 6 render() { 7 return ( 8 <Switch> 9 {this.props.children.map((item,index)=>{ 10 if(item.redirect){ 11 return <Redirect key={index} from={item.path} to={item.redirect}></Redirect> 12 }else{ 13 return <Route key={index} path={item.path} render={(props)=>{ 14 return <item.component children={item.children} {...props}></item.component> 15 }}></Route> 16 } 17 })} 18 </Switch> 19 ) 20 } 21 }
RouteConfig
1 /* 2 * @Author: chenqiang 3 * @Date: 2019-08-16 10:59:42 4 * @Last Modified by: chenqiang 5 * @Last Modified time: 2019-08-17 20:19:41 6 * 路由配置表 7 */ 8 import React from "react"; 9 const RouteConfig=[ 10 { 11 path:"/main", 12 component:React.lazy(()=>import("@/views/main/index.jsx")), 13 children:[ 14 { 15 path:"/main/home", 16 component:React.lazy(()=>import("@/views/main/home/index.jsx")) 17 },{ 18 path:"/main", 19 redirect: "/main/home" 20 } 21 ] 22 }, { 23 path:"/login", 24 component:React.lazy(()=>import("@/views/login/index.jsx")) 25 },{ 26 path:"/register", 27 component:React.lazy(()=>import("@/views/register/index.jsx")) 28 },{ 29 path:"/", 30 redirect:"/main" 31 } 32 ] 33 34 export default RouteConfig;
然后此时我们就可以放心大胆的yarn start运行我们的项目了
很令人无语的是控制台爆出了这么一个警告 虽然不影响我们的代码执行,但是有强迫症的人来说看见这篇警告总是非常不爽的一件事
于是就各种查阅资料进行取消这个警告
先说下这个警告的意思吧 说第一种引入的方式已被废除让我们用下面哪种引入方式进行引入 然后是不是很神奇呢 ,我明明没有这样
引入过为什么给我报出来了呢??? 答案在下面===>
打开我们的node_modulex 找到我们dva包 打开下面这个文件
然后在里面就会有哪种方式的引入 将其更改掉就好了
美中不足的是每次重新下包就会给你自动改回去~~~
剩下的就可以放心大胆的撸代码了 然后下面在贴一个antd的按需加载
建造一个.babelrc文件 内容如下
1 { 2 "presets": [ 3 "react-app" 4 ], 5 "plugins": [ 6 [ 7 "import", 8 { 9 "libraryName": "antd", 10 "libraryDirectory": "es", 11 "style": "css" // `style: true` 会加载 less 文件 12 } 13 ] 14 ] 15 }
注意package.json 不能再有babelrc这个字段了 不然会报错
原文地址:https://www.cnblogs.com/cq1715584439/p/11372363.html
- 使用librtmp推流/拉流
- JavaScript 正则表达式入门教程
- 读书笔记-JavaScript面向对象编程(三)
- 视频比特率与分辨率
- 译文 | 简明 TensorFlow 教程:所有的模型
- 基于 Ubuntu 搭建 VNC 远程桌面服务
- 搭建 FTP 文件服务
- linux平台下的写文件刷新
- MySQL NDB Cluster实战
- 译文 | 简明 TensorFlow 教程:混合模型
- 利用SetConsoleTextAttribute函数设置控制台颜色
- python笔记:#001#python简介
- python笔记:#002#第一个python程序
- python笔记:#003#PyCharm 的初始设置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python实现图片识别汽车功能
- Mac下Anaconda的安装和使用教程
- linux ubuntu中安装、卸载和删除python-igraph的方法教程
- python实现汽车管理系统
- tp5框架基于ajax实现异步删除图片的方法示例
- Python3 jupyter notebook 服务器搭建过程
- PHP图像处理 imagestring添加图片水印与文字水印操作示例
- CentOS6.9下NFS服务安装配置教程
- Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
- PHP 枚举类型的管理与设计知识点总结
- Linux静态链接库使用类模板的快速排序算法
- TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
- php post换行的方法
- apache实现部署多个网站(一个ip部署多域名)的方法详解
- windows7 32、64位下python爬虫框架scrapy环境的搭建方法