代码拉取完成,页面将自动刷新
同步操作将从 DevUI/vue-devui 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
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
。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。