1. 使用圖形化界面的方式創建項目

1.1. 使用命令vue ui, 打開圖形化界面

1.2.?在瀏覽器中創建項目?

1.3.?點擊創建按鈕, 選擇創建項目的路徑, 然后點擊在此創建新項目?

1.4.?起一個項目名稱, 包管理器使用默認的即可, 我們不使用git, 點擊下一步按鈕?

1.5.?選擇手動配置項目, 點擊下一步按鈕?

1.6.?選擇如下功能, 點擊下一步按鈕?

1.7.?選擇如下配置, 點擊創建項目按鈕?

1.8.?創建項目, 不保存預設?

1.9.?創建完成?

2. 安裝element-ui插件

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

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

2.3.?選中vue-cli-plugin-element, 點擊安裝vue-cli-plugin-element。?

2.4.?完成安裝

3. Layout布局

3.1. 通過基礎的24分欄, 迅速簡便地創建布局。

3.2. Row屬性

參數	說明	類型	可選值	默認值
gutter	柵格間隔	number	無	0
type	布局模式, 可選flex, 現代瀏覽器下有效	string	無	無
justify	flex布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex布局下的垂直排列方式	string	top/middle/bottom	無
tag	自定義元素標簽	string	*	div

3.3. Col屬性

參數	說明	類型	可選值	默認值
span	柵格占據的列數	number	無	24
offset	柵格左側的間隔格數	number	無	0
push	柵格向右移動格數	number	無	0
pull	柵格向左移動格數	number	無	0
xs	<768px響應式柵格數或者柵格屬性對象	number/object(例如： {span: 4, offset: 4})	無	無
sm	≥768px響應式柵格數或者柵格屬性對象	number/object(例如： {span: 4, offset: 4})	無	無
md	≥992px響應式柵格數或者柵格屬性對象	number/object(例如： {span: 4, offset: 4})	無	無
lg	≥1200px響應式柵格數或者柵格屬性對象	number/object(例如： {span: 4, offset: 4})	無	無
xl	≥1920px響應式柵格數或者柵格屬性對象	number/object(例如： {span: 4, offset: 4})	無	無
tag	自定義元素標簽	string	*	div

4. 隱藏類

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

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

?4.2. 包含的類名及其含義為:

• hidden-xs-only: 當視口在xs尺寸時隱藏。
• hidden-sm-only: 當視口在sm尺寸時隱藏。
• hidden-sm-and-down: 當視口在sm及以下尺寸時隱藏。
• hidden-sm-and-up: 當視口在sm及以上尺寸時隱藏。
• hidden-md-only: 當視口在md尺寸時隱藏。
• hidden-md-and-down: 當視口在md及以下尺寸時隱藏。
• hidden-md-and-up: 當視口在md及以上尺寸時隱藏。
• hidden-lg-only: 當視口在lg尺寸時隱藏。
• hidden-lg-and-down: 當視口在lg及以下尺寸時隱藏。
• hidden-lg-and-up: 當視口在lg及以上尺寸時隱藏。
• hidden-xl-only: 當視口在xl尺寸時隱藏。

5. Layout布局例子

5.1. 使用腳手架新建一個名為element-ui-layout的前端項目, 同時安裝Element插件。

5.2. 在components下創建BaseGrid.vue?

<template><div><h1>基礎布局-使用單一分欄創建基礎的柵格布局</h1><h4>通過row和col組件, 并通過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下創建GutterGrid.vue

<template><div><h1>分欄間隔-分欄之間存在間隔</h1><h4>Row組件提供gutter屬性來指定每一欄之間的間隔, 默認間隔為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下創建OffsetGrid.vue

<template><div><h1>分欄偏移-支持偏移指定的欄數</h1><h4>通過制定col組件的offset屬性可以指定分欄偏移的欄數。</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下創建JustifyGrid.vue

<template><div><h1>對齊方式-通過flex布局來對分欄進行靈活的對齊</h1><h4>將type屬性賦值為'flex', 可以啟用flex布局, 并可通過justify屬性來指定start, center, end, space-between, space-around其中的值來定義子元素的排版方式。</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下創建ResponseGrid.vue

<template><div><h1>響應式布局-根據屏幕寬度進行響應式</h1><h4>參照了Bootstrap的響應式設計, 預設了五個響應尺寸: 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. 編寫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. 編寫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. 運行項目, 訪問http://localhost:8080/#/BaseGrid

5.10. 運行項目, 訪問http://localhost:8080/#/GutterGrid?

5.11. 運行項目, 訪問http://localhost:8080/#/OffsetGrid?

5.12. 運行項目, 訪問http://localhost:8080/#/JustifyGrid?

5.13. 運行項目, 訪問http://localhost:8080/#/ResponseGrid, 屏幕款為xl?

5.14. 運行項目, 訪問http://localhost:8080/#/ResponseGrid, 調整屏幕款為xs?

?5.15. 運行項目, 訪問http://localhost:8080/#/ResponseGrid, 調整屏幕款為sm

5.16. 運行項目, 訪問http://localhost:8080/#/ResponseGrid, 調整屏幕款為md

?5.17. 運行項目, 訪問http://localhost:8080/#/ResponseGrid, 調整屏幕款為lg

總結

以上是生活随笔為你收集整理的001_Layout布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。