前言
前端开发中，我们经常需要写一些重复性的代码，比如一个新的项目，需要创建很多基本的文件和目录，还需要配置一些基础的环境。
为了避免手动创建这些基础部分，我们可以使用 npm 包 generator-pdd-dva。generator-pdd-dva 是一个基于 Yeoman 的脚手架工具，用于快速生成 React 项目的基础代码，并集成了 antd, dva 等常用库与组件。
在这篇文章中，我将为大家介绍如何使用 generator-pdd-dva 来快速创建 React 项目并进行开发。
安装和使用
首先，我们需要安装 yeoman：
npm install -g yo
然后，我们可以通过 npm 安装 generator-pdd-dva：
npm install -g generator-pdd-dva
接着，进入到需要创建项目的文件夹，并执行以下命令：
yo pdd-dva
此时，generator-pdd-dva 将会引导你进行一系列的选择，如项目名称、是否使用 less 等。按照提示逐个选择完成之后，generator-pdd-dva 就会帮你生成一个完整的 React 项目。
项目结构
generator-pdd-dva 生成的项目结构如下：
-- -------------------- ---- -------
--- ----
--- ------------
--- ----------
--- -----------
--- -----------------
--- ------------
--- ------
- --- -----------
- --- ----------
- --- -----------
- --- -----------
- --- -------------
- --- ----------
--- ---
--- ------
--- ----------
--- ------
--- --------
--- ------
--- ------
--- --------
--- -----
- --- --------
- --- --------
- --- ----------
--- ------
--- -----
--- -----其中，.env 文件为环境配置文件，.eslintrc.js 为 eslint 配置文件，.prettierrc 为 prettier 配置文件，public 文件夹为静态资源文件夹，src 文件夹为项目主目录。
使用案例
接下来，我们将通过一个简单的案例来介绍本项目的使用。
首先，我们选择使用 generator-pdd-dva 来创建一个项目：
yo pdd-dva
然后，我们需要在项目中安装一些依赖：
npm install moment --save
此时，我们需要在 model 中增加一些逻辑。在 src/models 下创建 test.js 文件，代码如下：
-- -------------------- ---- -------
------ ------ ---- ---------
------ ------- -
---------- -------
------ -
----- --------------------------- -----------
--
--------- -
----------------- -
------ - --------- ----- --------------------------- ---------- --
--
--
--然后，在 src/store 下的 model.js 文件中引入 test.js：
import test from '../models/test'; export default [test];
接着，在 src/components 下创建一个 test.js 文件，代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------
----------- ---- -- -- --
-----
---
------ ------- ----- ---- ------- ------------------- -
------------------- -
-------------- -- -
--------------------- ----- ----------------- ---
-- ------
-
-------- -
----- - ---- - - -----------
------ -----------------------
-
-最后，在 src/views 下创建一个 test.js 文件，代码如下：
import React from 'react';
import Test from '../components/test';
export default class TestView extends React.PureComponent {
render() {
return <Test />;
}
}现在，我们已经完成了一个简单的案例。
总结
generator-pdd-dva 是一个非常实用的脚手架工具，它可以帮助我们快速创建 React 项目并进行开发。在使用过程中，我们只需要按照引导逐步选择，并根据自己的需要添加相应的逻辑即可。
建议大家在实际开发中使用 generator-pdd-dva，它将会大大提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006733e890c4f72775835f5