1. 程式人生 > >一款基於Vue的擴展性組件庫 VV-UI

一款基於Vue的擴展性組件庫 VV-UI

target ren clas 做了 true amp pre 當我 設置

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