浅谈Vue（使用vue+element ui搭建页面）

来源：互联网发布：提高心理承受能力知乎编辑：程序博客网时间：2024/06/06 04:10

前言：项目使用vue，记录搭建项目到上线心得，会一直跟新………

vue + element 搭建网页是一件不错的选择

element网页布局

//element官网提供了很多布局结构，这只是一些布局心得，网站布局都是至上而下，至左而右<el-row>  <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>//布局可能经常用到的就是offset,个人感觉element的布局分布与bootstrap相似。<el-row></el-row>分为24网格<el-col :span="6" :offset="6">:span 占用的网格数  offset向右平移的网格数常用的可以通过flex布局（数据来源element ui）<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>

flex element布局

定义type为 flex,justify 可选start, center, end, space-between, space-around

start 左边开始排列
center 居中排列
end 右边开始排列
space-between 左右开始平分排列
space-around 居中平分排列

布局常用也差不多这样，考虑响应式布局带上xs,sm,md,lg

xs       <768px sm       ≥768px md       ≥992 lg      ≥1200

阅读全文

0 0