【react框架之dvajs】如何创建一个初始的dva项目工程

dvajs作为react的框架,一度火爆市场,只是新框架层出不穷,也是越做越成熟了,很多老的框架被淹没,使用的越来越少。dva框架还是有不少的公司有项目在使用!

dva项目的搭建步骤

在系统检测是否安装了dva,没有的话就会报错

在这里插入图片描述

全局安装dva

npm install dva-cli -g

检测dva的版本,验证是否安装成功

在这里插入图片描述

dva创建项目
在这里插入图片描述
在这里插入图片描述

npm start

在这里插入图片描述

运行效果

在这里插入图片描述

项目结构

在这里插入图片描述
目前,官网已经不在了,issue已经很久没人回复了,暂时无人在维护!!推荐我们使用UmiJS,我们可以先学习下他这个框架的原理,再去上手umijs就很快。

项目尝试

试着修改首页,可以看出大部分react的语法是通用的。

import React from "react";
import { connect } from "dva";
import styles from "./IndexPage.css";
import PropTypes from "prop-types";function IndexPage({ username, count }) {return (<div className={styles.normal}><h1 className={styles.title}>Yay! Welcome to dva!</h1><div className={styles.welcome} /><div className="demo-container">{username}<p>{count}</p></div></div>);
}IndexPage.defaultProps = {username: "admin",count: "10",
};IndexPage.propTypes = {username: PropTypes.string,count: PropTypes.number,
};export default connect()(IndexPage);

按提示信息,进行项目的对应配置修改,类型校验报错了,但是页面可以正常显示。还是需要按照要求来,不然后续打包会出现各种奇奇怪怪的报错。
在这里插入图片描述

引入antd报错解决办法

  • 添加配置
    在这里插入图片描述

  • 根据官方文档引入内置的antd,找不到报错的文件,
    在这里插入图片描述
    在这里插入图片描述

  • 原因是版本不匹配,降级处理就好。
    在这里插入图片描述

    在这里插入图片描述

      npm un antd
    
      npm  install antd@^4.24.2
    
  • 报错问题完美解决

在这里插入图片描述

文件指纹设置

在dva项目中,我们打包文件进行部署

npm run build

在这里插入图片描述
打包成功,但是文件没有自带hash指纹。

修改配置

// https://github.com/sorrycc/roadhog?tab=readme-ov-file#html
export default {extraBabelPlugins: [["import", { libraryName: "antd", libraryDirectory: "es", style: "css" }],],hash: true, //这里是文件打包的hash值,不是路由模式下的hash值html: {template: "./public/index.ejs",},
};

在这里插入图片描述
需要手动删掉没有指纹的配置。

参考配置文件github:https://github.com/sorrycc/roadhog

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5分钟科普:AI网关是什么?应用场景是什么?有没有开源的选择?

AI网关的功能及其定义 AI网关位于企业应用与内外部大模型调用的交汇点&#xff0c;能够灵活地将请求转发给内部自建模型或外部大模型服务提供商&#xff0c;甚至海外的服务商。它管理着企业所有的AI出口流量&#xff0c;为企业内的不同团队提供了多方面的优势。 对于开发团队…

Spring中的 InitializingBean、BeanPostProcessor、@PostConstruct 等初始化动作的执行时机分析

初始化Bean的时序图如下&#xff1a; 小结说明&#xff1a; 1、相同点&#xff1a;InitializingBean 的(afterPropertiesSet方法)、BeanPostProcessor、PostConstruct 都是在bean的属性注入完毕之后才执行&#xff0c;都可以用来进行bean的初始化动作 2、初始化执行顺序优先级…

java ssm 校园快递物流平台 校园快递管理系统 物流管理 源码 jsp

一、项目简介 本项目是一套基于SSM的校园快递物流平台&#xff0c;主要针对计算机相关专业的和需要项目实战练习的Java学习者。 包含&#xff1a;项目源码、数据库脚本、软件工具等。 项目都经过严格调试&#xff0c;确保可以运行&#xff01; 二、技术实现 ​后端技术&#x…

最新整理:Selenium自动化测试面试题

1.selenium中如何判断元素是否存在? find_elements查找到的元素个数为0&#xff0c;find_element报错意味着元素不存在 2.如何判断元素是否出现? 判断元素是否出现&#xff0c;存在两种情况&#xff0c;一种是该元素压根就没有&#xff0c;自然不会出现;另外一种是有这样的…

【The Art of Unit Testing 3_自学笔记06】3.4 + 3.5 单元测试核心技能之:函数式注入与模块化注入的解决方案简介

文章目录 3.4 函数式依赖注入技术 Functional injection techniques3.5 模块化依赖注入技术 Modular injection techniques 写在前面 上一篇的最后部分对第三章后续内容做了一个概括性的梳理&#xff0c;并给出了断开依赖项的最简单的实现方案&#xff0c;函数参数值注入法。本…

用Puppeteer点击与数据爬取:实现动态网页交互

用Puppeteer与代理IP抓取51job招聘信息&#xff1a;动态网页交互与数据分析 引言 在数据采集领域&#xff0c;传统的静态网页爬虫方式难以应对动态加载的网页内容。动态网页通常依赖JavaScript加载数据&#xff0c;用户需要与页面交互才能触发内容显示。因此&#xff0c;我们…

10天进阶webpack---(1)为什么要有webpack

首先就是我们的代码是运行在浏览器上的&#xff0c;但是我们开发大多都是利用node进行开发的&#xff0c;在浏览器中并没有node提供的那些环境。这就造成了运行和开发上的不同步问题。 -----引言 浏览器模块化的问题&#xff1a; 效率问题&#xff1a;精细的模块划分带来了更…

Qt多边形填充/不填充绘制

1 填充多边形绘制形式 void GraphicsPolygonItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {Q_UNUSED(option);Q_UNUSED(widget);//painter->setPen(pen()); // 设置默认画笔//painter->setBrush(brush()); // 设置默…

华为海思招聘-芯片与器件设计工程师-模拟芯片方向- 机试题-真题套题题目——共8套(每套四十题)

华为海思招聘-芯片与器件设计工程师-模拟芯片方向- 机试题-真题套题题目分享——共九套&#xff08;每套四十题&#xff09; 岗位——芯片与器件设计工程师 岗位意向——模拟芯片 真题题目分享&#xff0c;完整题目&#xff0c;无答案&#xff08;共8套&#xff09; 实习岗位…

掌握歌词用词技巧:写歌词的方法与艺术表达,妙笔生词AI智能写歌词软件

歌词&#xff0c;作为音乐作品中传递情感和思想的关键元素&#xff0c;其用词技巧蕴含着深刻的方法与艺术。 写歌词找不到灵感和思路&#xff0c;可以借助《妙笔生词智能写歌词软件》&#xff0c;它有这些功能&#xff1a;AI智能写歌词&#xff0c;AI智能歌曲填词&#xff0c;…

纯血鸿蒙Native层支持说明

本文所有描述均参考鸿蒙官方文档&#xff1a;传送门 1.对C库的支持 C标准函数库在C语言程序设计中&#xff0c;提供符合标准的头文件&#xff0c;以及常用的库函数实现&#xff08;如I/O输入输出和字符串控制&#xff09;。 HarmonyOS采用musl作为C标准库&#xff0c;musl库…

Centos Linux 7 搭建邮件服务器(postfix + dovecot)

准备工作 1. 一台公网服务器&#xff08;需要不被服务商限制发件收件的&#xff0c;也就是端口25、110、143、465、587、993、995不被限制&#xff09;&#xff0c;如有防火墙或安全组需要把这些端口开放 2. 一个域名&#xff0c;最好是com cn org的一级域名 3. 域名备案&am…

sql速度优化多条合并为一条语句

在 SQL 中&#xff0c;结合 CASE 和 SUM 可以实现根据特定条件进行分组求和。在 ThinkPHP 中也可以使用类似的方式进行数据库查询操作。 例如&#xff0c;假设有一个销售数据表&#xff0c;包含字段 product_id &#xff08;产品 ID&#xff09;、 quantity &#xff08;销…

Stable Diffusion Web UI 1.9.4常用插件扩展-WD14-tagger

Stable Diffusion Web UI 1.9.4 运行在 WSL 中的 Docker 容器中 tagger 插件的作用是&#xff0c;上传一张图片&#xff0c;反推这张图片可能的提示词。 使用场景就是&#xff0c;想要得到类似的图片内容时使用。 WD14-tagger 安装 Stable Diffusion WebUI WD14-tagger GitH…

信息安全建设方案,网络安全等保测评方案,等保技术解决方案,等保总体实施方案(Word原件)

1 概述 1.1 项目简介 1.2 测评依据 2 被测信息系统情况 2.1 定级情况 2.2 承载的业务情况 2.3 网络结构 2.4 被测对象资产 2.5 上次测评问题整改情况说明 3 测评范围与方法 3.1 测评指标 3.1.1 安全通用要求指标 3.1.2 安全扩展要求指标 3.1.3 其他安全要求指标 3.1.4 不适用安…

linux dpkg 查看 安装 卸载 .deb

1、安装 sudo dpkg -i google-chrome-stable.deb # 如果您在安装过程中或安装和启动程序后遇到任何依赖项错误&#xff0c; # 您可以使用以下apt 命令使用-f标志解析​​和安装依赖项&#xff0c;该标志告诉程序修复损坏的依赖项。 # -y 表示自动回答“yes”&#xff0c;在安装…

Docker Compose部署Rabbitmq(Docker file安装延迟队列)

整个工具的代码都在Gitee或者Github地址内 gitee&#xff1a;solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github&#xff1a;GitHub - ZeroNing/solomon-parent: 这个项目主要是…

python NLTK快速入门

目录 NLTK简介安装NLTK主要模块及用法 词汇与语料库分词与词性标注句法分析情感分析文本分类综合实例&#xff1a;简单的文本分析项目总结 1. NLTK简介 NLTK&#xff08;Natural Language Toolkit&#xff09;是一个强大的Python库&#xff0c;专门用于自然语言处理&#xff…

青少年编程与数学 02-003 Go语言网络编程 14课题、Go语言Udp编程

青少年编程与数学 02-003 Go语言网络编程 14课题、Go语言Udp编程 课题摘要:一、UDP编程1. 创建UDP连接&#xff08;服务器和客户端&#xff09;服务器端客户端 2. 读取和发送数据3. 关闭连接4. 错误处理5. 性能优化总结 二、UDP与TCP的区别1. 连接性2. 可靠性3. 流量控制和拥塞…

c++--动态内存

目录 1.栈和堆的概念 1.1 new 运算符的使用 1.2 new 与 malloc() 的区别 1.3 代码示例(delete):释放内存 1.栈和堆的概念 栈 (Stack) 栈内存 是一种自动分配的内存空间。函数内部声明的变量和函数调用都在栈上操作。当一个函数结束时&#xff0c;栈上的变量会自动释放。 …