【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