概述
@sduept/sduept-vue 是一个由山东理工大学教务处前端团队开发的 Vue 组件库，包含了常用的 UI 组件以及常用的数据展示组件。此组件库支持 Vue 2.x 和 Vue 3.x，并按照 Vue 组件API的规范构建。其主要特点如下：
- 发布到 NPM 上，支持快速引入和使用。
- 开源且可扩展性强。
- 涵盖了大量常用组件的开发。
安装和使用
安装
使用 npm 安装：
npm install @sduept/sduept-vue
使用
全局引入
在 main.js 文件中，引入全部组件：
import Vue from 'vue' import SduVue from '@sduept/sduept-vue' import '@sduept/sduept-vue/dist/sduept-vue.css' Vue.use(SduVue)
按需引入
你也可以只引入你需要的组件来减小项目的大小：
import Vue from 'vue'
import { SduButton } from '@sduept/sduept-vue'
import '@sduept/sduept-vue/dist/sduept-vue.css'
Vue.component(SduButton.name, SduButton)组件使用
用完整的例子来演示组件的使用方式：
-- -------------------- ---- -------
----------
----------- ------------------------- ------ ---------------
-----------
--------
------ - --------- - ---- --------------------
------ ------- -
----------- -
---------
--
-------- -
------------- -
---------------- ------ ----
-
-
-
---------组件列表
基础组件
Button
通过 SduButton 组件，你可以创建一个基础的按钮。
<sdu-button>默认按钮</sdu-button> <sdu-button type="primary">主要按钮</sdu-button> <sdu-button type="success">成功按钮</sdu-button> <sdu-button type="warning">警告按钮</sdu-button> <sdu-button type="danger">危险按钮</sdu-button>
Input
通过 SduInput 组件，你可以创建一个基础的输入框。
<sdu-input></sdu-input>
数据组件
Table
通过 SduTable 组件，你可以创建一个带有表格格式的二维数组。
<sdu-table :columns="columns" :data="data"></sdu-table>
-- -------------------- ---- -------
--------
------ - -------- - ---- --------------------
------ ------- -
----------- -
--------
--
------ -
------ -
-------- --
------ -----
---------- -------
---- ------
-- -
------ -----
---------- ------
---- -----
-- -
------ -----
---------- ---------
---- --------
---
----- --
----- -----
---- ---
------- ---
-- -
----- -----
---- ---
------- ---
--
-
-
-
---------Chart
通过 SduChart 组件，你可以创建一个数据可视化的图表或者图形。
<sdu-chart :data="data" :config="config"></sdu-chart>
-- -------------------- ---- -------
--------
------ - -------- - ---- --------------------
------ ------- -
----------- -
--------
--
------ -
------ -
----- --
----- -------------
------ ---
-- -
----- -------------
------ --
-- -
----- -------------
------ ---
---
------- -
----- -------
----- -------
----- -------
-
-
-
-
---------总结
@sduept/sduept-vue 组件库是一个强大的 Vue 组件库，基于 Vue 的开发规范，提供了丰富的UI组件，包括基础组件和数据组件，极大地方便了 Vue 开发者的开发工作。在使用时应该灵活运用它的特点，充分发挥它的优势，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055dbe81e8991b448db7e6