github: https://github.com/VV-UI/VV-UI

演示地址: https://vv-ui.github.io/VV-UI/#/meta-info

1. LoadingBar

当我们访问知乎或者Github的时候,会经常看到这样的加载进度条:

这种交互对于单页面应用来说,也是可以极大地增强用户体验,那么我们基于Vue 该如何实现这样的加载进度条呢?其实很简单,目前我做了一套基于Vue的开源组件库,里面完善和补充了其他组件库不存在的一些组件。比如我们的LoadingBar:

2. MetaInfo

meta-info 是一个基于vue 2.0的插件,它会让你更好的管理你的 app 里面的 meta 信息。你可以直接 在组件内设置 metaInfo 便可以自动挂载到你的页面中。如果你需要随着数据的变化,自动更新你的title、meta等信息,那么用此 插件也是再合适不过了。 当然,有时候我们也可能会遇到让人头疼的SEO问题,那么使用此插件配合 prerender-spa-plugin 也是再合适不过了。

使用方式:

export default {
metaInfo: {
title: 'My Example App',
meta: [{
name: 'keyWords',
content: 'My Example App'
}],
link: [{
rel: 'asstes',
href: 'https://vv-ui.github.io/VV-UI/'
}]
}
}

是不是很简单? 妈妈再也不懂担心我处理不好SEO的问题了

一款基于Vue的扩展性组件库 VV-UI的更多相关文章

  1. rtvue-lowcode:一款基于uniapp框架和uview组件库的开源低代码开发平台

    rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台,项目提供可视化拖拽编辑器,采用MIT开源协议,适用于app.小程序等项目 ...

  2. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  3. GearCase UI - 自己构建一套基于 Vue 的简易开源组件库

    最近 1 ~ 2 月除了开发小程序之外,还一直在继续深入的学习 Vuejs.利用零碎.闲暇的时间整合了一套基于 Vue 的 UI 组件库.命名为 GearCase UI,意为齿轮盒.现在把该项目进行开 ...

  4. 基于Vue搭建自己的组件库(1)

    本项目演示地址:https://husilang.github.io/zm-ui 项目参考文章:从零开始搭建Vue组件库 VV-UI 项目的初衷是学习怎么封装一个基于Vue的UI组件库,顺便记录每个步 ...

  5. vue统计组件库和ui框架

    UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI ...

  6. 基于Vue的Quasar Framework 介绍 这个框架UI组件很全面

    基于Vue的Quasar Framework 介绍 这个框架UI组件很全面 基于Vue的Quasar Framework 中文网http://www.quasarchs.com/ quasarfram ...

  7. 推荐几款基于vue的使用插件

    1.muse-ui ★6042 - 三端样式一致的响应式 UI 库 2.vuetify ★11169 - 为移动而生的Vue JS 2组件框架 3.Vux ★12969- 基于Vue和WeUI的组件库 ...

  8. 从开发一款基于Vue技术栈的全栈热重载生产环境脚手架,我学到了什么

    浏览文章前 这一期,我分享给大家三点看源码的小技巧,这也是从别的大佬那总结的. 被反复使用的代码 这样的代码是一个软件的重点函数,一个大神的写法有很多精华值得学习. 穿越时间的代码 如果一段代码10年 ...

  9. 一款基于react-native的弹窗提示组件

    介绍一款基于react-native的弹窗提示插件 react-native-ms , github地址:https://github.com/jiangzhenfei/react-native-ms ...

随机推荐

  1. LeetCode & Q38-Count and Say-Easy

    String Description: The count-and-say sequence is the sequence of integers with the first five terms ...

  2. AngularJS1.X学习笔记7-过滤器

    最近参加笔试被虐成狗了,感觉自己的算法太弱了.但是还是先花点事件将这个AngularJS学习完.今天学习filter 一.内置过滤器 (1)过滤单个数据值 <!DOCTYPE html> ...

  3. ( 转 ) CORS 有一次 OPTIONS 请求的原理

    刚接触前端的时候,以为HTTP的Request Method只有GET与POST两种,后来才了解到,原来还有HEAD.PUT.DELETE.OPTIONS-- 目前的工作中,HEAD.PUT.DELE ...

  4. SpringCloud的DataRest(三)

    一.进阶配置定义 二.定制显示内容和控制方法使用 1.控制显示的内容 如果想让输出显示的数据始终按我们定义的格式显示: 配置之后返回的JSON数据会按照ListApp定义的数据格式进行输出 2.屏蔽自 ...

  5. 数据结构与算法 —— 链表linked list(03)

    继续关于linked list的算法题: 删除排序链表中的重复元素 给定一个排序链表,删除所有重复的元素使得每个元素只留下一个. 案例: 给定 1->1->2,返回 1->2 给定  ...

  6. JavaScript实现面向对象

    /* js实现面向对象的方法 */ // 1 工厂模型 不推荐 function Person(name , sex , age){ obj = {}; obj.name = name; obj.se ...

  7. python当中的 可迭代对象 迭代器

    学习python有一段时间了,在学习过程中遇到很多难理解的东西,做一下总结,希望能对其他朋友有一些帮助. 完全是个人理解,难免有错,欢迎其他大神朋友们批评指正. 1 迭代 什么是迭代呢??我们可以这样 ...

  8. Linux 定时执行shell脚本命令之crontab

    crontab可以在指定的时间执行一个shell脚本以及执行一系列Linux命令 例如:服务器管理员定时备份数据库数据.日志等 详解: 常用命令: crontab –e //修改 crontab 文件 ...

  9. Paper藐小之处明察秋毫故时有物外之趣

    暂且针对第一篇叶脉提取的paper 插入图像的"图 N": 英 Times New Roman, 中 宋体, 10磅. 文末的引文: 两端对齐. 流程图框格内文字换行时, 忌: 将 ...

  10. 更换yum源

    1. 首先备份 sudo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup 2. 使用阿里云的 ...