改造create-react-app 引入dva和antd

最新推荐文章于 2023-05-06 14:52:06 发布

David_Xia001

最新推荐文章于 2023-05-06 14:52:06 发布

阅读量414

点赞数

分类专栏： react项目搭建 dva 文章标签： react

本文链接：https://blog.csdn.net/weixin_42369612/article/details/119784013

版权

react项目搭建同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

dva

1 篇文章 0 订阅

订阅专栏

改造create-react-app 引入dva和antd

脚手架搭建项目

先用脚手架把项目搭建

npx create-react-app my-react-a
项目结构
试一下跑起来项目

yarn start
暴露webpack 配置

npm run eject

这边脚手架中的配置就完毕了

将项目改造为dva

引入dva库
1. npm install dva -D

改造项目

src目录下新建models,routes,services,utils文件夹
在routes中写三个组件

组件代码如下

import React, { Component } from 'react';
 
class AAA extends Component {
  render() {
    debugger
    return (
      <div>
        <p>
          AAA页
        </p>
      </div>
    );
  }
}
 
export default AAA;

另外两个组件类似

在model下新建四个文件：aaa.js bbb.js ccc.js 和app.js(app作为全局model使用，将来存放全局变量，如国际化参数，登录用户信息等)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V4fKDllJ-1629276441688)(C:\Users\YC01351\AppData\Roaming\Typora\typora-user-images\image-20210818134045922.png)]

代码如下:
```
const aaa = {
 
    namespace: 'aaa',
  
    state: {
      name:'这是aaa的model'
    },
  
    subscriptions: {
      
    },
  
    effects: {
      
    },
  
    reducers: {
      
    },
  
  };
  export default aaa;
```
其他model类似
在src下面创建route.js,用来进行路由控制,

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic'
 
const menuGlobal=[
  {
      id:'aaa',
      pid:'0',
      name:'aaa页',
      icon:'user',
      path: '/', //默认页
      models: () => [import('./models/aaa')], //models可多个
      component: () => import('./routes/AAA'),
  }, 
  {
      id:'bbb',
      pid:'0',
      name:'bbb页',
      icon:'user',
      path: '/aaa/bbb',
      models: () => [import('./models/bbb')], //models可多个
      component: () => import('./routes/BBB'),
  }, 
  {
      id:'ccc',
      pid:'0',
      name:'ccc页',
      icon:'user',
      path: '/ccc',
      models: () => [import('./models/ccc')], //models可多个
      component: () => import('./routes/CCC'),
  }, 
];
 
function RouterConfig({ history, app }) {
 
  return (
    <Router history={history}>
      <Switch>
        {
          menuGlobal.map(({path,...dynamics},index)=>(
            <Route
              key={index} 
              path={path} 
              exact 
              component={dynamic({
                app,
                ...dynamics
              })} 
            />
          ))
        }
      </Switch>
    </Router>
  );
}
 
export default RouterConfig;

改造src目录下的index.js入口文件

import dva from 'dva';
import './index.css';
import createHistory from 'history/createBrowserHistory'
 
// 1. Initialize
const app = dva({
    history:createHistory()
});
 
// 2. Plugins
// app.use({});
 
// 3. Model
app.model(require('./models/app').default);
 
// 4. Router
app.router(require('./router').default);
 
// 5. Start
app.start('#root');

至此,dva改造完毕

直接 yarn start 就可以把项目跑起来

在这里插入图片描述

项目跑起来之后可以改造一下组件,使得各个组件可以通过路由跳转

import React, { Component } from 'react';
import { Link } from 'dva/router';

class AAA extends Component {
  render() {
    return (
      <div>
        <p>
          AAA页
        </p>
        <Link to={'/aaa/bbb'}>去BBB页</Link>
      </div>
    );
  }
}
 
export default AAA;

其他组件类似改造

优化一下资源依赖结构

在utils下新建config.js和index.js两个文件

将路由数组拿到config,js下,注意修改下引入路径,否则会报错

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bjDxYcZM-1629276441692)(C:\Users\YC01351\AppData\Roaming\Typora\typora-user-images\image-20210818141133337.png)]

const menuGlobal=[
    {
        id:'aaa',
        pid:'0',
        name:'aaa页',
        icon:'user',
        path: '/',
        models: () => [import('../models/aaa')], //models可多个
        component: () => import('../routes/AAA'),
    }, 
    {
        id:'bbb',
        pid:'0',
        name:'bbb页',
        icon:'user',
        path: '/aaa/bbb',
        models: () => [import('../models/bbb')], //models可多个
        component: () => import('../routes/BBB'),
    }, 
    {
        id:'ccc',
        pid:'0',
        name:'ccc页',
        icon:'user',
        path: '/ccc',
        models: () => [import('../models/ccc')], //models可多个
        component: () => import('../routes/CCC'),
    }, 
  ];

  export default {
      menuGlobal
  }

index.js里面引入config.js

import config from './config'

export {
    config
}

route.js重新引入依赖

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic'

import { config } from './utils/index'
const { menuGlobal } = config

function RouterConfig({ history, app }) {

    return (
        <Router history={history}>
            <Switch>
                {
                    menuGlobal.map(({ path, ...dynamics }, index) => (
                        <Route
                            key={index}
                            path={path}
                            exact
                            component={dynamic({
                                app,
                                ...dynamics
                            })}
                        />
                    ))
                }
            </Switch>
        </Router>
    );
}

export default RouterConfig;

引入antd组件库

安装antd
1. cnpm i antd --save
引入antd组件的样式
1. 方式一:全局一次性引入样式
2. 按需加载样式
全局引入的方式
1. 在src下的index.css目录中直接@import ‘~antd/dist/antd.css’; 引入即可

引入less样式

引入less包
- cnpm install less-loader@7.3.0 --save-dev
- 引入版本过高可能会报错

然后改造webpack

...//添加less,可以仿照项目中对sass的支持
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
...
//在rules数组中添加如下代码
{              
	test: lessRegex,              
	exclude: lessModuleRegex,             
 	use: getStyleLoaders({ 
 	importLoaders: 2,
 	sourceMap: isEnvProduction                       
 	? shouldUseSourceMap                     
 	 : isEnvDevelopment, },                  
 	 'less-loader'              
 	 ),              
 	 	sideEffects: true,         
 	  },         
 	   {             
 	   	 	test: lessModuleRegex,             
 	     	use: getStyleLoaders({                     
 	     	importLoaders: 2,                     
 	       	sourceMap: isEnvProduction                      
 	       	? shouldUseSourceMap                     
 	        : isEnvDevelopment,                    
 	        modules: { getLocalIdent: getCSSModuleLocalIdent,  }, 
 	        },   
 	        'less-loader' 
 	    )},   
 	       ...

修改src下面的index.css为index.less
在index中引入index.less
重启项目刷新页面

至此,基本项目改造完毕,可以开发项目了

参考: https://blog.csdn.net/xw505501936/article/details/80621740

David_Xia001

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
改造create-react-app 引入dva和antd

改造create-react-app 引入dva和antd脚手架搭建项目先用脚手架把项目搭建npx create-react-app my-react-a项目结构试一下跑起来项目yarn start暴露webpack 配置npm run eject 这边脚手架中的配置就完毕了将项目改造为dva引入dva库npm install dva -D改造项目src目录下新建models,routes,services,utils文件夹在routes中
复制链接

扫一扫

专栏目录