什么是 vds？
vds 是一个基于 Web Components 和 TypeScript 框架开发的 UI 库，它提供了一系列的组件，帮助开发者更快速、更方便地构建 Web 应用。其中包括丰富的表单组件、通用样式组件和一些比较重量级的组件，如快速构建图表的图表组件等。
如何安装 vds？
vds 作为 npm 包，可以使用 npm 或 yarn 直接安装。在你的项目里运行以下命令即可：
npm install vds -S
或者
yarn add vds
如何使用 vds？
全局引入
安装完 vds 后，可以在 main.js 或者 app.js 中引入：
import { createApp } from 'vue';
import Vds from 'vds';
import 'vds/dist/vds.css';
createApp(App).use(Vds);这样就可以全局引入 vds，然后在组件中就可以直接使用 vds 的组件了。
局部引入
如果想要在某个组件中使用 vds 的某个组件，可以这样引入：
import { Button } from 'vds';
export default {
components: {
[Button.name]: Button,
},
};以上代码引入了 vds 的 Button 组件，组件的名称是按照 vds 的组件名来的。如果在 Vue 中使用该组件，可以直接写成：
<template> <vds-button>Click me</vds-button> </template>
组件使用示例
Button
-- -------------------- ---- -------
----------
-----
------------------ --------------------
----------- --------------------------- --------------------
----------- ----------------------------- ----------------------
----------- --------------------------- --------------------
----------- -------------------------- -------------------
----------- --------------------------- --------------------
------
-----------Input
-- -------------------- ---- -------
----------
------
---------- ---------------- ------------------ ---------------------- --
---------- ---------------- --------------- ------------------ --
---------- ------------- ------------ --------------- --
--- --
----------- -----------------------------------------
----------- -------------------------------
-------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
--------- ---
------ ---
-------------- ------- ----- ---- ----------
--
--
-------- -
------- -
-- ------ -----
--
--
--
---------以上是使用 vds 常用的组件，可以根据实际需要使用具体的 vds 组件来构建自己的 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557fc81e8991b448d5184