Doran-ui

基于vue(2.x)的一套中后台ui框架

注：因为没有经过系统的测试和推广，该ui目前仅供学习。 views目录是各个组件的使用demo

在线预览

全局引入

一般在 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 (文字提示) 文档说明