精华内容
下载资源
问答
  • 前端响应式布局框架
    2022-03-15 15:09:26

    BootStrap栅格系统

    所谓的栅格系统是指在Bootstrap3中,把我们的网页宽度等分成12等份,而每个内容占12份中对应的份数。
    在这里插入图片描述
    在这里插入图片描述

    • .container是Bootstrap中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中

    • .container-fluid也是Bootstrap中专门提供的类名,所有应用该类名的盒子,宽度均为100%

    • 分别使用.row类名和.col类名定义栅格布局的行和列

    注意:

    1. container类自带间距15px
    2. row类自带间距-15px(可以用来抵消container类的内边距)
    更多相关内容
  • Vue 项目前端响应式布局框架搭建

    千次阅读 2022-05-21 14:20:48
    Vue 项目前端响应式布局框架搭建


    一、flexible 插件

    项目是需要根据页面的大小改变 做出响应式改变的 所以我们可以使用第三方插件flexible.js帮助我们修改html根节点的font-size大小,从而控制当前页面的rem(会根据页面的html根节点font-size大小改变而改变)样式改变

    flexible.js: web自适应方案 ,阿里团队开源的一个库。使用flexible.js轻松搞定各种不同的移动端设备兼容自适应问题。

    1、引用 flexible 插件

    下载
    cnpm install --save lib-flexible

    下载完成后找到 src 下的 main.js 进行配置,import导入

    // 引用 flexible 插件
    import "lib-flexible/flexible.js";
    

    在这里插入图片描述

    2、修改 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;
        }
    

    在这里插入图片描述

    3、展示效果

    这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个font-size,当我们拖动窗口大小的时候,其值会自动改变。
    在这里插入图片描述

    二、cssrem 插件 (px -> rem)

    我们在写代码的时候发现如果我们都根据80px为1rem在编写代码的时候转换非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 ,这样一来开发过程中会更加的方便:

    在这里插入图片描述
    添加一个测试的 div 样式, font-size 设置为 50px,可以发现提示中自动帮我们转换成了 3.125rem:
    在这里插入图片描述

    如果不能够换成对应的比例,可能cssrem还使用的默认 16px -> 1rem,找到安装的插件,打开设置,设置 Root Font Size 修改为 80 即可:
    在这里插入图片描述

    三、项目搭建

    1、设置背景图

    将图片放入assets文件夹中 在app.vue中设置背景图:

    <template>
      <router-view />
    </template>
    
    <style lang="scss">
    * {
      margin: 0px;
      padding: 0px;
      box-sizing: border-box; //border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。
    }
    body {
      background: url("~@/assets/xiyang.jpg") top center no-repeat;
    }
    </style>
    
    

    在这里插入图片描述

    2、设置标题文字

    在 myPage.vue 中设置页面的顶部标题栏并进行相应的css样式:

    <template>
      <div>
        <!-- 顶部标题栏 -->
        <header>
          <h1>顶部标题栏</h1>
        </header>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    <style lang="scss">
    header {
      height: 1rem;
      width: 100%;
      /* 设置一个半透明淡蓝色背景 */
      background-color: rgba(240, 150, 213, 0.2);
      /* 把标题文字样式设置 */
      h1 {
        font-size: 0.375rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
    }
    </style>
    
    

    在这里插入图片描述

    <template>
      <div>
        <!-- 顶部标题栏 -->
        <header>
          <h1>顶部标题栏</h1>
        </header>
        <!-- 中间容器 -->
        <section class="container"></section>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    <style lang="scss">
    header {
      height: 1rem;
      width: 100%;
      /* 设置一个半透明淡蓝色背景 */
      background-color: rgba(240, 150, 213, 0.2);
      /* 把标题文字样式设置 */
      h1 {
        font-size: 0.375rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
    }
    /* 中间容器 */
    .container {
      // 最大最小的宽度
      min-width: 1200px;
      max-width: 2048px;
      margin: 0 auto;
      // 盒子上10px 左右10px 下0的外边距
      padding: 0.125rem 0.125rem 0;
      // 测试
      height: 10rem;
      background-color: rgb(228, 172, 211);
    }
    </style>
    
    

    在这里插入图片描述
    在这里插入图片描述
    由于要创建五个的容器,并且在其中放置slot 槽口,后期方便向容器内插入图表。(Vue中的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 rgb(255, 169, 243);
      /* 外边距20px */
      margin: 0.25rem;
    }
    </style>
    
    

    itemOne、itemTwo、itemThree、itemFour

    <template>
      <div>
        <h2>图表一</h2>
        <div class="chart">
          <!-- 图标容器 -->
        </div>
      </div>
    </template>
    
    <script>
    export default {};
    </script>
    
    <style></style>
    
    

    views下的myPage.vue中引用调用使用:

    <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";
    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>
    <style lang="scss">
    header {
      height: 1rem;
      width: 100%;
      /* 设置一个半透明淡蓝色背景 */
      background-color: rgba(240, 150, 213, 0.2);
      /* 把标题文字样式设置 */
      h1 {
        font-size: 0.375rem;
        color: #fff;
        text-align: center;
        line-height: 1rem;
      }
    }
    /* 中间容器 */
    .container {
      // 最大最小的宽度
      min-width: 1200px;
      max-width: 2048px;
      margin: 0 auto;
      // 盒子上10px 左右10px 下0的外边距
      padding: 0.125rem 0.125rem 0;
      background-color: rgba(226, 132, 233, 0.5);
      display: flex; //父容器设置flex布局才能在子元素使用
      // 设置左中右的占比 但是不要忘了在父容器要设置flex
      .itemLeft,
      .itemRight {
        flex: 3;
      }
      .itemCenter {
        flex: 5;
        // 高度840px
        height: 10.5rem;
        border: 1px solid rgb(255, 0, 140);
        // 内边距10px
        padding: 0.125rem;
        // 外边距20px
        margin: 0.25rem;
      }
    }
    </style>
    
    

    效果如图所示:

    在这里插入图片描述

    四、图表环境搭建

    1、Echarts 全局引用

    下载
    cnpm install --save echarts

    vue2.0中使用如下写法把echarts挂载在vue实例上,但是这招在3.0行不通了:

    // 引用echarts
    import * as echarts from "echarts"
    Vue.prototype.$echarts=echarts;
    

    在 vue3.0中,在App.vue 中导入全局的echarts组件:

    <script>
    import { provide } from "vue";
    // 引用echarts
    import * as echarts from "echarts";
    export default {
      setup() {
        //第一个参数是名字  第二个参数是你传递的内容
        provide("echarts", echarts); // 不是provider,否则会出现下面报错
      },
    };
    </script>
    

    myPage.vue中进行引用和调用:

    <script>
    export default {
      // 导入echarts组件
      setup() {
        let $echarts = inject("echarts");
        // 控制台打印信息
        console.log($echarts);
      },
    };
    </script>
    
    

    2、Axios 全局引用

    下载cnpm install --save axios

    在 vue3.0中,在App.vue 中导入全局的echarts组件:

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

    在myPage.vue中进行引用和调用:

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

    在这里插入图片描述

    展开全文
  • Web前端响应式框架

    2021-04-06 16:20:04
    响应式网页的设计与实现 最近学前端接触到了框架,介绍并记录自己的学习收获。 前言 各种移动智能设备的广泛应用,带动了互联网应用向移动平台方向发展,并呈现...基于Bootstrap框架响应式网页设计就是一种全新的设

    响应式网页的设计与实现

    最近学前端接触到了框架,介绍并记录自己的学习收获。在这里插入图片描述

    前言

    各种移动智能设备的广泛应用,带动了互联网应用向移动平台方向发展,并呈现多元化的趋势。但智能手机、平板电脑、智能手表等多种移动设备相对于PC端的屏幕尺寸较小,所以大部分在PC端上显示的页面并不能很好地在移动互连设备上呈现。由于各种各样设备屏幕的分辨率、尺寸和型号越来越多,要在不同屏幕、不同系统平台等环境下保持网页布局的一致性,满足用户的一致体验已成为网页设计行业发展方向。基于Bootstrap框架的响应式网页设计就是一种全新的设计理念,根据这一理念所制作出来的网页框架可以作为通用模板,开发者根据需求选择模板,从而设计出适应不同设备的网站,增强用户体验。
    在这里插入图片描述

    一. 响应式网页技术

    “响应式网页设计”就是自动适应,它可以自动识别屏幕尺寸,从而调整出适合的网页。在做网页页面设计时,非常强调模块化的设计,要求一个合格的模块能够做到“可扩展、无侵染”,在任何移动终端都能正常显示。响应式网页在任何设备中都能够正常适配,而不用为每个设备单独做“子网站”。简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。
    响应式设计的网站能满足各种类型终端用户的需求,带给所有终端用户最优的访问体验。当然,专为手机或平板设计的网站也能满足部分访问者的要求,但根据调查得知,常用的移动终端设备有200多种不同的屏幕尺寸,设计者不可能为所有屏幕尺寸都设计一份独有的网站。因此,响应式设计就显得尤为重要。一个在手机上不能正常显示的网站只会给企业带来负面影响,给用户带来很差的用户体验。
    在这里插入图片描述

    二.响应式前端开发框架(响应式HTML5框架)

    响应式前端开发框架是指一系列产品化的HTML/CSS/Javascript组件的集合,Web前端工程师可以在设计中使用该开发框架。利用框架,可以花最少的精力创建响应式且符合用户要求标准的网站,整个开发流程都变得简单并且具有一致性。框架并不仅仅是指CSS、栅格之类的一些内容,它们包括的是整套的前端开发框架。
    目前,前端开发框架有很多,下面主要介绍Bootstrap框架。

    在这里插入图片描述

    1. Bootstrap
      Bootstrap是目前桌面端最流行且用得最广泛的开发框架,由Twitter推出。Bootstrap主要针对桌面端市场,Bootstrap3提出移动优先,不过目前桌面端依然还是其主要目标市场。Bootstrap主要基于jQuery进行Javascript处理,支持LESS来做CSS的扩展。如果想要在Bootstrap框架中使用Sass,则需要通过Bootstrap-Sass(https://github.com/thomas-mcdonald/bootstrap-sass)项目增加兼容。
      Bootstrap框架在布局、版式、控件、特效方面都不错,预置了丰富的效果,极大方便了用户的开发;在浏览器兼容性方面,目前Firefox、Chrome、Opera、Safari、IE8+等主流浏览器,Bootstrap都提供支持;在框架扩展方面,随着Bootstrap的广泛使用,扩展插件和组件也非常丰富,涉及显示组件、兼容性、图标库等各个方面。总之,Bootstrap提供一套优美的、直观的Web设计工具包和很多流行的样式,简洁的UI组件、栅格系统,以及常用的Javascript插件,可以用来开发跨浏览器兼容且美观大气的页面。

    在这里插入图片描述
    其他的响应式前端框架还有:

    2.Foundation
    Foundation是ZURB旗下的主要面向移动端的开发框架,但也保持对桌面端的兼容,目前已更新到Foundation4版本。它是一款强大的、功能丰富,且支持响应式布局的前端开发框架。框架主要采用jQuery和Zepto(语法类似jQuery,但比jQuery更轻量级)作为Javascript基础,CSS则基于Sass、Compass,有着很好的扩展性,并有着丰富的布局、版式和多种多样的控件与特效,非常方便开发者使用。控件的响应式效果也能帮助用户识别不同浏览器效果。
    在这里插入图片描述
    3.Gumby
    Gumby基于Sass开发,是一款出色的响应式CSS框架,它包括一个Web UI工具包,有按钮、表格、导航、标签、JS插件等。
    在这里插入图片描述

    还有一些如52Framework、Groundwork、Kube等,感兴趣的可以搜一下噢,这里不详细介绍了。

    因为自己刚上手响应式前端框架,所以就学了用得很广泛的Bootstrap,若后续有用到更好的,会写篇文章做对比。因为自己看了网课和一些视频,课本,基本都用到Bootstrap,所以还是推荐大家用这个吧。

    提示

    这里说明一下,自己在搜集资料的时候,发现大家容易一个搞混的问题(包括我自己在学习的时候),就是Bootstrap和vue都是前端框架,很多人分不清两者的区别。在这里我说明一下。

    前端框架:Bootstrap与Vue的区别

    首先,明确一点,两者不是一个层级的

    • Vue是一套用于构建用户界面的渐进式框架(前端js库,将前端开发组件化),和react,angular并列“前端三大框架”。可做出如后台管理系统等具有复杂交互的系统。
      (功能开发框架)
    • Bootstrap是基于jquery的UI组件库,而且Bootstrap大部分组件是依赖css的,使用时比如一些网页中的输入框,按钮等的炫酷样式。
      (界面效果框架)
      到这里大家应该对两者有些理解和区分了吧?

    今天就写到这里啦,有问题的话在评论区问噢(●’◡’●)

    (自己是大一计科专业的学生,因为感兴趣,课后自学前端,希望不对的地方,大佬可以帮忙指正,谢谢啦!)

    展开全文
  • 文章目录Vue 项目前端响应式布局框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景...


    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导入:

    image-20220326200817131

    返回顶部


    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)

    我们在写代码的时候发现如果我们都根据80px1rem在编写代码的时候转换非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 ,这样一来开发过程中会更加的方便:

    在这里插入图片描述

    我们打开 homePage.vue 页面,添加一个测试的 div 样式, font-size 设置为 50px,可以发现提示中自动帮我们转换成了 3.125rem

    cssrem自动匹配比例

    如果不能够换成对应的比例,可能cssrem还使用的默认 16px -> 1rem,找到安装的插件,打开设置,设置 Root Font Size 修改为 80 即可:

    cssrem修改比例

    返回顶部


    三、项目页面框架搭建

    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>
    

    image-20220327174847614

    返回顶部


    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>
    

    出去头部标题栏部分,我们需要设置主体的图表展示部分,创建一个类名为containersection容器,并为其设置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>
    

    效果如图所示:

    image-20220327195759166

    返回顶部


    (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>
    

    image-20220327194411944

    返回顶部


    (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的注释):

    image-20220328101733632

    修改后重新运行,可以看到控制台打印了所有的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>
    

    image-20220328102930258

    返回顶部


    在这里插入图片描述

    展开全文
  • 你会发现,随着响应式Web设计的不断成熟,各类框架也变得越发健壮和可靠。也许是受到了Bootstrap、Foundation和Gumby的影响,如今很多新的框架都开始向一体化多功能的模式进化,它们提供了更多的功能,同时会包含可...
  • 互相学习
  • 14个响应式前端开发框架。几乎所有的框架都采用了响应式网格系统。  使用这些前端框架,有如下好处:  跨浏览器。这一点已被证实。  一致性。UI组件,如导航、按钮、标签、表单、下拉框、表格……,在设计上保持...
  • 响应式css+兼容手机+平板+电脑PC 拼图跨屏响应式布局前端开发CSS框架-综合示例
  • 注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架。注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码...
  • 前端响应式布局

    千次阅读 2018-08-02 13:54:06
    前端响应式布局 前端网页布局分类 ♣ 固定宽度布局:以px为单位设置固定的宽度; ♣ 流式布局:以百分比为单位设置相对布局; ♣ 响应式布局:通过检测设备信息,决定网页的布局方式,一般情况下检测设备的...
  • 浮动+百分比布局
  • 前端响应式布局原理与方案(详细版)

    万次阅读 多人点赞 2019-04-08 13:54:58
    响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就够,缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果,分别是...
  • 响应式布局(bootstrap框架) 前言 响应式开发原理:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的 设备划分 设计尺寸 尺寸 超小屏幕(手机) 100% <768...
  • 一理解几种布局的概念 1、静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;  意思就是不管浏览器尺寸具体是多少,网页布局...
  • 前端框架bootstrap(响应式布局)入门

    千次阅读 多人点赞 2019-04-24 14:22:00
    Bootstrap,是基于HTML,CSS.javascript的前端框架  该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) ... 作用: 1.Bootstrap使得Web开发更加...2.Bootstrap支持响应式开发,解决了移动...
  • FreeNG是一款完全响应式前端UI框架,它采用了主流的左右两栏式布局,使用了Html5 CSS3 Angular2( 4)等流行的前端技术,同时提供了诸多强大的可以重新组合的UI组件,门槛极低,拿来即用。
  • 常用的响应式css前端框架(部分): 1、Semantic UI Framework Semantic通过创造一个用来方便分享UI的语言使得开发人员和设计师的可控范围更为广泛。不再使用象形文字:Semantic使用自然语言使用惯例来组织使得开发...
  • 一、响应式开发 1、响应式开发原理 原理:就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备划分 尺寸区间 响应式尺寸 超小屏幕(手机) < 768px 100% ...
  • 它具有出色的 CSS 库,并且与大多数流行的 JavaScript 框架(如 jQuery、Angular、React 和。Vue.js)兼容。其核心库是完全免费使用的。 官网:https://mdbootstrap.com/ [](()6. UIkit [外链图片转存失败,源站可能...
  • 响应式布局的实现方法

    千次阅读 2019-11-04 09:28:31
    响应式布局可以让网站同时适配不同分辨率和不同的手机端,让客户有更好的体验。一共有以下五种方法实现响应式布局:  1.百分比布局。  2.媒体查询布局。  3.rem响应式布局。  4.vw响应式布局。  5.flex弹性...
  • 响应式布局总结

    万次阅读 2022-03-28 19:44:18
    rem适配布局,内含阿里百秀案例代码,bootstrap内容讲解
  • 也不用转化rem和px什么的,连css命名都省了 tailwindcss
  • 背景 最近开发了3个门户网站,一般程序员都会有显示器,一开始我使用的是flex响应式 + 宽度百分比去进行适配,但是开发完之后发现在显示器上看着正常,但是到了笔记本上就发现宽度是自适应了,但是高度并没有随着...
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2018-09-03 09:51:20
    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择...
  • 主要介绍了分享那些Web设计大神们常用的响应式框架(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 用CSS实现响应式布局

    千次阅读 2021-08-04 08:19:01
    响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用使用@media 的三种方式第一: 直接在CSS文件中使用@media 类型 and (条件1) and ...
  • 大家好,今天给大家介绍一款,基于bootstrap,企业内部管理系统后台框架前端源码,响应式布局,html页面前端源码(图1)。送给大家哦,获取方式在本文末尾。 图1 由于页面比较多,功能比较齐全,我给大家介绍几个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,002
精华内容 10,000
热门标签
关键字:

前端响应式布局框架