间隔 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文件，写入以下内容：

<!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文件，即可看到组件成果。

形式四：通过在 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组件：

<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 我的项目吧