Doran-ui

基于vue(2.x)的一套中后台ui框架，ui设计是基于element和iview的ui设计来做的

目前市面上充斥着各种优秀的vue组件库，有没有想过底层是怎么实现的？对于一个成熟的组件库，因为迭代版本已经很多次了，所以看那些组价库的源码是极其痛苦的，Doran-ui迭代次数少，源码内部自认为难懂的地方都添加的有注释，源码简单易读，是学习进步，了解底层知识的大好东西，值得去阅读学习
github地址，欢迎大家start，另外有不懂或者发现bug的话，可以提issues，我看到的话会及时回复的

注：因为没有经过系统的测试和推广，该ui目前仅供学习。

views目录是各个组件的使用demo

git clone https://github.com/ximoThorn/Doran.git
cd Doran
npm i
npm run serve

在线预览

全局引入

一般在 webpack 入口页面 main.js 中如下配置：

import  Vue  from  'vue'
import  DoranUi  from  'doran'
import  'doran/dist/doran.css'  // 引入css
import  App  from  './App.vue'

Vue.use(DoranUi)

new  Vue({
    render: h  =>  h(App),
}).$mount('#app')

按需引入

借助插件babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在项目根目录文件 .babelrc 中配置：

npm install babel-plugin-import --save-dev // 安装

在.babelrc文件中

{
    "plugins": [["import", {
        "libraryName": "doran",
        "libraryDirectory": "dist/components"
    }]]
}

然后这样按需引入组件，就可以减小体积了：

<template>
    <div  id="app">
        <dr-button  type="error">Doran</dr-button>
        <dr-input  placeholder="请输入"></dr-input>
    </div>
</template>
<script>
import { Button, Input } from  'doran'
export  default {
    name: 'App',
    components: {
        DrButton: Button,
        DrInput: Input
    }
}
</script>

注意：按需引用仍然需要导入样式，即在 main.js中全局引入

Version

1.x

Completed components

• Icon (图标) 文档说明

• Grid (栅格) 文档说明

• Collapse (折叠面板) 文档说明

• Button (按钮) 文档说明

• Radio (单选) 文档说明

• Checkbox (多选) 文档说明

• Switch (开关) 文档说明

• Badge (微标) 文档说明

• Avatar (头像) 文档说明

• Breadcrumb (面包屑) 文档说明

• Tag (标签) 文档说明

• Progress (进度条) 文档说明

• Rate (评分) 文档说明

• Divider (分割线) 文档说明

• InputNumber (数字输入框) 文档说明

• Input (输入框) 文档说明

• Select (选择器) 文档说明

• Pagination (分页器) 文档说明

• Dropdown (下拉菜单) 文档说明

• Card (卡片) 文档说明

• Notification (通知) 文档说明

• Popover (弹出框) 文档说明

• tooltip (文字提示) 文档说明

本作品采用《CC 协议》，转载必须注明作者和本文链接