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

news/2024/11/9 0:38:45/

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",},
};