Vue DevUI：100多位贡献者持续530多天，写了近60000行代码，这个新鲜出炉的 Vue3 组件库你不想尝试下吗？

距离 Vue DevUI 组件库第一个rc版本发布过去3个月。

这3个月来，共有33位田主参与组件的打磨和优化，共优化和修复了61个组件的377个特性和缺陷。

Vue DevUI 已趋于成熟，欢迎大家体验和使用！

你可以通过以下方式来体验和使用 Vue DevUI 的组件：

方式一：通过官网 Demo 体验组件交互和视觉
方式二：通过 DevUI Playground 在线使用组件
方式三：通过导入CDN资源包使用 vue-devui
方式四：通过在Vue3项目中安装 vue-devui 来使用

方式一：通过官网 Demo 体验组件交互和视觉

Vue DevUI 官网地址：https://vue-devui.github.io/

官网首页这张图左边有一个大大的"D"，代表DevUI，旁边有一些带各式图案的方块，这些图案都是一些大家常见的工具，意味着DevUI是专注于工具类产品的UI组件库。

中间有两个大大的按钮，点击左边的“快速开始”按钮，即可进入组件库的快速开始文档页面；点击右边的按钮可以进入 Vue DevUI 的 Github 源码仓库。

按钮下面是贡献者的头像和链接。

我们点击“快速开始”按钮。

组件文档页面的左侧是一个分类好的组件导航，点击组件名称即可进入相应的组件文档。

我们点击“Button 按钮”。

每个组件页面从上到下，有以下部分组成：

组件标题
组件描述
组件使用场景
分类好的组件Demo效果和代码
组件的API文档
组件的贡献者

由于 Vue DevUI 组件库是一个由社区开发者一起共建的 Vue3 组件库，我们非常重视每一位贡献者的每一次贡献，在Github 仓库的 README、在官网首页、在每个组件文档底部都有展示贡献者信息。

贡献者是第一位的，他们的辛勤付出成就了 Vue DevUI，我们也希望未来 Vue DevUI 在社区建立影响力的同时，我们的贡献者也能获益，建立起个人的品牌影响力，除了在 Vue DevUI 项目中获取成长和荣誉感之外，也可以在开源社区获取一定的影响力和受到人们的尊敬。

方式二：通过 DevUI Playground 在线使用组件

如果觉得在官网体验 Vue DevUI 的组件不过瘾，想亲自用用看，也非常简单，只需要点击官网文档顶栏的“Playground”链接即可。

这是 DevUI Playground 的链接：

https://devcloudfe.github.io/devui-playground

Playground有“演练场”的意思，也就是说你可以在这里亲自使用 Vue DevUI 的组件。

该页面主要有两个大的区域：

代码编辑区
效果展示区

你可以在代码编辑区直接使用 Vue DevUI 的组件，写完右边的效果展示区立马就能看到该组件的效果。

是不是非常方便，赶紧试试吧！

DevUI Playground 是由我们的PMC成员Brenner开发的开源项目，目前已经贡献到 DevUI 的 Github 组织里，成为 DevUI 官方开源项目。

以下是 DevUI Playground 项目的源码地址：

https://github.com/DevCloudFE/devui-playground

欢迎点亮我们的小星星 Star

方式三：通过导入CDN资源包使用 vue-devui

如果你不满足在演练场中使用Vue DevUI组件，想在自己的项目中使用，那也是完全没有问题的。

我们支持通过CDN包的方式使用 Vue DevUI 组件库，使用方式如下：

创建一个index.html文件，写入以下内容：




  
  
  

  
  

  
  
  

  Vue DevUI Project

用浏览器直接打开这个html文件，即可看到组件效果。

方式四：通过在 Vue3 项目中安装 vue-devui 来使用

如果要在真实的业务中使用 Vue DevUI 组件库，则可以安装 vue-devui 这个 npm 包。

我们先使用以下命令创建一个 Vite 项目：

npm create vite@latest vue-devui-project -- --template vue-ts

接着就是安装 vue-devui 组件库和配套的图标库：

npm i vue-devui @devui-design/icons

可以参考 Vue DevUI 官网的快速开始文档：

https://vue-devui.github.io/quick-start/

全量引入

最简单的方式是全量引入所有组件，在main.ts文件中写入：

import { createApp } from 'vue'
import App from './App.vue'

import DevUI from 'vue-devui'
import 'vue-devui/style.css'
import '@devui-design/icons/icomoon/devui-icon.css'

createApp(App).use(DevUI).mount('#app')

引入之后就可以直接使用 Vue DevUI 组件啦！

在App.vue中使用下d-button组件：

效果如下：

按需引入

为了减少产物包的体积，提升应用的性能，Vue DevUI 也是支持按需引入组件的。

在main.ts中写入以下代码：

import { createApp } from 'vue'
import App from './App.vue'

import Button from 'vue-devui/button'
import 'vue-devui/button/style.css'

createApp(App).use(Button).mount('#app')

使用起来没有任何差别，在App.vue中直接使用d-button：

效果也和全量引入没有任何区别：