介绍
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：
import Vue from 'vue' import uniDesign from 'uni-design-system' import 'uni-design-system/dist/uni-design-system.css' Vue.use(uniDesign)
在Vue的模板文件中，就可以直接使用uni-design-system的组件了：
<template>
<div>
<u-button @click="handleClick">点击我</u-button>
</div>
</template>主题
使用uni-design-system的主题，可以方便的给应用系统统一风格样式。目前主题可选有：default、dark 和 custom。默认主题为default。
我们可以在入口文件中引入以下样式:
@import 'uni-design-system/dist/styles/default.css';
设置 uniDesign.config.theme 来切换主题。
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------------- ------ ---------------------------------------------- ------ ------------------------------------------- -- ------ ------------------ ---------------------- - ------- -- ----- ---- --- ----- --- ------- ------- - -- ------ --
组件
uni-design-system提供了一系列的组件，如：Button 按钮、Tabs 标签页、Input 输入框、Message 消息框等。使用方法详见组件官方文档。
Button 按钮
-- -------------------- ---- -------
----------
-----
--------- -------------------------------------------
------
-----------
--------
------ ------- -
-------- -
--------------------- -
---------------------
-
-
-
---------Tabs 标签页
-- -------------------- ---- -------
----------
-----
------- ------------------
------ -------------
---------
--------
------ -------------
---------
--------
---------
------
-----------Input 输入框
-- -------------------- ---- -------
----------
-----
-------- -------------------- ------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
----------- --
-
-
-
---------Message 消息框
-- -------------------- ---- -------
----------
-----
--------- ----------------------------------------------
--------- --------------------------------------------
------
-----------
--------
------ ------- -
-------- -
-------------------- -
-----------------------------
--
------------------ -
---------------------------
-
-
-
---------自定义组件
在uni-design-system的基础上，我们还可以自定义组件。例如，我们可以创建一个 MyButton 组件，来实现 uni-design-system 中未提供的按钮样式：
-- -------------------- ---- -------
----------
---- -------------- ----------
---------------- --------
------------------ ---------
-- ---- - ----------------- - -----
-------------
------
-----------
--------
------ ------- -
------ -
---------- --------
-------- --------
----- ------
-
-
---------
-------
------- -
-------- -------------
-------- ---- -----
-------------- ----
------ -----
----------- -------
------- --------
------- -----
-
---------------- -
----------------- --------
-
-------------- -
----------------- ------------
------ --------
------- --- ----- --------
-
-------------- -
---------- -----
-
--------------- -
---------- -----
-
-------------- -
---------- -----
-
--------在入口文件引入，并注册：
import MyButton from '@/components/MyButton.vue'
Vue.component('my-button', MyButton)然后就可以在项目中使用我们自定义的组件了：
<template>
<div>
<u-button>默认按钮</u-button>
<my-button is-primary>自定义按钮</my-button>
</div>
</template>以上就是uni-design-system的使用教程，期待对您的实际项目有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d09270238228a2