Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 https://github.com/devcloudfe/ng-devui，倡导沉浸、灵活、至简的设计价值观。
DevUI 官方网站：https://devui.design
该项目还处于孵化和演进阶段，欢迎大家参与到 Vue DevUI 项目的建设中来！🎉🎉
通过参与 Vue DevUI 项目，你可以：
- 🔥 学习最新的
Vite+Vue3+TypeScript+JSX技术 - 🎁 学习如何设计和开发组件
- ⭐ 参与到开源社区中来
- 🎊 结识一群热爱学习、热爱开源的朋友
yarn(推荐)
or
npm i
yarn dev(推荐)
or
npm run dev
yarn build(推荐)
or
npm run build
yarn add vue-devui
import { createApp } from 'vue'
import App from './App.vue'
// Step 1: 引入 Vue DevUI 组件库
import DevUI from 'vue-devui'
// Step 2: 引入组件库样式
import 'vue-devui/style.css'
createApp(App)
.use(DevUI) // Step 3: 使用 Vue DevUI
.mount('#app')
除了全量引入，我们也支持单个组件按需引入。
import { createApp } from 'vue'
import App from './App.vue'
// Step 1: 引入单个组件
import { Button } from 'vue-devui'
// or import Button from 'vue-devui/button'
// Step 2: 引入组件样式
import 'vue-devui/button/style.css'
createApp(App)
.use(Button) // Step 3: 使用组件
.mount('#app')
<template>
<d-button>确定</d-button>
</template>
图标库可以使用DevUI图标库，也可以使用第三方图标库，比如：iconfont。
yarn add @devui-design/icons(推荐)
or
npm i @devui-design/icons
在main.ts文件中，编写以下代码：
import '@devui-design/icons/icomoon/devui-icon.css'
<d-icon name="love" color="red"></d-icon>
如果有第三方图标库，可以用类似的方式引入。
在main.ts文件中，编写以下代码：
import 'your-folder/my-icon.css'
<d-icon classPrefix="my-icon" name="love" color="red"></d-icon>
其中的classPrefix参数的值，应该和你的字体图标样式文件my-icon.css里定义的样式前缀保持一致。
比如my-icon.css里的图标样式：
.my-icon-branch-node:before {
content: "\E001";
}那么classPrefix就是my-icon。