一:版本升级

首先说明一下这里的dva是最新版: 2.3.2

1.初始化项目构建

npm install dva-cli -g
dva -v
dva-cli version 0.9.

注:通过 npm 安装 dva-cli 并确保版本是 0.9.1 或以上。

dva new dva-test

这会创建 dva-test 目录,包含项目初始化目录和文件,并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。

然后我们 cd 进入 dva-test 目录,并启动开发服务器:

 cd dva-test
npm start

在浏览器里打开 http://localhost:8000 ,你会看到 dva 的欢迎界面。

目录结构是这个样子:

2.使用 antd

 npm install antd babel-plugin-import --save

编辑 .webpackrc,使 babel-plugin-import 插件生效。

{
"entry": "src/entry/*.js", // 入口文件
"extraBabelPlugins": [
["import", { "libraryName": "antd", "style": true }]
]
}

现在让我们看下package.json的依赖:

注:标注的部分,是后来装的依赖,其他的就是构建项目和装antd的时候,装的依赖包,可以看到它们的版本都是高版本的.

3.配置其它项目所需的依赖

1.安装babel-polyfill

npm install babel-polyfill --save

脚本头部引入:

import 'babel-polyfill';// 或者require('babel-polyfill');

注:提示:polyfill指的是“用于实现浏览器不支持原生功能的代码”

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

2.安装axios

npm install  axios --save

脚本头部引入:

import axios from 'axios';

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});

3.安装console-polyfill

npm install --save console-polyfill;

脚本头部引入:

import 'console-polyfill';

4.安装crypto-js

npm install crypto-js --save

脚本引入:

项目中用到了MD5加密方式

import MD5 from 'crypto-js/md5';
console.log(
     MD5('mima').toString();
);

关于:crypto-js有很多详看:https://github.com/brix/crypto-js

5.安装dva-loading

npm install dva-loading --save

用法:

import createLoading from 'dva-loading';

const app = dva();
app.use(createLoading());

6.安装图表

npm install echarts-for-react  echarts --save

注:用到图表就可以安装,用不到就没有必要

7.再看一下所装的包

8.项目实例

可前往GitHub,自行下载

gitHub:     https://github.com/ght5935/dva

react+dva+antd项目构建的更多相关文章

  1. 基于webpack+react+antd 项目构建

    工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...

  2. React学习笔记---项目构建

    简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...

  3. react+dva+antd+umi项目建立操作流程及知识点总结

    0.1 引用 0.1.1 react官网 0.1.2 dva官网 0.1.3 antd-mobile官网 0.1.4 umijs官网 0.1.5 转载文章-umi操作手册 一.what are the ...

  4. React + Dva + Antd + Umi 概况

    Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:"dva 是 react 和 redux 的最佳实践". Ant ...

  5. react+dva+antd/antd-mobile

    github仓库pc: https://github.com/llcMite/react-dva-antd.git github仓库mobile:https://github.com/llcMite/ ...

  6. 12 步 30 分钟,完成用户管理的 CURD 应用 (react+dva+antd)

    Getting Started https://github.com/dvajs/dva/blob/master/docs/GettingStarted.md -------------------- ...

  7. Umi + Dva + Antd的React项目实践

    记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...

  8. 使用 dva + antd 快速开发react应用

    使用 dva + antd 快速开发react应用 版本说明: 注意:dva的版本是0.9.2 $ node -v v10.2.1 $ npm -v $ dva -v dva-cli version ...

  9. 《React+Redux前端开发实战》笔记1:不涉及React项目构建的Hello World案例

    本小节实现一个不涉及项目构建的Hello World. [React的第一个Hello World网页] 源码地址:https://jsfiddle.net/allan91/2h1sf0ky/8/ & ...

随机推荐

  1. R12.2常用手册

    >>Related Information Sources这本书包含在Oracle电子商务套件文档库中.如果该指南将您引用到其他Oracle电子商务套件文档中,只使用这些指南的最新版本12 ...

  2. Python 和 Scikit-Learn

    Reference:http://mp.weixin.qq.com/s?src=3&timestamp=1474985436&ver=1&signature=at24GKibw ...

  3. Git结合tar自动打升级包

    背景最近在看Git,那么看了之后就需要用Git来解决一些工作中遇到的问题,学了不能用在工作中,等于白学. 这次遇到的问题是打包升级的问题,我们公司目前还处于最原始的手工打更新包的状况,每次打包都要找开 ...

  4. ValueError: output parameter for reduction operation logical_and has too many dimensions ?

    https://docs.scipy.org/doc/numpy-dev/reference/generated/numpy.all.html#numpy.all 运行示例,却发生错误 import ...

  5. MySQL优化的一些基础

    在Apache, PHP, mysql的体系架构中,MySQL对于性能的影响最大,也是关键的核心部分.对于Discuz!论坛程序也是如此,MySQL的设置是否合理优化,直接 影响到论坛的速度和承载量! ...

  6. PHP中一些常用知识点

    1.json字符串转json对象 $data='[{"user_id":"93","price":"52.50"},{& ...

  7. C#模拟客户端发送数据示例

      在给一些客户端做服务器端支持时,发现他们提交上来的数据大都不是http请求格式,因而使用Request.Form获取不到内容,今天用C#做下模拟,并演示下数据接收. 1.发送文本 1).客户端发送 ...

  8. 安装rcssmin方法

    #安装rcssmin方法'''pip install wheelpip install rcssmin --install-option="--without-c-extensions&qu ...

  9. 突破拐点:企业成长的S曲线

    1.企业成长的不同时期 初创期:初创前几年,最重要的创业激情,靠“蓝色小药丸”,断层期切入,不断试错玩命干(产品定位.商业模式.融资源.找关系.辅渠道),并最终完成赢利模式,得以生存. 成长期:通过快 ...

  10. CountDownLatch、CyclicBarrier和Semaphore 使用示例及原理

    备注:博客园的markDown格式支持的特别不友好.也欢迎查看我的csdn的此篇文章链接:CountDownLatch.CyclicBarrier和Semaphore 使用示例及原理 CountDow ...