1. 使用圖形化界面的方式創(chuàng)建項(xiàng)目

1.1. 使用命令vue ui, 打開(kāi)圖形化界面

1.2.?在瀏覽器中創(chuàng)建項(xiàng)目?

1.3.?點(diǎn)擊創(chuàng)建按鈕, 選擇創(chuàng)建項(xiàng)目的路徑, 然后點(diǎn)擊在此創(chuàng)建新項(xiàng)目?

1.4.?起一個(gè)項(xiàng)目名稱(chēng), 包管理器使用默認(rèn)的即可, 我們不使用git, 點(diǎn)擊下一步按鈕?

1.5.?選擇手動(dòng)配置項(xiàng)目, 點(diǎn)擊下一步按鈕?

1.6.?選擇如下功能, 點(diǎn)擊下一步按鈕?

1.7.?選擇如下配置, 點(diǎn)擊創(chuàng)建項(xiàng)目按鈕?

1.8.?創(chuàng)建項(xiàng)目, 不保存預(yù)設(shè)?

1.9.?創(chuàng)建完成?

2. 安裝element-ui插件

2.1.?選擇插件——>添加插件

2.2.?搜素vue-cli-plugin-element?

2.3.?選中vue-cli-plugin-element, 點(diǎn)擊安裝vue-cli-plugin-element。?

2.4.?完成安裝

3. Layout布局

3.1. 通過(guò)基礎(chǔ)的24分欄, 迅速簡(jiǎn)便地創(chuàng)建布局。

3.2. Row屬性

參數(shù)	說(shuō)明	類(lèi)型	可選值	默認(rèn)值
gutter	柵格間隔	number	無(wú)	0
type	布局模式, 可選flex, 現(xiàn)代瀏覽器下有效	string	無(wú)	無(wú)
justify	flex布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex布局下的垂直排列方式	string	top/middle/bottom	無(wú)
tag	自定義元素標(biāo)簽	string	*	div

3.3. Col屬性

參數(shù)	說(shuō)明	類(lèi)型	可選值	默認(rèn)值
span	柵格占據(jù)的列數(shù)	number	無(wú)	24
offset	柵格左側(cè)的間隔格數(shù)	number	無(wú)	0
push	柵格向右移動(dòng)格數(shù)	number	無(wú)	0
pull	柵格向左移動(dòng)格數(shù)	number	無(wú)	0
xs	<768px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object(例如： {span: 4, offset: 4})	無(wú)	無(wú)
sm	≥768px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object(例如： {span: 4, offset: 4})	無(wú)	無(wú)
md	≥992px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object(例如： {span: 4, offset: 4})	無(wú)	無(wú)
lg	≥1200px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object(例如： {span: 4, offset: 4})	無(wú)	無(wú)
xl	≥1920px響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object(例如： {span: 4, offset: 4})	無(wú)	無(wú)
tag	自定義元素標(biāo)簽	string	*	div

4. 隱藏類(lèi)

4.1. Element額外提供了一系列類(lèi)名, 用于在某些條件下隱藏元素。這些類(lèi)名可以添加在任何DOM元素或自定義組件上。如果需要, 請(qǐng)自行引入以下文件:

import 'element-ui/lib/theme-chalk/display.css';

?4.2. 包含的類(lèi)名及其含義為:

• hidden-xs-only: 當(dāng)視口在xs尺寸時(shí)隱藏。
• hidden-sm-only: 當(dāng)視口在sm尺寸時(shí)隱藏。
• hidden-sm-and-down: 當(dāng)視口在sm及以下尺寸時(shí)隱藏。
• hidden-sm-and-up: 當(dāng)視口在sm及以上尺寸時(shí)隱藏。
• hidden-md-only: 當(dāng)視口在md尺寸時(shí)隱藏。
• hidden-md-and-down: 當(dāng)視口在md及以下尺寸時(shí)隱藏。
• hidden-md-and-up: 當(dāng)視口在md及以上尺寸時(shí)隱藏。
• hidden-lg-only: 當(dāng)視口在lg尺寸時(shí)隱藏。
• hidden-lg-and-down: 當(dāng)視口在lg及以下尺寸時(shí)隱藏。
• hidden-lg-and-up: 當(dāng)視口在lg及以上尺寸時(shí)隱藏。
• hidden-xl-only: 當(dāng)視口在xl尺寸時(shí)隱藏。

5. Layout布局例子

5.1. 使用腳手架新建一個(gè)名為element-ui-layout的前端項(xiàng)目, 同時(shí)安裝Element插件。

5.2. 在components下創(chuàng)建BaseGrid.vue?

<template><div><h1>基礎(chǔ)布局-使用單一分欄創(chuàng)建基礎(chǔ)的柵格布局</h1><h4>通過(guò)row和col組件, 并通過(guò)col組件的span屬性我們就可以自由地組合布局。</h4><el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row></div> </template>

5.3. 在components下創(chuàng)建GutterGrid.vue

<template><div><h1>分欄間隔-分欄之間存在間隔</h1><h4>Row組件提供gutter屬性來(lái)指定每一欄之間的間隔, 默認(rèn)間隔為0。</h4><el-row :gutter="20"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row></div> </template>

5.4. 在components下創(chuàng)建OffsetGrid.vue

<template><div><h1>分欄偏移-支持偏移指定的欄數(shù)</h1><h4>通過(guò)制定col組件的offset屬性可以指定分欄偏移的欄數(shù)。</h4><el-row :gutter="20"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="20"><el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="20"><el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col></el-row></div> </template>

5.5. 在components下創(chuàng)建JustifyGrid.vue

<template><div><h1>對(duì)齊方式-通過(guò)flex布局來(lái)對(duì)分欄進(jìn)行靈活的對(duì)齊</h1><h4>將type屬性賦值為'flex', 可以啟用flex布局, 并可通過(guò)justify屬性來(lái)指定start, center, end, space-between, space-around其中的值來(lái)定義子元素的排版方式。</h4><el-row type="flex" class="row-bg" style="height: 100px;" align="bottom"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="center"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="end"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="space-between"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row><el-row type="flex" class="row-bg" justify="space-around"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col></el-row></div> </template>

5.6. 在components下創(chuàng)建ResponseGrid.vue

<template><div><h1>響應(yīng)式布局-根據(jù)屏幕寬度進(jìn)行響應(yīng)式</h1><h4>參照了Bootstrap的響應(yīng)式設(shè)計(jì), 預(yù)設(shè)了五個(gè)響應(yīng)尺寸: xs、sm、md、lg和xl。</h4><el-row :gutter="10"><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col></el-row></div> </template>

5.7. 編寫(xiě)App.vue

<template><div id="app"><router-view></router-view></div> </template><script> export default {name: 'app' } </script><style>#app {margin: 0 auto;width: 90%;border: 1px solid black;}h1 {text-align: center;}.el-row {margin-bottom: 20px;&:last-child {margin-bottom: 0;}}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;} </style>

5.8. 編寫(xiě)index.js

import Vue from 'vue' import VueRouter from 'vue-router' import BaseGrid from '../components/BaseGrid.vue' import GutterGrid from '../components/GutterGrid.vue' import OffsetGrid from '../components/OffsetGrid.vue' import JustifyGrid from '../components/JustifyGrid.vue' import ResponseGrid from '../components/ResponseGrid.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/BaseGrid' },{ path: '/BaseGrid', component: BaseGrid },{ path: '/GutterGrid', component: GutterGrid },{ path: '/OffsetGrid', component: OffsetGrid },{ path: '/JustifyGrid', component: JustifyGrid },{ path: '/ResponseGrid', component: ResponseGrid } ]const router = new VueRouter({routes })export default router

5.9. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/BaseGrid

5.10. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/GutterGrid?

5.11. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/OffsetGrid?

5.12. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/JustifyGrid?

5.13. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/ResponseGrid, 屏幕款為xl?

5.14. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/ResponseGrid, 調(diào)整屏幕款為xs?

?5.15. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/ResponseGrid, 調(diào)整屏幕款為sm

5.16. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/ResponseGrid, 調(diào)整屏幕款為md

?5.17. 運(yùn)行項(xiàng)目, 訪(fǎng)問(wèn)http://localhost:8080/#/ResponseGrid, 調(diào)整屏幕款為lg

總結(jié)

以上是生活随笔為你收集整理的001_Layout布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。