Doran-ui

Based on Vue (2. X) a set of background UI framework, UI design is based on the UI design of element and iView

At present, there are all kinds of excellent Vue component libraries in the market. Have you ever thought about how to realize the bottom layer? For a mature component library, it is extremely painful to look at the source code of the component library because it has been iterated many times,Doran UI has few iterations, and comments are added to the source code where it is difficult to understand. The source code is simple and easy to read. It is a good thing for learning progress and understanding the underlying knowledge, which is worth reading and learning
githubAddress, welcome to start, in addition, do not understand or find bugs, you can mentionissuesI’ll get back in time if I see it

Note: because it has not been tested and promoted, the UI is only for learning.

The views directory is the demo of each component

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

on-linepreview

Global introduction

Generally in the webpack entry page main.js The configuration is as follows:

import  Vue  from  'vue'
import  DoranUi  from  'doran'
import  'doran/dist/ doran.css '// introduce CSS
import  App  from  './App.vue'

Vue.use(DoranUi)

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

On demand introduction

With plug-insbabel-plugin-importIt can load components on demand and reduce the volume of files. First, install and configure in the project root file. Babelrc

NPM install Babel plugin import -- save dev // install

In. Babelrc file

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

Then, by introducing components as needed, the volume can be reduced

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

Note: you still need to import styles for on-demand references main.js Global introduction in

Version

1.x

Completed components

• Icon (icon)Document description

• GridDocument description

• Collapse (folding panel)Document description

• Button (button)Document description

• Radio (radio)Document description

• Checkbox (multiple choice)Document description

• SwitchDocument description

• Badge (micro label)Document description

• AvatarDocument description

• BreadcrumbDocument description

• Tag (tag)Document description

• Progress (progress bar)Document description

• RateDocument description

• Divider (split line)Document description

• Inputnumber (numeric input box)Document description

• Input (input box)Document description

• Select (selector)Document description

• Pagination (pager)Document description

• Dropdown (drop down menu)Document description

• Card (card)Document description

• NotificationDocument description

• Popover (pop up box)Document description

• Tooltip (text prompt)Document description

This work adoptsCC agreementReprint must indicate the author and the link of this article