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

Vue DevUI:100多位贡献者持续530多天,写了近60000行代码,这个新鲜出炉的 Vue3 组件库你不想尝试下吗?
前端组件库 @ 华为

Kagol

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

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

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

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

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

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

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

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

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

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

官网首页.png

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

快速开始.png

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

我们点击“Button 按钮”。

image.png

每个组件页面从上到下,有以下部分组成:

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

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

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

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

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

image.png

这是 DevUI Playground 的链接:

devcloudfe.github.io/devui-playg…

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

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

  • 代码编辑区
  • 效果展示区

DevUI Playground.png

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

是不是非常方便,赶紧试试吧!

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

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

github.com/DevCloudFE/…

欢迎点亮我们的小星星 Star🌟

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

如果你不满足在演练场中使用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文件,即可看到组件效果。

image.png

方式四:通过在 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 官网的快速开始文档:

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>

效果如下:

image.png

按需引入

为了减少产物包的体积,提升应用的性能,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>

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

image.png

欢迎大家体验和使用 Vue DevUI 组件库🥳

更欢迎你参与进来一起共建🤝

image.png

想了解 Vue DevUI 开源组件库更多故事,请阅读我们往期的文章:

20行代码,给你的项目增加 DevUI 主题切换能力

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

前端开发的积木理论——像搭积木一样做前端开发

建设一个温暖的开源社区

DevUI开源的故事

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

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

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

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改