Skip to content

一套基于 Vue3.0 的 UI 组件库 轻量便捷,打造高效界面, 简单灵活,提升用户体验。

License

Notifications You must be signed in to change notification settings

isMrFan/dk-plus-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DK-plus 可在 vue3 的web应用中快速构建交互界面,全面的组件和便捷的工具会让您信手拈来,如鱼得水.

中文 | English

✨ 特性

  • 🪐 15+ 常用组件
  • 🏆 支持完整引入和按需引入
  • 🤟 配置简单,上手容易
  • ❤️ 根据实际需求开发
  • 📃 优质详细的文档
  • 👍 提出需求,不断完善
  • 🛠 更多特性开发中

🔑 安装

使用 pnpm 安装

pnpm add --save-dev dk-plus

使用 npm 安装

npm install --save-dev dk-plus

使用 yarn 安装

yarn add --save-dev dk-plus

🎉 快速上手

import { createApp } from 'vue'
import App from './App.vue'
import dkPlus from 'dk-plus'
import '@dk-plus/theme-chalk/src/index.scss'

createApp(App).use(dkPlus).mount('#app')

🪂 快速体验

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/dk-plus/theme-chalk/index.css"
  />
</head>

<body>
  <div id="app">
    <h1>示例</h1>
    <dk-button type="primary">默认按钮</dk-button>
    <dk-button type="success">主要按钮</dk-button>
    <dk-button type="danger">成功按钮</dk-button>
    <dk-button type="warning">警告按钮</dk-button>
  </div>
  <script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dk-plus"></script>
  <script type="module">
    const { createApp, ref } = Vue
    const app = createApp({
      setup() {
        const visible = ref(false)
        return { visible }
      }
    })
    app.use(dkPlus.default)
    app.mount('#app')
  </script>
</body>

🐳 相关链接

🌈 加入 DK-plus

添加微信请备注 Github 用户名(最近太忙暂停更新)

💌 特别感谢

感谢所有已经为 DK-plus 做出贡献的人!

📃 协议许可证

MIT