VueVue 项目前端响应式布局及框架搭建
Posted 骑着蜗牛ひ追导弹'
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueVue 项目前端响应式布局及框架搭建相关的知识，希望对你有一定的参考价值。
文章目录
Vue 项目前端响应式布局及框架搭建
环境
- Vue 3.0+Vue-router+axios、flex布局、LESS、rem屏幕适配、echarts 5.0、nodejs+express
一、项目基本结构
二、项目分辨率响应式创建
项目是需要根据页面的大小改变 做出响应式改变的 所以我们可以使用第三方插件
flexible.js帮助我们修改html根节点的font-size大小,从而控制当前页面的rem(会根据页面的html根节点font-size大小改变而改变)样式改变
1、flexible.js
flexible.js: web自适应方案 ,阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。
下载 flexible：
G:\\Projects\\VsCodeProject\\vue\\app>npm install --save lib-flexible
2、引用 flexible 插件
下载完成后找到 src 下的 main.js 进行配置，import导入:
3、修改 flexible 默认配置
默认情况下只会在 540px分辨率 下生效 所以我们需要根据我们的项目分辨率进行调整,在node_module/lib-flexible/flexible.js中修改代码如下:
function refreshRem()
var width = docEl.getBoundingClientRect().width;
// if (width / dpr > 540)
// width = 540 * dpr;
//
// var rem = width / 10;
// 修改 最大值：2560 最小值：400
if (width /dpr < 400)
width = 400 * dpr;
else if(width /dpr > 2560)
width = 2560 * dpr;
// 设置成24分 1920px设计稿 1rem=80px
var rem = width / 24;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
修改好了之后重启项目: ·G:\\Projects\\VsCodeProject\\vue\\app>npm run serve ,这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个font-size，当我们拖动窗口大小的时候，其值会自动改变。
4、cssrem 插件 (px -> rem)
我们在写代码的时候发现如果我们都根据80px为1rem在编写代码的时候转换非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 ,这样一来开发过程中会更加的方便：
我们打开 homePage.vue 页面，添加一个测试的 div 样式， font-size 设置为 50px，可以发现提示中自动帮我们转换成了 3.125rem：
如果不能够换成对应的比例，可能cssrem还使用的默认 16px -> 1rem,找到安装的插件，打开设置，设置 Root Font Size 修改为 80 即可：
三、项目页面框架搭建
1、设置背景图
将图片放入assets文件夹中 在app.vue中设置背景图:
<template>
<router-view/>
</template>
<style lang="less">
*
margin: 0px;
padding: 0px;
box-sizing: border-box;//border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。
body
background: url("~@/assets/bg.jpg") top center no-repeat;
</style>
2、设置标题文字
在 homePage.vue 中设置页面的顶部标题栏并进行相应的css样式：
<template>
<div>
<!-- 顶部标题栏 -->
<header>
<h1>大数据可视化--vue3.0与echarts</h1>
</header>
</div>
</template>
<script>
export default
</script>
<style lang="less">
header
height: 1rem;
width: 100%;
/* 设置一个半透明淡蓝色背景 */
background-color: rgba(0, 0, 255, .2);
/* 把标题文字样式设置 */
h1
font-size: .375rem;
color:#fff;
text-align: center;
line-height: 1rem;
</style>
3、页面主体部分
（1）section 主体部分
<template>
<div>
<!-- 顶部标题栏 -->
<header>
<h1>大数据可视化 - Vue3.0&echarts</h1>
</header>
<!-- 中间容器 -->
<section class="container">
</section>
</div>
</template>
<style lang='less'>
/* 中间容器 */
.container
// 最大最小的宽度
min-width: 1200px;
max-width: 2048px;
margin: 0 auto;
// 盒子上10px 左右10px 下0的外边距
padding: .125rem .125rem 0;
// 测试
height: 10rem;
background-color: grey;
</style>
出去头部标题栏部分，我们需要设置主体的图表展示部分，创建一个类名为container的section容器，并为其设置css样式（测试）：
（2）左、中、右布局
创建左中右这三个部分,分别进行图型的展示。这个时候我们可以使用flex布局来分割他们所占的区块大小，那么他们的占比分别是 3 5 3 。首先创建三个section容器，分别表示左、中、右部分，然后对其应用 flex布局，并设置占比。
<template>
<div>
<header>
<h1>大数据可视化--vue3.0与echarts</h1>
</header>
<!-- 大容器 -->
<section class='container'>
<!-- 左容器 -->
<section class='itemLeft'>1</section>
<!-- 中容器 -->
<section class='itemCenter'>2</section>
<!-- 右容器 -->
<section class='itemRight'>3</section>
</section>
</div>
</template>
<style lang='less'>
/* 中间容器 */
.container
// 最大最小的宽度
min-width: 1200px;
max-width: 2048px;
margin: 0 auto;
// 盒子上10px 左右10px 下0的外边距
padding: 0.125rem 0.125rem 0;
display: flex; //父容器设置flex布局才能在子元素使用
// 设置左中右的占比 但是不要忘了在父容器要设置flex
.itemLeft,
.itemRight
flex: 3;
background-color: pink; // 测试后注释掉
.itemCenter
flex: 5;
background-color: orange; // 测试后注释掉
</style>
效果如图所示：
（3）左、右图表容器整体插槽
大家会发现我们要展示的左、右4个区域的容器效果是一样的。所以我们可以剥离成一个组件 然后重复调用即可。并且在其中放置slot 槽口,后期方便向容器内插入图表。
在components文件夹下创建 itemPage.vue 创建容器组件：
<template>
<div class="item">
<!-- 设置插槽 -->
<slot></slot>
</div>
</template>
<script>
export default ;
</script>
<style>
.item
/* 高度410px */
height: 5.125rem;
border: 1px solid blue;
/* 外边距20px */
margin: 0.25rem;
background-color: rgba(13, 130, 255, 0.851);
</style>
在views下的homePage中引用调用使用:
<template>
<div>
<!-- 顶部标题栏 -->
<header>
<h1>大数据可视化 - Vue3.0&echarts</h1>
</header>
<!-- 中间容器 -->
<section class="container">
<!-- 左容器 -->
<section class="itemLeft">
<!-- 调用插槽组件 -->
<ItemPage />
<ItemPage />
</section>
<!-- 中容器 -->
<section class="itemCenter">2</section>
<!-- 右容器 -->
<section class="itemRight">
<ItemPage />
<ItemPage />
</section>
</section>
</div>
</template>
<script>
// 导入插槽组件
import ItemPage from "@/components/itemPage.vue";
export default
components:
ItemPage,
,
;
</script>
（4）左、右各图表容器插槽
左、右一共4个图标 使用一个公共的组件容器 所以我们编写这4个不同图表的组件并且分别显示。然后在4个文件中分别设置相关内容与样式（每个图表的标题不一样要修改）：
<template>
<div>
<h2>图表一</h2>
<div class="chart">
<!-- 图标容器 -->
</div>
</div>
</template>
<script>
export default
</script>
<style>
</style>
在homePage.vue中引用调用使用这4个组件：
<template>
<div>
<!-- 顶部标题栏 -->
<header>
<h1>大数据可视化 - Vue3.0和echarts</h1>
</header>
<!-- 中间容器 -->
<section class="container">
<!-- 左容器 -->
<section class="itemLeft">
<ItemPage>
<itemOne />
</ItemPage>
<ItemPage>
<itemTwo />
</ItemPage>
</section>
<!-- 中容器 -->
<section class="itemCenter">
<h2>地图展示</h2>
</section>
<!-- 右容器 -->
<section class="itemRight">
<ItemPage>
<itemThree />
</ItemPage>
<ItemPage>
<itemFour />
</ItemPage>
</section>
</section>
</div>
</template>
<script>
// 导入插槽组件
import ItemPage from "@/components/itemPage.vue";
// 左右4个小组件的引用
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
export default
components:
ItemPage,itemOne,itemTwo,itemThree,itemFour
,
;
</script>
（5）中间图表容器布局
在views文件夹下的 homePage.vue 中设置中间区域容器样式，设置容器高度、内外边距、边框：
<!-- 中间容器 -->
<section class="itemCenter"><h2>地图展示</h2></section>
</style>
/* 中间容器 */
.container
.itemCenter
flex: 5;
// 高度840px
height: 10.5rem;
border: 1px solid blue;
// 内边距10px
padding: 0.125rem;
// 外边距20px
margin: 0.25rem;
</style>
四、图表环境搭建
1、Echarts 全局引用
下载 npm install --save echarts
在vue2.0中使用如下写法把echarts挂载在vue实例上,但是这招在3.0行不通了:
// 引用echarts
import * as echarts from "echarts"
Vue.prototype.$echarts=echarts;
在 vue3.0中，在App.vue 中导入全局的echarts组件：
<template>
<router-view />
</template>
<script>
import provide from "vue";
// 引用echarts
import * as echarts from "echarts";
export default
setup()
//第一个参数是名字 第二个参数是你传递的内容
provide("echarts", echarts); // 不是provider，否则会出现下面报错
,
;
</script>
在homePage.vue中进行引用和调用:
<script>
// 导入插槽组件
import ItemPage from "@/components/itemPage.vue";
// 左右4个小组件的引用
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
import inject from '@vue/runtime-core';
export default
components:
ItemPage,itemOne,itemTwo,itemThree,itemFour,
,
// 导入echarts组件
setup()
let $echarts = inject("echarts");
// 控制台打印信息
console.log($echarts);
;
</script>
重新运行项目查看控制台的输出，发现报错，原因是函数名称写错了（见上面App.vue的注释）：
修改后重新运行，可以看到控制台打印了所有的echarts属性信息：
2、Axios 全局引用
下载 npm install --save axios
在 vue3.0中，在App.vue 中导入全局的echarts组件：
<template>
<router-view />
</template>
<script>
import provide from "vue";
// 引用echarts
import * as echarts from "echarts";
// 引用axios
import axios from 'axios';
export default
setup()
//第一个参数是名字 第二个参数是你传递的内容
provide("echarts", echarts);
provide("axios", axios);
,
;
</script>
在homePage.vue中进行引用和调用:
<script>
// 导入插槽组件
import ItemPage from "@/components/itemPage.vue";
// 左右4个小组件的引用
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
import inject from '@vue/runtime-core';
export default
components:
ItemPage,itemOne,itemTwo,itemThree,itemFour前端框架bootstrap(响应式布局)入门
Bootstrap,是基于HTML,CSS.javascript的前端框架
该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.)
开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现.
作用:
1.Bootstrap使得Web开发更加快捷,高效
2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题.
简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton 合作开发.
Bootstrap基础入门使用的都是自带CSS样式,高级开发中需要使用HTML,CSS3.动态CSS语言Less进行自定义开发
中文官网是:http://www.bootcss.com
什么是响应式布局,响应式布局能够解决的问题.
响应式布局:一个网站的展示能够兼容多个终端(手机,iPad,PC等),而不需要为每一个终端单独做一个展示版本.
此概念专为解决移动互联网浏览而诞生的.
响应式布局,使得网站仅适用一套样式,就可以在不同分辨率下展示出不同的舒适效果,大大降低了网站开发维护成本.并且能带给用户更好的体验性.
未使用响应式开发:
当分辨率为一般PC屏幕(12寸)时,样式显示正常
当屏幕尺寸变小的时候,分辨率变小至移动设备(12寸以下)时,按原先样式就无法正常显示了,必须专门为该屏幕调整样式.
使用了响应式开发:
使用了响应式开发 PC大屏幕分辨率,自行改变为PC适合的样式.
BootStrap的环境搭建:
环境的下载:
中文官网地址：https://getbootstrap.com/可以自己进行选择版本.
您会看到两个按钮：
- Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
- Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。
我这次使用的是Bootstrap的预编译版本
由于文件是被编译过和压缩过的,在独立的功能开发中,您不必每次都包含这些独立的文件.
目录结构为:
内容结构
发布版,及开始使用到的BootStrap内容结构
这里有一个简单的模板:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
布局容器:
BootStrap必须需要至少一个布局容器,才能为页面内容进行封装和方便的样式控制,相当于一个画板.
任意元素使用了布局容器的样式,都会称为一个布局容器,建议使用div作为布局容器.
为了展示效果明显,我们为div加入了边框样式:style="border:1px solid red;"
示例:
<!--定义一个bootstrap的容器-->
<div class="container" style="border:1px solid red">
1111111111
</div>
效果为:
<div class="container-fluid" style="border:1px solid red">
1111111111
</div>
bootstarp的栅格系统
简述栅格系统:
为了方便杂布局容器中进行网页的布局操作,BootStrap提供了一套专门用于响应式开发布局的栅格系统.栅格系统将一行分为12列,通过设定元素占用的列数来布局元素在页面上的展示位置.
作用:可以让开发人员更加轻松进行网页布局,并且轻松进行响应式开发.
栅格系统的特点:
栅格的特点:
"行"必须包含在.container(固定高度)或.container-fluid(100%宽度)中
行使用的样式.row 列使用的样式col-*-*元素内容应当放置于"列(column)"内
基本的书写方式必须是:容器--行-列-内容
HTML表格:定义一个表格--行--单元格
栅格参数:col--屏幕尺寸-占用列数
列元素的书写顺序,决定布局顺序,先写的列元素会被先布局到行上.
列元素的占用行数,定义列元素的大小.
为了方便显示元素大小,我们为展示元素都赋予了相同的样式:border:1px solid red;height:100px
示例1:一个元素占一行
<div class="container">
<div class="col-lg-12" style="border:1px solid red;height: 100px;">
1111111
</div>
</div>
两个元素占一行
<div class="container">
<div class="row">
<div class="col-lg-6" style="border: 1px solid red; height: 100px;">1111</div>
<div class="col-lg-6" style="border: 1px solid red; height: 100px;">2222</div>
</div>
</div>
四个元素占一行
<div class="container">
<div class="row">
<div class="col-lg-3" style="border: 1px solid red;height: 100px;">333333</div>
<div class="col-lg-3" style="border: 1px solid red;height: 100px;">333333</div>
<div class="col-lg-3" style="border: 1px solid red;height: 100px;">333333</div>
<div class="col-lg-3" style="border: 1px solid red;height: 100px;">333333</div>
</div>
</div>
注意:
一个row下,如果设置的col列数总和小于等于12那么该row下元素在一行排列
一个row下,如果设置的col列数总和大于12,那么超出的元素会另起一行排列
行和列可以进行无限嵌套,嵌套方式必须为列--行--列--行
一个row元素下,有12列
栅格屏幕尺寸设置
屏幕尺寸简述:
large:lg ----大屏幕,一般PC尺寸
medium:md ----中等屏幕,小PC尺寸
small:sm ----小屏幕 iPad尺寸
x small :xs ----超小屏幕,智能手机尺寸.
为了方便显示元素大小,我们为展示元素都赋予了相同样式,:border:1px solid red;height:100px
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;">
11111
</div>
<div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;">
22222
</div>
<div class="col-lg-2 col-md-4 col-sm-12" style="border:1px solid red;height:100px;">
33333
</div>
</div>
</div>
大屏幕下:
中屏幕下:
小屏幕下:
注意:
若设置了某个屏幕尺寸的样式,那么比该尺寸大的屏幕,会沿用该设置,比该尺寸小的屏幕,会默认一个元素占12列的设置.
例如:设置了col-md-4,那么相当于也设置了col-lg-4,其他屏幕尺寸均默认为col-sm-12,col-xs-12;
列偏移
通常情况下我们需要将元素居中显示,需要左边空出一定的空白区域,这里我们就可以使用列偏移来达到效果.
响应式工具:
为针对性地在移动页面上展示和隐藏不同的内容,bootStrap提供了响应式工具,可以让开发人员通过这个工具决定,在何种屏幕尺寸下,隐藏或者显示某些元素.
bootStrap常用的组件
这里是网址:可以在这个上面进行查找:https://v3.bootcss.com/css/
列表
bootstrap同样提供了实用的列表样式供开发人员使用
全局CSS样式---排版--列表
<div class="list-inline">
<li>传智播客</li>
<li>黑马程序员</li>
<li>博学谷</li>
</div>
按钮
BootStrap提供了丰富的按钮样式供开发人员使用,任何HTML元素加上一下样式都会变成对应按钮.
BootStrap已经提供了完整的导航条实例,通常情况下,我们仅需要简单修改即可使用.
组件 ---导航条
反色的导航条
通过添加.navbar-inverse类可以改变导航条的外观.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
<li ><a href="#">家电数码</a></li>
<li ><a href="#">电脑办公</a></li>
</ul>
</div>
</nav>
效果
表单的导航条
将表单放置于.navbar-form之内可以呈现很好的垂直对齐,并在较窄的视口(viewport)中呈现折叠状态.使用对齐选项可以规定其在导航条上出现的位置.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default hidden-xs">Submit</button>
</form>
<div/>
</nav>
解释:视口(viewport):即浏览器上网页的可视区域
视口作用:用于移动设备将大型页面进行比例缩放显示.
轮播图:
BootStrap已经提供了完整的轮播图实例,通常情况下,我们仅需进行简单修改即可使用
轮播图DIV的定时换图属性:data-interval="毫秒值"
注意:
多个轮播图必须修改轮播图的ID
javascript插件==Carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
排版 对齐方式
BootStarp提供了统一的排版方式设置,方便开发人员对内容版式进行调整
全局CSS样式--排版---对齐
会将元素内所有的内容都进行排版设置
<div class="text-center">
<img src="img/xxx.png" />
</div>
表单元素
BootStrap同样提供了丰富的表单控件供开发人员来选择
全局CSS样式--表单
效果
表单名和表单输入项共用一行
效果
校验状态--出错的样式
效果
分页条
Bootstrap为我们还准备了分页条的样式组件
组件--分页
<nav>
<!-- 分页条整体列表 -->
<ul class="pagination">
<!-- 上一页 -->
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
效果：
示例2：上一页 被禁用；索引页 第一页被选中
</a>
</li>
<!-- 索引页 -->
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!-- 下一页 -->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
效果
上一页被禁用,索引页,第一页被选中
<nav>
<!-- 分页条整体列表 -->
<ul class="pagination">
<!-- 上一页 被禁用 -->
<li class="disabled">
<a aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!-- 索引页 第一页被选中 -->
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!-- 下一页 -->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
以上是关于VueVue 项目前端响应式布局及框架搭建的主要内容，如果未能解决你的问题，请参考以下文章