共计 3331 个字符,预计需要花费 9 分钟才能阅读完成。
间隔 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 我的项目吧