首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

17 Most popular Vue.js plugins

本文列举了用于 Vue 2 和 Vue 3 的 17个 流行的 Vue 插件: Vuetify NuxtJS Vuex Vuex Persisted State VuePress Vue Meta Vue...教程地址:https://www.vuemastery.com/courses/beautify-with-vuetify/getting-started-with-vuetify 你是否曾纠结于如何让应用在视觉上看起来更吸引人...Vuetify是一个基于 Material Design 的 UI 库,支持谷歌和 Android 的设计语言。...vue-meta 有以下特点: 在组件内设置 metaInfo,便可轻松实现头部标签的管理。 metaInfo 的数据都是响应的,如果数据变化,头部信息会自动更新 支持 SSR。...主要特征: 常用交互功能: 移动端缩放、 拖动、 平移、 拖动标记、 捏拉缩放 自定义切片图层 手机硬件加速 标记, 弹出窗口 图像叠加 TroisJS 地址:https://troisjs.github.io

6.1K30

Vue打包优化之code spliting

核心思想 业务代码和基础库的分离 这个其实很好理解,业务代码通常更新迭代很频繁,而基础库通常更新缓慢,这里做拆分的话可以充分利用浏览器缓存来加载基础库代码。...这里我们看下打包分布,这里使用的是 webpack-bundle-analyzer,可以很清晰的看到 vue 和 vuetify等模块都有出现 被重复打包的情况。 ?...可是,这里我们发现vuetify.js和vuetify.css实在太庞大了,导致我们的打包的代码很大,这里,我们考虑把它提取出来,这里为了避免重复打包,需要使用external,并将vue以及vuetify...总结 可能会有朋友会问,单独分拆vue和vuetify会导致请求数增加,这里我想补充下,我们的业务现在已经切换成http2了,由于多路复用,并且加上浏览器缓存,我们分拆出的请求数其实也算是控制在合理的范畴内...这里最后贴一下优化后的webpack配置,大家一起交流学习下哈。

4.2K100
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Vue打包优化之code spliting

    核心思想 业务代码和基础库的分离 这个其实很好理解,业务代码通常更新迭代很频繁,而基础库通常更新缓慢,这里做拆分的话可以充分利用浏览器缓存来加载基础库代码。...这里我们看下打包分布,这里使用的是 webpack-bundle-analyzer,可以很清晰的看到 vue 和 vuetify等模块都有出现 被重复打包的情况。...和vuetify.css实在太庞大了,导致我们的打包的代码很大,这里,我们考虑把它提取出来,这里为了避免重复打包,需要使用external,并将vue以及vuetify的代码采用cdn读取的方式,首先修改...index.html css引入link href='https://fonts.googleapis.com/css?...这里最后贴一下优化后的webpack配置,大家一起交流学习下哈。

    2.1K20

    html基础+常用标签

    概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。...更多 Meta(metadata information) 提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词 页面编码(告诉浏览器是什么编码) meta http-equiv...到了IE7出来的时候,采用了微软公司内部标准以及部分W3C的标准,这个时候许多网站升级到IE7的时候,就比较痛苦,很多代码必须调整后,才能够正常的运行。...通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中,可以实现这一点。...如果该指令丢失或未指定基于标准的文档类型,则 Internet Explorer 8 将以 IE5 模式(Quirks 模式)显示该网页 更多 Title 网页头部信息 Link css link

    1.2K10

    2021,17个 最流行的 Vue 插件

    Vuetify NuxtJS Vuex Vuex Persisted State VuePress Vue Meta Vue ChartJS Vue Grid Layout Vue Draggable...Vuetify是一个基于Material Design的UI库,支持谷歌和Android的设计语言。 它是一个开源库,有数百个组件,从按钮, app bars,chips,modals 和更多。...默认主题与 Vue 官方文档一致 简洁,少配置,高性能 Markdown 专为技术文档提供拓展 自带 PWA 自定义主题,可定制程度完全由自己决定 Vue Meta 地址:https://vue-meta.nuxtjs.org...vue-meta有以下特点: 在组件内设置 metaInfo,便可轻松实现头部标签的管理 metaInfo 的数据都是响应的,如果数据变化,头部信息会自动更新 支持 SSR Vue ChartJS...---- 代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

    4.4K10

    WEB缓存探究

    Cache-Control Cache-Control 标头是在 HTTP/1.1 规范中定义的,取代了之前用来定义响应缓存策略的标头例如 Expires。...只能精确到秒级,如果某些文件在1秒内修改多次,则无法及时更新 ETag 相当于验证令牌。通过它可以可实现高效的资源更新检查:资源未发生变化时不会传送任何数据。...[hash].js" } } 为打包后的文件名加上hash,使文件更新之后会生成新的hash,以达到弃用原来缓存的效果。...允许浏览器和中间缓存(如CDN)缓存CSS,并将CSS设置为1年后到期,超长的缓存时间可以让用户避免每次都从服务端获取响应。...同时不要忘记给文件名加上指纹,以便及时更新改动 JavaScript同样设置为1年后到期,但标记为private,因为它可能会包含某些用户私人数据,这是CDN不应缓存的。

    73640

    META的一些功用

    作者:军军    文章来源:闪吧  META的一些功用  META标记用于描述不包含在标准HTML网络...强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码 作者:军军    文章来源:闪吧   META的一些功用 META标记用于描述不包含在标准HTML...基于这一基 础上又开发出一些其它的有用功能,下面我挑选几种功能和大家说一下: 1、如何让搜索引擎搜索到你的页面 META NAME="keywords CONTENT="这里写关键字"> META...6、网站图标 META CONTENT=0 HTTP-EQUIV=Expires> META CONTENT=no_cache HTTP-EQUIV=Pragma> Link href="soim.ico..." rel="Shortcut Icon"> META CONTENT="7 days" name=revisit-after> 很多网站如果你把她保存在收件夹中后,会发现它连带着一个小图 标,如果再次点击进入之后还会发现地址栏中也有个小图标

    41840

    HTML

    一·HTML 概念:超文本标记语言,"超文本"就是指页面内可以包含图片,链接,甚至音乐,程序等非文字元素。...结构构造:超文本标记语言的结构包括“头”部分(英语:Head)和“主体”部分(英语Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容 声明<!...中的位置丶以及其他文档的关系等)丶文档头部所包含的信息不回作为主体内容显示给读者· 下面这些标签可用在部分:丶link>丶meta>丶丶丶以及和分类信息用的· meta标签的name属性语法格式是; meta name="参数"content="具体的参数值"> 其中name..."> //(注意后面的引号,分别在秒数的前面和网址的后面) 刷新-->刷新时间--->刷新后跳转的网址 标签用于定义文档的标题  link>标签最常见的用途是链接样式表

    2K20

    研发:如何防止混合内容

    修正混合内容 在找出混合内容在网站源代码中的位置后,按照下面的步骤进行修正。 将 Chrome 中的以下混合内容错误用作示例: ?...如果法律允许,请在您的网站上直接下载和托管内容。 将此资源从您的网站完全排除。 第 2 步 将网址从 http:// 更改为 https://,保存源文件,并在必要时重新部署更新文件。...此外,在页面的 部分中,可以使用一个 meta> 标记设置 Content-Security-Policy(而非 Content-Security-Policy-Report-Only)...浏览器在响应标头或 meta> 元素中收到的多个 CSP 标头值被合并,强制作为一个政策;报告政策也以同样的方式进行合并。...这可能会中断用户期望获得的功能和内容。 CSP 替代方案 如果您的网站由某个平台(如 Blogger)代为托管,那么,您可能没有相应权限来修改标头和添加 CSP。

    1.6K30

    博客站长如何正确设置SEO

    基本概念 反向链接(back links):所说的向内的链接(inbound link),指的是从一个网页到你网页的超级链接。...向外的链接(outbound link),也就是出站链接。 站内链接:也称内链,网站域名下的页面之间的互相链接,自己网站的内容链接到自己网站的内部页面。...初级方法 良好的站点描述和站点关键字 在网站html文件中添加meta信息,注意介绍不能太长,合适即可,因为一些搜索工具只对前面140个文字进行采集: meta name="description"...一些SEO常见错误 标记缺失。使用 标记将标头添加到页面中,并放到页面源代码的 内部。示例:页面的准确描述性标题。... 标记用于向 BingBot 和 Web 访问者指明正文副本的主题。 标记可增强标题、说明和正文副本中的核心关键字。

    25120
    领券