vue 如何使用插件
直接安裝,引入就能使用。vue 還是 js,只要是 js 那么所有的插件使用都是相同的方式,引入綁定到對應的節點或者操作對應的節點就好。
Vue 組件懶加載,圖片懶加載
組件懶加載
1. 結合路由插件使用的時候使用 import 方式實現
// 第一步注釋import導入的文件
// import About from '../components/About.vue';
// 第二步將引入組件的方式以箭頭函數的方式異步引入
const routes = [
{
path: '/about',
component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' )
}
]
````
2. 引入組件的時候使用回調函數的方式引入,比如
```js
// 組件懶加載
const IconList = () => import('components/base/icon-list');
export default {
components: {
IconList,
},
};
````
圖片懶加載
就是在加載頁面的時候,如果頁面中的圖片過多,可以使用占位符的方式替換沒有在可是區域內的圖片,只加載當前需要現實的圖片。監聽滾動條的位置,當圖片標簽出現在可視區域的時候,重置圖片的路徑為真是路徑,然后展示圖片地址。一般在實際開發的時候都直接使用圖片懶加載插件實現。還有一種解決方案就是使用頁面骨架屏效果,也是類似占位顯示,當數據加載完成之后替換掉占位顯示的內容。