Unit testing of the BDD test pattern has been completed and deployed to the Travis Ci for continuous integration

FliUI home page

UI manuscript (for details, please visit the home page):

introduce

A set of components based on Vue development library, no dependence, small size, easy to use

The characteristics of

  • ES6 using the latest syntax prepared, based on Vue framework code, suitable for novice reading
  • Source code is very simple, you can freely expand component functions
  • Built on the latest versions of Webpack and Babel, compatible with a variety of introduction methods

Begin to use

1. Add CSS styles

Before using this framework, enable border-box in the CSS

*,*::before,*::after{box-sizing:border-box; }Copy the code

2. References

  • App.js global introduction of fliUi(not recommended)
import {Button,ButtonGroup,Row,Col,Header,Footer,Content,Sider,Layout,Icon,Input,Toast,plugin,Tabs,TabsHead,TabsBody,TabsItem,C ollapse,CollapseItem,Popover} from'fli-ui'
import 'flight-ui/dist/index.css'

Vue.component('f-button', Button)
Vue.component('f-icon', Icon)
Vue.component('f-button-group', ButtonGroup)
Vue.component('f-input', Input)
Vue.component('f-row', Row)
Vue.component('f-col', Col)
Vue.component('f-layout', Layout)
Vue.component('f-header', Header)
Vue.component('f-footer', Footer)
Vue.component('f-sider', Sider)
Vue.component('f-content', Content)
Vue.component('f-toast', Toast)
Vue.component('f-tabs', Tabs)
Vue.component('f-tabs-head', TabsHead)
Vue.component('f-tabs-body', TabsBody)
Vue.component('f-tabs-item', TabsItem)
Vue.component('f-tabs-pane', TabsPane)
Vue.component('f-popover', Popover)
Vue.component('f-collapse', Collapse)
Vue.component('f-collapse-item', CollapseItem)

Copy the code
  • Modular reference

Used in the used component

import Button from 'fli-ui'
    export default {
        components: {
            'f-button': Button,
        },
Copy the code

Test cases

<template>
    <div>
        <f-button @click="showToast('top')"<f-button @click= <f-button @click="showToast('middle')"<f-button @click= <f-button @click="showToast('bottom')"</f-button> </div> </template> <script> import button from'.. /.. /.. /src/button'
    import plugin from '.. /.. /.. /src/plugin'
    import Vue from "vue";
    Vue.use(plugin)

    export default {
        components: {
            'f-button':Button,
        },
        methods: {
            showToast(position) {
                this.$toast('hello Toast', {
                    position,
                })
            }
        },
        data() {
        }
    }
</script>
Copy the code

The outermost element of the component is automatically added with the f-* class name. You can also add your own container element around the component and add your own class name to override the default style

3. Click the link above the project to obtain the usage method

run

You can run the project directly by following these steps:

1.git clone [email protected]:yinlong22/flight-UI.git
2.npm install
3.npm run start
Copy the code

The run entry is SRC /app.js file, which is the use code of each component. You can reference all components here and modify the test freely

Start the

npm run docs:dev
Copy the code

build

npm run docs:build
Copy the code

packaging

npm run build
Copy the code

The document

This project document was built using Vuepress. There are descriptions and examples of each component in the Docs directory. If you want to add documentation for your own components, you need to repackage the project after editing the corresponding files, and finally redeploy the generated files

You can refer to the official documentation for specific usage methods

instructions

The development purpose of this project is mainly personal learning, research and summary of technology. Secondly can complete the use of good UI components, I hope to help you

reference

This component library references some of the more mature UI frameworks, including but not limited to the look and feel, API design, and even source code implementation, thanks to the open source community contributors

  • Element
  • iView
  • wheels
  • bootstrap