关于前端:Vue-DevUI100多位贡献者持续530多天写了近60000行代码这个新鲜出炉的-Vue3-组件库你不想尝试下吗

间隔 Vue DevUI 组件库第一个 rc 版本公布过来 3 个月。

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

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

你能够通过以下形式来体验和应用 Vue DevUI 的组件：

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

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 我的项目中获取成长和荣誉感之外，也能够在开源社区获取肯定的影响力和受到人们的尊敬。

如果感觉在官网体验 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🌟

如果你不满足在演练场中应用 Vue DevUI 组件，想在本人的我的项目中应用，那也是齐全没有问题的。

咱们反对通过 CDN 包的形式应用 Vue DevUI 组件库，应用形式如下：

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 引入 vue -->
  <script src="https://unpkg.com/vue@next"></script>

  <!-- 引入 vue-devui -->
  <script src="https://unpkg.com/vue-devui"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-devui/style.css">

  <title>Vue DevUI Project</title>
</head>
<body>
  <div id="app"></div>
  <script>
    const app = Vue.createApp({
      template: `
        <d-button variant="solid"> 确定 </d-button>
        <d-button> 勾销 </d-button>
      `
    });

    // 引入 vue-devui 之后，会在全局裸露一个 VueDevui 对象，这是一个 Vue 插件，能够通过 Vue 实例的 use 办法进行注册，注册之后就能够间接应用 Vue DevUI 组件
    app.use(VueDevui.default).mount('#app');
  </script>
</body>
</html>

用浏览器间接关上这个 html 文件，即可看到组件成果。

如果要在实在的业务中应用 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 组件：

<template>
  <d-button variant="solid"> 确定 </d-button>
  <d-button> 勾销 </d-button>
</template>

成果如下：

为了缩小产物包的体积，晋升利用的性能，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：

<template>
  <d-button variant="solid"> 确定 </d-button>
  <d-button> 勾销 </d-button>
</template>

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

欢送大家体验和应用 Vue DevUI 组件库🥳

更欢送你参加进来一起共建🤝

想理解 Vue DevUI 开源组件库更多故事，请浏览咱们往期的文章：

20 行代码，给你的我的项目减少 DevUI 主题切换能力

如何在 1 分钟之内创立一个符合规范的 DevUI 组件

前端开发的积木实践——像搭积木一样做前端开发

建设一个和煦的开源社区

DevUI 开源的故事

手把手带你从 0 到 1 搭建一个 vue3 组件库：mini-vue-devui

Vue DevUI 曾经有 10 个组件成员啦

让咱们一起建设 Vue DevUI 我的项目吧

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

形式二：通过 DevUI Playground 在线应用组件

形式三：通过导入 CDN 资源包应用 vue-devui

形式四：通过在 Vue3 我的项目中装置 vue-devui 来应用

全量引入

按需引入