Vue DevUI 是 Vue3 版本的 DevUI 组件库，基于 https://github.com/devcloudfe/ng-devui，倡导沉浸、灵活、至简的设计价值观。
DevUI 官方网站：https://devui.design
该项目还处于孵化和演进阶段，欢迎大家参与到 Vue DevUI 项目的建设中来！🎉🎉
通过参与 Vue DevUI 项目，你可以：
- 🔥 学习最新的
Vite+Vue3+TypeScript+JSX技术 - 🎁 学习如何设计和开发组件
- ⭐ 参与到开源社区中来
- 🎊 结识一群热爱学习、热爱开源的朋友
pnpm i pnpm dev pnpm build pnpm i vue-devui 在main.ts文件中编写以下代码：
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') 除了全量引入，我们也支持单个组件按需引入。
在main.ts文件中编写以下代码：
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') 配置unplugin-vue-components插件可以无需引入Vue DevUI就可以直接按需使用其中的组件，具体使用方式如下：
在vite.config.ts文件中添加以下代码：
import Components from 'unplugin-vue-components/vite' import { DevUiResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), // 新增 Components({ resolvers: [ DevUiResolver() ] }) ] }) 配置了以上插件，就可以直接在代码中使用Vue DevUI的组件，而无需在main.ts文件中引入Vue DevUI。
<template> <d-button>确定</d-button> </template> 图标库推荐使用DevUI图标库，也可以使用第三方图标库，比如：iconfont。
pnpm i @devui-design/icons 在main.ts文件中，编写以下代码：
import '@devui-design/icons/icomoon/devui-icon.css' <d-icon name="love" color="red"></d-icon> Thanks goes to these wonderful people (emoji key):
 Kagol 🚧 💻 📖 |  TinsFox 🚧 🚇 |  nif 💻 |  Zcating 🚧 💻 |  王凯 💻 |  iel 🚧 💻 |  chenxi24 💻 |
 小九九 💻 |  AlanLee 💻 |  Echo 💻 |  GaoNeng 💻 |  行言 💻 |  devin 💻 |  无声 💻 |
 sleep_fish 💻 |  迷心whylost 💻 |  X.Q. Chen 🚇 💻 |  葉家男孩 💻 |  lihai 💻 |  纳撸多 💻 |  ElsaOOo 🚧 🚇 💻 |
 刘小迪 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
![@allcontributors[bot]](https://avatars.githubusercontent.com/in/23186?s=64&v=4){kind=small}
