vue 如何使用插件？Vue 組件懶加載，圖片懶加載

　　vue 如何使用插件

　　直接安裝，引入就能使用。vue 還是 js，只要是 js 那么所有的插件使用都是相同的方式，引入綁定到對應的節(jié)點或者操作對應的節(jié)點就好。

　　Vue 組件懶加載，圖片懶加載

　　組件懶加載

　　1. 結(jié)合路由插件使用的時候使用 import 方式實現(xiàn)

　　// 第一步注釋import導入的文件

　　// import About from '../components/About.vue';

　　// 第二步將引入組件的方式以箭頭函數(shù)的方式異步引入

　　const routes = [

　　{

　　path: '/about'，

　　component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' )

　　}

　　]

　　````

　　2. 引入組件的時候使用回調(diào)函數(shù)的方式引入，比如

　　```js

　　// 組件懶加載

　　const IconList = () => import('components/base/icon-list');

　　export default {

　　components: {

　　IconList,

　　},

　　};

　　````

　　圖片懶加載

　　就是在加載頁面的時候，如果頁面中的圖片過多，可以使用占位符的方式替換沒有在可是區(qū)域內(nèi)的圖片，只加載當前需要現(xiàn)實的圖片。監(jiān)聽滾動條的位置，當圖片標簽出現(xiàn)在可視區(qū)域的時候，重置圖片的路徑為真是路徑，然后展示圖片地址。一般在實際開發(fā)的時候都直接使用圖片懶加載插件實現(xiàn)。還有一種解決方案就是使用頁面骨架屏效果，也是類似占位顯示，當數(shù)據(jù)加載完成之后替換掉占位顯示的內(nèi)容。