Vue 封装grid布局

Grid布局博客地址

Vue-iView-ui 和 Vue-element-ui  的 Grid  布局代码有些 冗余，现在封装一套自己的 grid布局  以 from表单为例

支持表单校验，国际化，错误信息定位，网格布局

Grid>Grid.vue

 

Grid>GridItem.vue

Grid>index.js

import Vue from 'vue'
import Grid from './Grid.vue'
import GridItem from './GridItem.vue'
Grid.install = ()=>{
    Vue.component('Grid',Grid)
}
GridItem.install = ()=>{
    Vue.component('GridItem',GridItem)
}
export {
    Grid,
    GridItem
}

main.js

import iviewUi from 'view-design'
import 'view-design/dist/styles/iview.css'
import elementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from './lang/index'
//全局引入Grid
import {Grid,GridItem} from './components/Grid/index'
Vue.use(elementUi)
Vue.use(iviewUi)
Vue.use(Grid)
Vue.use(GridItem)
new Vue({
  render: h => h(App),
  i18n
}).$mount('#app')

lang>index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
    locale : "zh",
    messages:{
        'zh':{

        },
        'en':{

        }
    }
})
export default i18n

app.vue