初探基于React+Redux前端应用框架Dva

前言

众所周知，react 的学习成本是较高的，而 antd 推出的这款框架，大大的降低了 react 的学习成本。dva 是对 redux 的一层浅封装，所以虽然我们不要求一定要了解 redux 才能学会使用 dva，但是如果你对 redux 有所了解，再使用 dva 一定驾轻就熟，并且会了解很多潜在的知识点。下面一起看看如何快速搭建 dva 项目。

安装 node.js/git

未安装 node.js、git 的同学请戳这里Node 本地环境搭建

安装 dva-cli

那么，首先需要安装的是 dva-cli 。dva-cli 是 dva 的命令行工具，包含 init、new、generate 等功能，目前最重要的功能是可以快速生成项目以及你所需要的代码片段。

$ npm install -g dva-cli

安装完成后，可以通过 dva -v 查看版本，以及 dva -h 查看帮助信息。

创建新应用，new 的使用

安装完 dva-cli 后，我们用它来创建一个新应用，取名 myApp。

$ dva new myApp --demo

注意：–demo 用于创建简单的 demo 级项目，正常项目初始化不加要这个参数。

然后进入项目目录，并启动。

$ cd myApp
$ npm start

几秒之后，会看到这样的输出：

> @ start D:\xxx\myApp
> roadhog server

Starting the development server...

Compiled successfully!

The app is running at:

  http://localhost:8000/

Note that the development build is not optimized.
To create a production build, use npm run build.

(如需关闭 server，请按 Ctrl-C.)

在浏览器里打开 http://localhost:8000/ ，正常情况下，你会看到一个 “Hello Dva” 页面。

初始化项目，init 的使用

new 创建的项目比较简单，为了满足实际开发需求，我们可以使用 init 来初始化。

mkdir dva
cd dva
dva init

在我们初始化的时候，dva 已经帮我们安装了依赖，所以我们可以直接运行看效果。

$ npm start

在浏览器里打开 http://localhost:8000/，正常情况下，你会看到如下效果：

端口号修改

在开发中，我们会同时开发两个或多个项目，这个时候就会遇到端口冲突的问题，如何修改呢？

• roadhog server
  roadhog 默认的端口号是 8000

> @ start D:\xxx\dva
> roadhog server

Something is already running on port 8000.

上面代码显示端口号被占用，打开我们的配置文件 package.json 修改 scripts 下的 start,如下：

// OS X, Linux
"scripts": {
    "start": "PORT=3000 roadhog server",

// Windows (cmd.exe)
"scripts": {
    "start": "set PORT=3000&&roadhog server",

修改完再运行 npm start 一切正常。

• dora
  默认端口 8989,同样在 package.json 下修改 start

"scripts": {
    "start": "dora -p 7001 --plugins \"proxy?port=8888,webpack,webpack-hmr\"",

结语

前端的世界变化太快，一不小心又 OUT 了。关于 dva 的项目搭建就说到这里，有任何疑问可在下面留言一起探讨。

相关链接：
dva github
roadhog
知乎日报，基于 dva 脚手架
dva 实例 antd-admin

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦