美文网首页
Vue完整版与否的分析

Vue完整版与否的分析

作者: 郑馋师 | 来源:发表于2019-12-17 20:43 被阅读0次

完整版

  1. 有compiler
  2. 视图是写在html/template里,可直接引用
    eg
<div id="app">
  {{ message }}
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue!"
    }
  });
</script>

这是官方给的,直接html中拿到

  1. cdn引用,后面是vue.js,生成环境中是vue.min.js,不仅没有注释而且所有变量都缩减
  2. webpack,@vue/cli都不可直接引用,要配置

非完整版

  1. 无compiler,体积减小30%
  2. 视图写在render函数中,用h来创建标签
    eg,这样就可以h函数拿到
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.js"></script>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: "Hello Vue!"
    },
    render(h) {
      return h("div", this.message);
    }
  });
</script>
  1. cd引用是vue.runtime.js,生成环境中是vue.runtime.min.js,不仅没有注释而且所有变量都缩减
  2. webpack,@vue/cli都可直接引用

现在多用非完整版

原因

  1. 用非完整版配合vue-loader+vue单文件,可以保证用户体验,其只支持h函数,用户下载的体积减小
  2. 保证开发体验,在开发的时候可以把vue单文件中直接写html,再用loader转换,变成h函数

SEO优化(搜索引擎优化)

这是个明日黄花,了解就好,因为就算你写的再好也不如花钱

SEO原理

实际上,SEO就是不断的curl,通过结果去判断页面内容,但是如果用非完整是h函数,无法分辨

优化思路

把title,description,keyword,h,a都写好,让curl可以获得关键信息

相关文章

  • Vue完整版与否的分析

    完整版 有compiler 视图是写在html/template里,可直接引用eg 这是官方给的,直接html中拿...

  • 模板 template 三种写法

    一、 Vue 完整版,写在HTML里 二、Vue完整版,写在选项里 三、Vue 非完整版,配合 xxx.vue 文...

  • Vue 模板 template

    模板 template 一、 Vue完整版,写在HTML里 二、 Vue完整版,写在选项里 三、Vue非完整版,配...

  • Vue完整版与非完整版

    本文主要介绍Vue完整版与非完整版的区别与优缺点: :总是使用非完整版,然后配合vue-loader和vue文件 ...

  • vue完整版和非完整版的区别和用法

    1.vue完整版和非完整版的区别 2、Vue完整版与非完整版的一些优劣: 完整版 优点:逻辑清晰简单,好写好用。 ...

  • Vue模板、指令与修饰符

    模板template三种写法 一. Vue完整版,写在HTML中 二. Vue完整版,写在选项里 三. Vue非完...

  • Vue的模板、指令与修饰符

    1. 模板 template 的三种写法 使用Vue完整版,写在HTML里 使用Vue完整版,写在选项里 这样写,...

  • 【python】AQI处理分析

    1.Python:数据分析实战之AQI分析(完整版) Python:数据分析实战之AQI分析(完整版)

  • vue 源码 - 01 目录结构

    基于vue 2.6.11 目录结构 打包版本 UMDCommonJSES Module完整版vue.jsvue.c...

  • Vue完整版和非完整版的区别

    在使用Vue的时候,分为两个版本,一个是完整版(vue.js),另一个是非完整版也叫运行时版本(vue.runti...

网友评论

      本文标题:Vue完整版与否的分析

      本文链接:https://www.haomeiwen.com/subject/mjeenctx.html