介绍
uni-design-system 是基于 Vue 的 UI 组件库，为前端开发提供了一套可用于多平台的通用组件，覆盖了各种应用场景，如表单、列表、导航、弹框等。其优点包括易于使用、自定义性强、易于维护等。
安装
安装 uni-design-system，只需在终端输入以下命令：
npm install uni-design-system --save
此时，你已经成功安装uni-design-system。
使用
在 Vue 中使用 uni-design-system
在Vue的入口文件中，引用uni-design-system：
------ --- ---- ----- ------ --------- ---- ------------------- ------ ---------------------------------------------- ------------------
在Vue的模板文件中，就可以直接使用uni-design-system的组件了：
----------
-----
--------- -----------------------------------
------
-----------主题
使用uni-design-system的主题，可以方便的给应用系统统一风格样式。目前主题可选有：default、dark 和 custom。默认主题为default。
我们可以在入口文件中引入以下样式:
------- --------------------------------------------
设置 uniDesign.config.theme 来切换主题。
------ --- ---- ----- ------ --------- ---- ------------------- ------ ---------------------------------------------- ------ ------------------------------------------- -- ------ ------------------ ---------------------- - ------- -- ----- ---- --- ----- --- ------- ------- - -- ------ --
组件
uni-design-system提供了一系列的组件，如：Button 按钮、Tabs 标签页、Input 输入框、Message 消息框等。使用方法详见组件官方文档。
Button 按钮
----------
-----
--------- -------------------------------------------
------
-----------
--------
------ ------- -
-------- -
--------------------- -
---------------------
-
-
-
---------Tabs 标签页
----------
-----
------- ------------------
------ -------------
---------
--------
------ -------------
---------
--------
---------
------
-----------Input 输入框
----------
-----
-------- -------------------- ------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
----------- --
-
-
-
---------Message 消息框
----------
-----
--------- ----------------------------------------------
--------- --------------------------------------------
------
-----------
--------
------ ------- -
-------- -
-------------------- -
-----------------------------
--
------------------ -
---------------------------
-
-
-
---------自定义组件
在uni-design-system的基础上，我们还可以自定义组件。例如，我们可以创建一个 MyButton 组件，来实现 uni-design-system 中未提供的按钮样式：
----------
---- -------------- ----------
---------------- --------
------------------ ---------
-- ---- - ----------------- - -----
-------------
------
-----------
--------
------ ------- -
------ -
---------- --------
-------- --------
----- ------
-
-
---------
-------
------- -
-------- -------------
-------- ---- -----
-------------- ----
------ -----
----------- -------
------- --------
------- -----
-
---------------- -
----------------- --------
-
-------------- -
----------------- ------------
------ --------
------- --- ----- --------
-
-------------- -
---------- -----
-
--------------- -
---------- -----
-
-------------- -
---------- -----
-
--------在入口文件引入，并注册：
------ -------- ---- --------------------------- -------------------------- ---------
然后就可以在项目中使用我们自定义的组件了：
----------
-----
-------------------------
---------- ----------------------------
------
-----------以上就是uni-design-system的使用教程，期待对您的实际项目有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671cc30d09270238228a2