【Vue】Vue 项目前端响应式布局及框架搭建

文章目录

Vue 项目前端响应式布局及框架搭建

一、项目基本结构
二、项目分辨率响应式创建

1、flexible.js
2、引用 flexible 插件
3、修改 flexible 默认配置
4、cssrem 插件 (px -> rem)

三、项目页面框架搭建

1、设置背景图
2、设置标题文字
3、页面主体部分

（1）section 主体部分
（2）左、中、右布局
（3）左、右图表容器整体插槽
（4）左、右各图表容器插槽
（5）中间图表容器布局

四、图表环境搭建

1、Echarts 全局引用
2、Axios 全局引用

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

返回顶部

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

修改为

即可：

返回顶部

三、项目页面框架搭建

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布局

来分割他们所占的区块大小，那么他们的占比分别是

。首先创建三个

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,
  },
  // 导入echarts组件 
  setup(){
    let $echarts = inject("echarts");
    let $axios = inject("axios");
    console.log($echarts);
    // 控制台打印信息
    console.log($axios);
  }
};</script>

【Vue】Vue 项目前端响应式布局及框架搭建

文章目录

Vue 项目前端响应式布局及框架搭建

一、项目基本结构

二、项目分辨率响应式创建

1、flexible.js

2、引用 flexible 插件

3、修改 flexible 默认配置

4、cssrem 插件 (px -> rem)

三、项目页面框架搭建

1、设置背景图

2、设置标题文字

3、页面主体部分

（1）section 主体部分

（2）左、中、右布局

（3）左、右图表容器整体插槽

（4）左、右各图表容器插槽

（5）中间图表容器布局

四、图表环境搭建

1、Echarts 全局引用

2、Axios 全局引用

继续阅读

PAT (Advanced Level) Practise 1066 Root of AVL Tree (25)

CSU 1806 Toll

CodeChef PALPROB Palindromeness

ZOJ 1032 Area 2

UVA 590 Always on the run

FZU 1978 Repair the brackets

UVA 10344- 23 out of 5

POJ 2115 C Looooops

ZOJ 3700 Ever Dream

UVA 620 Cellular Structure

vue3 transitionvue3 transition组件和vue2 transition组件

swift资料合集

苹果审核 Guideline 2.1 - Information Needed

vue学习笔记day12 vue的生命周期

父子组件间传值的实现父子组件间传值的实现

手把手教你配置：Jenkins+Github+Webhook +Nginx自动化打包部署Vue项目