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