001_ layout

1. Use Create a project with a graphical interface

1.1. Use command vue ui, Open the graphical interface

1.2.  Create a project in the browser  

1.3.  Click the Create button , Choose the path to create the project , Then click here to create a new project  

1.4.  Start a project name , The package manager uses the default , We don't use git, Click the next button  

1.5.  Select manual configuration items , Click the next button  

1.6.  Select the following functions , Click the next button  

1.7.  Select the following configuration , Click the create project button  

1.8.  Create project , Do not save presets  

1.9.  The creation is complete  

2. install element-ui plug-in unit

2.1.  Choose plug-ins ——> Add the plug-in

2.2.  Search element vue-cli-plugin-element 

2.3.  Choose vue-cli-plugin-element, Click on the install vue-cli-plugin-element. 

2.4.  Complete the installation

3. Layout Layout

3.1. Through basic 24 Columns , Create layouts quickly and easily .

3.2. Row attribute

Parameters	explain	type	Optional value	The default value is
gutter	Grid spacing	number	nothing	0
type	Layout mode , Optional flex, It works in modern browsers	string	nothing	nothing
justify	flex The horizontal arrangement under the layout	string	start/end/center/space-around/space-between	start
align	flex Vertical arrangement under layout	string	top/middle/bottom	nothing
tag	Custom element tags	string	*	div

3.3. Col attribute

Parameters	explain	type	Optional value	The default value is
span	The number of columns occupied by the grid	number	nothing	24
offset	The number of spaces to the left of the grid	number	nothing	0
push	The grid moves the number of squares to the right	number	nothing	0
pull	The grid moves left by the number of cells	number	nothing	0
xs	<768px Responsive grid number or grid attribute object	number/object( for example ： {span: 4, offset: 4})	nothing	nothing
sm	≥768px Responsive grid number or grid attribute object	number/object( for example ： {span: 4, offset: 4})	nothing	nothing
md	≥992px Responsive grid number or grid attribute object	number/object( for example ： {span: 4, offset: 4})	nothing	nothing
lg	≥1200px Responsive grid number or grid attribute object	number/object( for example ： {span: 4, offset: 4})	nothing	nothing
xl	≥1920px Responsive grid number or grid attribute object	number/object( for example ： {span: 4, offset: 4})	nothing	nothing
tag	Custom element tags	string	*	div

4. Hidden class

4.1. Element Additionally, a series of class names are provided , Used to hide elements under certain conditions . These class names can be added to any DOM Element or custom component . if necessary , Please introduce the following documents by yourself :

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

 4.2. The included class name and its meaning are :

• hidden-xs-only: When the view is in xs Hide in size .
• hidden-sm-only: When the view is in sm Hide in size .
• hidden-sm-and-down: When the view is in sm Hidden when size and below .
• hidden-sm-and-up: When the view is in sm Hidden when size and above .
• hidden-md-only: When the view is in md Hide in size .
• hidden-md-and-down: When the view is in md Hidden when size and below .
• hidden-md-and-up: When the view is in md Hidden when size and above .
• hidden-lg-only: When the view is in lg Hide in size .
• hidden-lg-and-down: When the view is in lg Hidden when size and below .
• hidden-lg-and-up: When the view is in lg Hidden when size and above .
• hidden-xl-only: When the view is in xl Hide in size .

5. Layout Layout example

5.1. Use the scaffold to create a new one named element-ui-layout Front end projects , At the same time to install Element plug-in unit .

5.2. stay components Create BaseGrid.vue 

<template>
  <div>
    <h1> Basic layout - Use a single column to create a basic grid layout </h1>
    <h4> adopt row and col Components ,  And pass col Component's span Attribute, we can combine the layout freely .</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. stay components Create GutterGrid.vue

<template>
  <div>
    <h1> Column spacing - There is a gap between the columns </h1>
    <h4>Row Component supply gutter Property to specify the interval between each column ,  The default interval is 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. stay components Create OffsetGrid.vue

<template>
  <div>
    <h1> Column offset - Support offset the specified number of columns </h1>
    <h4> By making col Component's offset Property to specify the number of columns to 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. stay components Create JustifyGrid.vue

<template>
  <div>
    <h1> Alignment mode - adopt flex Layout for flexible alignment of columns </h1>
    <h4> take type Property is assigned to 'flex',  Enable flex Layout ,  And through justify Property to specify start, center, end, space-between, space-around Value to define the layout of the child elements .</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. stay components Create ResponseGrid.vue

<template>
  <div>
    <h1> Responsive layout - Respond according to the screen width </h1>
    <h4> By reference Bootstrap The responsive design of ,  Five response sizes are preset : xs、sm、md、lg and 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. To write 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. To write 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. Run the project , visit http://localhost:8080/#/BaseGrid

5.10. Run the project , visit http://localhost:8080/#/GutterGrid 

5.11. Run the project , visit http://localhost:8080/#/OffsetGrid 

5.12. Run the project , visit http://localhost:8080/#/JustifyGrid 

5.13. Run the project , visit http://localhost:8080/#/ResponseGrid, Screen payment is xl 

5.14. Run the project , visit http://localhost:8080/#/ResponseGrid, Adjust the screen payment to xs 

 5.15. Run the project , visit http://localhost:8080/#/ResponseGrid, Adjust the screen payment to sm

5.16. Run the project , visit http://localhost:8080/#/ResponseGrid, Adjust the screen payment to md

 5.17. Run the project , visit http://localhost:8080/#/ResponseGrid, Adjust the screen payment to lg