精华内容
下载资源
问答
  • vue响应式框架
    千次阅读
    2020-07-21 23:12:09

    基于vue的响应式ui框架

    Framevuerk (Framevuerk)

    Fast, Responsive, Multi Language, Both Direction Support and Configurable UI Framework based on Vue.js.

    快速,响应式,多语言,方向支持和基于Vue.js的可配置UI框架。

    建立 (Setup)

    First at all, you should install Framevuerk and of course Vue from terminal.

    首先,您应该从终端安装Framevuerk ,当然还要安装Vue

    npm install vue --save
    npm install framevuerk --save

    You can also install these, just if you want active touch actions support, fvDatepicker jalaali dates supoort and icons.

    您也可以安装这些,就算需要主动触摸操作支持,也可以安装fvDatepicker jalaali fvDatepicker supoort和图标。

    npm install idate --save
    npm install hammerjs --save
    npm install font-awesome --save

    And just follow the example and use it! (commonjs syntax and require also available)

    并按照示例进行操作即可! ( commonjs语法和require也可用)

    // Vue package
    import Vue from 'vue'
    
    // Framevuerk main js file
    import Framevuerk from 'framevuerk/dist/framevuerk.js'
    
    // If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
    import 'framevuerk/dist/framevuerk.css'
    
    // IDate package, just if you want globally support jalaali dates for fvDatepicker
    import IDate from 'idate'
    Framevuerk.use('date', IDate)
    
    // Hammer package, just if you want active touch actions support
    import Hammer from 'hammerjs'
    Framevuerk.use('hammer', Hammer)
    
    // Font-Awesome icons, just if you want active icons
    // If you handle styles with webpack, import this. Else you can include this via <link rel="stylesheet">
    import 'font-awesome/css/font-awesome.css'
    
    // Active Framevuerk...
    Vue.use(Framevuerk)
    
    // And finally, Initializing app
    const app = new Vue({
      el: "#app"
    });"

    Finally you need to create your template just like this.

    最后,您需要像这样创建模板。

    <html>
      <head>
        <link rel="stylesheet" href="path/to/your/app.css"/>
      </head>
      <body>
        <fv-main id="app">
          <!-- Your Content -->
        </fv-main>
        <script src="path/to/your/app.js"></script>
      </body>
    </html>

    定制 (Customize)

    Framevuerk can have different language, direction, and colors based on the user's taste. To setup your custom version, create a file called .framevuerkrc.js in root of your project and put these on:

    Framevuerk可以根据用户的口味使用不同的语言,方向和颜色。 要设置您的自定义版本, .framevuerkrc.js在项目的根目录中创建一个名为.framevuerkrc.js的文件,并将其放在以下位置:

    module.export = {
      // config name
      'config-name': 'foobar',
    
      // your locale and direction.
      locale: 'en', // or 'fa'
      direction: 'ltr', // or 'rtl'
    
      // theme colors:
      'primary-color': '#41b883',
      'secondary-color': '#35485d',
      'danger-color': '#dd4b39',
      'warning-color': '#ef8f00',
      'info-color': '#14b0cf',
      'bg-color': '#f9f9f9',
    
      // base padding size
      padding: '15px',
    
      // base animation speed
      'transition-speed': '0.35s',
    
      // base border radius applied to buttons, inputs and etc.
      'border-radius': '4px',
    
      // base shadow size applied to header, footer, form elements and etc.
      'shadow-size': '3px'
    }

    And output files goes to ./node_modules/framevuerk/dist directory:

    输出文件进入./node_modules/framevuerk/dist目录:

    • framevuerk-foobar.js

      framevuerk-foobar.js

    • framevuerk-foobar.css

      framevuerk-foobar.css

    • framevuerk-foobar.min.js

      framevuerk-foobar.min.js

    • framevuerk-foobar.min.css

      framevuerk-foobar.min.css

    You can also use .framevuerkrc.json, .framevuerkrc or framevuerk key inside your package.json to pass this variables to Framevuerk!

    您还可以在package.json使用.framevuerkrc.json.framevuerkrcframevuerk键,以将此变量传递给Framevuerk!

    Framevuerk apply these config by this cli command:

    Framevuerk通过此cli命令应用以下配置:

    ./node_modules/.bin/framevuerk
    # or on npm scripts, just:
    framevuerk

    翻译自: https://vuejsexamples.com/responsive-and-configurable-ui-framework-based-on-vue-js/

    基于vue的响应式ui框架

    更多相关内容
  • 迷你台手写一个简单的Vue响应式框架
  • 全局概览Vue运行内部运行机制 总览图:初始化及挂载在new Vue()之后。Vue会调用_init函数进行初始化,也就是这里的...其中最重要的是通过Object.defineProperty设置setter与getter函数,用来实现「响应式」以及「依...

    全局概览

    Vue运行内部运行机制 总览图:

    初始化及挂载

    在 new Vue()之后。 Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周期、事件、 props、 methods、 data、 computed 与 watch 等。其中最重要的是通过 Object.defineProperty 设置 setter 与 getter 函数,用来实现「响应式」以及「依赖收集」,后面会详细讲到,这里只要有一个印象即可。

    初始化之后调用 $mount 会挂载组件,如果是运行时编译,即不存在render function但是存在 template 的情况,需要进行「编译」步骤。

    因为编译有构建时编译与运行时编译的,其目的都是将template转化炒年糕render function,所以如果运行时检查到template存在但是没有render function的情况下会把template编译成render function。

    编译

    compile编译可以分成 parse、optimize 与 generate 三个阶段,最终需要得到 render function

    parse(解析)

    parse 会用正则等方式解析 template 模板中的指令、class、style等数据,形成AST。

    optimize(优化)

    optimize 的主要作用是标记 static 静态节点,这是 Vue 在编译过程中的一处优化,后面当 update 更新界面时,会有一个 patch 的过程, diff 算法会直接跳过静态节点,从而减少了比较的过程,优化了 patch 的性能。

    generate(生成)

    generate 是将 AST 转化成 render function 字符串的过程,得到结果是 render 的字符串以及 staticRenderFns 字符串。

    在经历过 parse、optimize 与 generate 这三个阶段以后,组件中就会存在渲染 VNode 所需的 render function 了。

    响应式

    接下来也就是 Vue.js 响应式核心部分。

    这里的 getter 跟 setter 已经在之前介绍过了,在 init 的时候通过 Object.defineProperty 进行了绑定,它使得当被设置的对象被读取的时候会执行 getter 函数,而在当被赋值的时候会执行 setter 函数。

    当 render function 被渲染的时候,因为会读取所需对象的值,所以会触发 getter 函数进行「依赖收集」,「依赖收集」的目的是将观察者 Watcher 对象存放到当前闭包中的订阅者 Dep 的 subs 中。形成如下所示的这样一个关系。

    在修改对象的值的时候,会触发对应的 setter, setter 通知之前「依赖收集」得到的 Dep 中的每一个 Watcher,告诉它们自己的值改变了,需要重新渲染视图。这时候这些 Watcher 就会开始调用 update 来更新视图,当然这中间还有一个 patch 的过程以及使用队列来异步更新的策略,这个我们后面再讲。

    Virtual DOM

    我们知道,render function 会被转化成 VNode 节点。Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树,用对象属性来描述节点,实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境,所以使它具有了跨平台的能力,比如说浏览器平台、Weex、Node 等。

    比如说下面这样一个例子:

    {

    tag:'div', /*说明这是一个div标签*/children: [/*存放该标签的子节点*/{

    tag:'a', /*说明这是一个a标签*/text:'click me' /*标签的内容*/}

    ]

    }

    渲染后可以得到

    click me

    这只是一个简单的例子,实际上的节点有更多的属性来标志节点,比如 isStatic (代表是否为静态节点)、 isComment (代表是否为注释节点)等。

    更新视图

    前面我们说到,在修改一个对象值的时候,会通过 setter -> Watcher -> update 的流程来修改对应的视图,那么最终是如何更新视图的呢?

    当数据变化后,执行 render function 就可以得到一个新的 VNode 节点,我们如果想要得到新的视图,最简单粗暴的方法就是直接解析这个新的 VNode 节点,然后用 innerHTML 直接全部渲染到真实 DOM 中。但是其实我们只对其中的一小块内容进行了修改,这样做似乎有些「浪费」。

    那么我们为什么不能只修改那些「改变了的地方」呢?这个时候就要介绍「patch」了。我们会将新的 VNode 与旧的 VNode 一起传入 patch 进行比较,经过 diff 算法得出它们的「差异」。最后我们只需要将这些「差异」的对应 DOM 进行修改即可。

    响应式系统的基本原理

    响应式系统

    Vue.js 是一款 MVVM 框架,数据模型仅仅是普通的 JavaScript 对象,但是对这些对象进行操作时,却能影响对应视图,它的核心实现就是「响应式系统」。尽管我们在使用 Vue.js 进行开发时不会直接修改「响应式系统」,但是理解它的实现有助于避开一些常见的「坑」,也有助于在遇见一些琢磨不透的问题时可以深入其原理来解决它。

    Object.defineProperty

    首先我们来介绍一下 Object.defineProperty,Vue.js就是基于它实现「响应式系统」的。

    首先是使用方法:

    /*obj: 目标对象

    prop: 需要操作的目标对象的属性名

    descriptor: 描述符=>{

    enumerable: false, //对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举

    configurable: false, //对象的属性是否可以被删除,以及除writable特性外的其他特性是否可以被修改。

    writable: false, //为true时,value才能被赋值运算符改变。默认为 false。

    value: "static", //该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。

    get : function(){ //一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。

    return this.value;

    },

    set : function(newValue){ //提供 setter 的方法,如果没有 setter 则为 undefined。将该参数的新值分配给该属性。默认为 undefined。

    this.value = newValue;

    },

    }

    return value 传入对象*/Object.defineProperty(obj, prop, descriptor)//举个栗子

    //使用 __proto__

    var obj ={};var descriptor = Object.create(null); //没有继承的属性//默认没有 enumerable,没有 configurable,没有 writable

    descriptor.value = 'static';

    Object.defineProperty(obj,'key', descriptor);//显式

    Object.defineProperty(obj, "key", {

    enumerable:false,

    configurable:false,

    writable:false,

    value:"static"});//在对象中添加一个属性与存取描述符的示例

    varbValue;

    Object.defineProperty(o,"b", {

    get :function(){returnbValue;

    },

    set :function(newValue){

    bValue=newValue;

    },

    enumerable :true,

    configurable :true});

    实现 observer(可观察的)

    知道了 Object.defineProperty 以后,我们来用它使对象变成可观察的。

    这一部分的内容我们在第二小节中已经初步介绍过,在 init 的阶段会进行初始化,对数据进行「响应式化」

    为了便于理解,我们不考虑数组等复杂的情况,只对对象进行处理。

    首先我们定义一个 cb 函数,这个函数用来模拟视图更新,调用它即代表更新视图,内部可以是一些更新视图的方法。

    functioncb (val) {/*渲染视图*/console.log("视图更新啦~");

    }

    然后我们定义一个 defineReactive ,这个方法通过 Object.defineProperty 来实现对对象的「响应式」化,入参是一个 obj(需要绑定的对象)、key(obj的某一个属性),val(具体的值)。经过 defineReactive 处理以后,我们的 obj 的 key 属性在「读」的时候会触发 reactiveGetter 方法,而在该属性被「写」的时候则会触发 reactiveSetter 方法。

    functiondefineReactive (obj, key, val) {

    Object.defineProperty(obj, key, {

    enumerable:true, /*属性可枚举*/configurable:true, /*属性可被修改或删除*/get:functionreactiveGetter () {return val; /*实际上会依赖收集,下一小节会讲*/},

    set:functionreactiveSetter (newVal) {if (newVal === val) return;

    cb(newVal);

    }

    });

    }

    当然这是不够的,我们需要在上面再封装一层 observer 。这个函数传入一个 value(需要「响应式」化的对象),通过遍历所有属性的方式对该对象的每一个属性都通过 defineReactive 处理。

    functionobserver (value) {if (!value || (typeof value !== 'object')) {/*只考虑对象,非对象返回*/

    return;

    }

    Object.keys(value).forEach((key)=>{

    defineReactive(value, key, value[key]);

    });

    }

    最后,让我们用 observer 来封装一个 Vue 吧!

    在Vue的构造函数中,对options的data进行处理,这里的data想必大家很熟悉,就是平时我们在写Vue项目时组件中的data属性(实际上是一个函数,这里当做一个对象来简单处理)

    class Vue{/*Vue 构造类*/constructor(options) {this._data =options.data;

    observer(this._data);

    }

    }

    这样我们只要 new 一个 Vue 对象,就会将 data 中的数据进行「响应式」化。如果我们对 data 的属性进行下面的操作,就会触发 cb 方法更新视图。

    let o = newVue({

    data: {

    test:"I am test."}

    });

    o._data.test= "hello,world."; /*视图更新啦~*/

    展开全文
  • 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>
    

    在这里插入图片描述

    展开全文
  • 文章目录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

    返回顶部


    在这里插入图片描述

    展开全文
  • 在前面的章节中我们已经学习了Vue.js的基础内容并且了解了Vue.js的源码实现,包括:Vue的生命周期、Vue的数据响应、Vue的渲染流程等等,在这一章节我们会和大家一起去实现一个响应式框架--MVue,MVue会遵循Vue的...
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2018-09-03 09:51:20
    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择...
  •   EuiAdmin是基于element-ui的vue快速开发后台管理框架,EuiAdmin是一个响应式的后台管理框架,通过监听窗口窗口大小变化和设备的类型,调整视图框架支持响应式。在EuiAdmin的富文本编辑器、ec
  • vue 响应式布局

    千次阅读 2022-06-18 14:51:29
    获取到具体屏幕的大小 由于vue中不能用document获取屏幕宽度,用jq我又嫌麻烦,我们可以通过一个函数获取当前屏幕的宽度大小。 <div class="header-components" ref="theRef"> 通过挂载的 ref="theRef" 的方式,...
  • 而通过Vue.js的响应式双向绑定数据,实时反映数据的真实变化并映射到数据源上,避免前端页面开发中DOM选择器繁杂的操作,简化Web前端开发流程和降低开放难度,提升前端开发效率,降低开发成本和周期,提升微信公众号使用的...
  • 最近看到有些人说vue是双向数据绑定的,有些人说vue是单向数据流的,我认为这两种说法都是错误的,vue是一款具有响应式更新机制的框架,既可以实现单向数据流也可以实现数据的双向绑定。 2 单向数据流与数据双向绑定...
  • VUE响应式原理

    2021-10-15 17:13:08
    Vue响应式原理核心是通过ES5的保护对象的Object.defineProperty中的访问器属性中的get和set方法,data中声明的属性都被添加了访问器属性,当读取data中的数据时自动调用get方法,从实际保存数据的半隐藏属性中,读...
  • 在学习vue响应式原理之前,必须搞懂 Object.defineProperty。 Object.defineProperty(obj, prop, descriptor) 看到一篇写的十分不错的博客:理解Object.defineProperty方法。 二、vue响应式更新 所谓响应式,简单说...
  • 下载响应式插件 lib-flexible npm i lib-flexible -D 引用插件 在 src/main.js import 'lib-flexible/flexible.js' 默认分辨率需要调整(默认项目配置可能不合适自己的项目, 比如大屏项目,小屏幕手机项目等...
  • Vue 源码之Vue 响应式原理【完整版】

    千次阅读 2022-03-27 23:53:38
    Vue 的视图更新原理主要涉及的是响应式相关API Object.defineProperty 的使用,它的作用是为对象的某个属性对外提供 get、set 方法,从而实现外部对该属性的读和写操作时能够被内部监听,实现后续的同步视图更新功能...
  • 实现简易的 Vue 响应式

    千次阅读 2022-03-24 10:31:32
    我们首先封装一个响应式处理的方法 defineReactive,通过 defineProperty 这个方法重新定义对象属性的 get 和 set 描述符,来实现对数据的劫持,每次 读取数据 的时候都会触发 get ,每次 更新数据 的时候都会触发 ...
  • Vue面试题-Vue响应式原理

    千次阅读 2021-08-15 18:47:18
    coderwhy Vue面试题-vue响应式原理笔记
  • VUE响应式布局资源库

    2021-11-24 14:11:53
    vue响应式布局资源库
  • vue响应式原理:观察者模式

    千次阅读 2022-03-13 15:18:57
    作为计算机工程师,框架是提高开发效率的重要工具。理解框架的核心原理,有助于更好地使用它和定位问题。同时,一个优秀的框架,其设计方案和实现...本文将通过实现一个简单的响应式系统,来理解vue.js的响应式原理。
  • Vue 数据响应式

    千次阅读 2022-02-28 00:47:50
    Vue2 侦测数据变化使用的是 Object.defineProperty() 方法,通过定义对象属性上的 get 和 set 方法,在 get 方法中收集观察者,在 set 方法中通知观察者们进行更新视图或处理其他事务
  • vue响应式的网站

    2021-06-18 10:30:45
    一、cmd搭建框架 这里就不说安装node、npm... npm install -g @vue/cli 这是vue3.0的框架vue3.0的框架他的node.js是 >= 8/9) 3. vue create leftmenubar 创建vue项目(CSDN自己去查创建) 4. npm install axios
  • 一、什么是Vue数据响应式 就是当数据发生改变时,UI页面做出响应。 比如Vue中的data被改变时,页面中的就会做出响应 const vm=new Vue({data:{n:0}}) 如果修改vm.n,那么UI中的n会响应我 二、Vue中如何实现...
  • Vue响应式原理---双向绑定

    千次阅读 2022-04-24 17:30:10
    一、Vue中的响应式 Vue最独特的特性之一,是其非侵入行的响应式系统。数据模型仅仅是普通的JavaScript对象,而当修改它们时,视图会进行更新。 二、响应式的基本原理—双向绑定 双向绑定,就是把Model绑定到View,当...
  • Vue响应式编程

    千次阅读 2019-09-11 18:49:18
    Time: 20190911 ...Vue在这个过程中扮演了怎样的角色呢? Vue会时刻监视着data对象的变化。下面看一个例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
  • Vue响应式原理

    千次阅读 2019-12-16 17:38:21
    Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。这使得状态管理非常简单直接,不过理解其工作原理同样重要,这样你可以避开一些常见的...
  • Vue响应式实现原理

    2020-05-23 11:17:44
    Vue响应式原理 Vue是数据驱动视图实现双向绑定的一种前端框架,采用的是非入侵性的响应式系统,不需要采用新的语法(扩展语法或者新的数据结构)实现对象(model)和视图(view)的自动更新,数据层(Model)仅仅是...
  • 主要给大家介绍了关于如何利用JS响应式修改vue实现页面的input值,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 26,746
精华内容 10,698
关键字:

vue响应式框架