前言
douscrm 是一款基于 Vue.js 开发的 CRM 系统，旨在提供企业级的客户关系管理服务。该系统采用前后端分离的方式开发，前端使用 Vue.js，后端使用 Laravel 框架。
npm 包 douscrm 是基于该项目开发的前端组件库，提供了一系列常用的 UI 组件和工具方法。本文将介绍如何使用该组件库。
安装
在项目根目录下执行以下命令：
npm install douscrm --save
使用
在需要使用组件的页面中，先引入 douscrm 的 CSS 样式：
<link rel="stylesheet" href="./node_modules/douscrm/dist/douscrm.min.css">
然后可以按需引入需要使用的组件，例如：
-- -------------------- ---- -------
----------
-----
-------------------------
------
-----------
--------
------ - -------- - ---- ---------
------ ------- -
----------- -
--------
-
-
---------组件列表
Button 按钮
按钮组件支持三种类型：普通按钮、主按钮和次按钮。
<dc-button>普通按钮</dc-button> <dc-button type="primary">主按钮</dc-button> <dc-button type="text">次按钮</dc-button>
Input 输入框
<dc-input v-model="inputValue" placeholder="请输入内容"></dc-input>
Table 表格
<dc-table :data="tableData"> <dc-table-column label="姓名" prop="name"></dc-table-column> <dc-table-column label="年龄" prop="age"></dc-table-column> <dc-table-column label="地址" prop="address"></dc-table-column> </dc-table>
Form 表单
-- -------------------- ---- -------
-------- ---------- ----------------- -------------------
------------- ---------- ------------
--------- -----------------------------------
---------------
------------- ---------- -----------
--------- -----------------------------------------
---------------
--------------
---------- -------------- ----------------------------------
---------------
----------Pagination 分页
<dc-pagination :current-page="currentPage" :total="total" @current-change="handlePageChange"></dc-pagination>
工具列表
Ajax 请求
-- -------------------- ---- -------
------ - ---- - ---- ---------
------
---- -------------
------- ------
------- -
----- --------
--
------------------- -
-- ----
--
-------------- -
-- ----
-
--Storage 存储
import { storage } from 'douscrm'
storage.set('name', 'doushi')
storage.get('name')结语
npm 包 douscrm 提供了一系列实用的组件和工具函数，为开发者提供了方便快捷的开发体验。使用本文介绍的方法，可以轻松将该组件库应用到您的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056a2981e8991b448e5011