同步操作将从 DevUI/vue-devui 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Vue DevUI 是 Vue3 版本的 DevUI 组件库,基于 https://github.com/devcloudfe/ng-devui,倡导沉浸
、灵活
、至简
的设计价值观。
DevUI 官方网站:https://devui.design
DevUI开源项目正在参加2021年度OSC中国开源项目评选,欢迎大家给我们DevUI Design
投上宝贵的一票:
想了解DevUI开源的故事,可以阅读以下文章:
该项目还处于孵化和演进阶段,欢迎大家参与到 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
在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
(推荐)配置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。
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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。