前言
在前端开发中，我们经常会有一些重复使用的组件，比如按钮、表单元素等。这些组件有时候需要在不同的页面中使用，如果每次都手动编写这些组件，不仅浪费时间，同时还会增加出错的风险。于是，我们需要一种能够快速创建、统一管理的组件库。
dva-plugin-build-common-component 是一款非常好用的 npm 包，它提供了一些方便的方法，可以轻松地创建和管理常用组件。在本文中，我们将介绍如何使用该插件。
安装
使用 npm 进行安装：
npm install dva-plugin-build-common-component
基本使用
配置 dva
首先，在项目中安装 dva：
npm i dva --save
然后，在你的 src/index.js 中配置 dva：
import dva from 'dva';
import commonPlugin from 'dva-plugin-build-common-component';
const app = dva();
app.use(commonPlugin(), {});
// 路由和 model 省略...创建组件
在你的 common 中创建一个 common.js 文件，在其中编写组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------- ------------- -
----- - --------- ---------- ------- - - ------
------ -
------- --------------------- ----------
----------
---------
--
-使用组件
在需要使用这个组件的地方，通过 import 引入即可：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ------------------
------ ------- -------- ----------- -
------ -
-----
------- ------------------------- ------------
------
--
-高级使用
添加多个组件
你可以在 common 文件夹下添加各种常用组件，然后在 index.js 中进行统一导出：
import Button from './Button';
import Input from './Input';
export { Button, Input };添加组件样式
在 common 文件夹下的每个组件文件夹中，都可以添加一个 index.less 文件来添加组件的样式。
配置 dva-plugin-build-common-component
你可以通过传递配置选项修改该插件的默认配置：
const options = {
componentsPath: 'app/components', // 组件存放的路径
};
app.use(commonPlugin(), options);总结
dva-plugin-build-common-component 是一个非常好用的 npm 包，它可以帮助我们快速创建、统一管理常用组件。在本文中，我们介绍了它的基本使用和高级使用，并希望对你的实际开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e9e81e8991b448e761e