Vue 和 iView 一起使用可以方便快捷地完成布局設(shè)計。下面將介紹基于 iView 的 Vue 布局方法。

首先在 Vue 中安裝 iView

npm install iview --save

然后，在 main.js 文件中引用 iView，并導(dǎo)入需要的組件，比如 Button、Input、Layout 等等。

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
import { Button, Input, Layout } from 'iview'
Vue.component('Button', Button)
Vue.component('Input', Input)
Vue.component('Layout', Layout)

接著，在 App.vue 中使用 Layout 組件進(jìn)行整體布局設(shè)計。

布局分為三個部分：Header、Content 和 Footer。在 Layout 中包含這三個部分，然后設(shè)置 Header 的內(nèi)容為 logo，Content 的內(nèi)容為主要內(nèi)容，F(xiàn)ooter 的內(nèi)容為頁腳信息。

然后，可以使用 iView 的 Grid 組件在 Content 中進(jìn)行柵格布局。

logo
left menumain content

在這里，使用 Col 組件進(jìn)行柵格布局，設(shè)置左側(cè)菜單區(qū)域的占比為 6，主要內(nèi)容區(qū)的占比為 18。

以上是基于 iView 的 Vue 布局方法的簡單介紹。通過這些布局技巧，可以方便快捷地完成頁面設(shè)計。