Vue 插件的使用 图片懒加载,vuex持久化存储,前端各种插件库(三)

一、图片懒加载是什么？

图片的懒加载:
1.在我们打开项目的时候,图片可以进行按需加载
2.减小我们一次性请求的压力,节省资源

解决方法: 使用插件 vue-lazyload
为什么使用require()导入使用图片

//步骤: 
1.安装: npm install vue-lazyload -s   
2.在main.js中通过 import VueLazyLoad from 'vue-lazyload' 导入
3.使用Vue.use(VueLazyLoad,{
	//此处已经说过为什么要使用require导入了
	loading:require('图片相对地址')
})
4.在所有使用到src的位置,统一换成v-lazy 就完成了图片的懒加载

二、Vuex状态存储(持久化persist👇🔗)

Vuex状态持久化存储: 通过在Vuex的配置文件中使用 plugins来使用

1.安装  npm install vuex-persist -s
2.在store.js(Vuex文件中)中 通过  import VuexPersistence from 'vuex-persist' 导入
3.创建实例  let  VuexPersist = new VuexPersistence ({
	storage:sessionStroage (默认的是localStorage存储)
})
4.在new Vuex.store({
//通过plugins来使用
plugins:[VuexPersist.plugin]
})

三、Element-ui和Element-plus插件库(PC端👇🔗)

Element-UI插件库地址（vue2）

Element-Plus插件库地址（Vue3）

文件的导入,以及使用,只需要读文档就可以了,可以快速的提高我们的开发效率问题

四、Ant Design vue（👇🔗）

Ant Design （vue2）

Ant Design （vue3）

五、Vant插件库(移动端👇🔗)

Vant插件库（Vue2）

Vant插件库 （Vue3）

文件的导入,以及使用,只需要读文档就可以了,可以快速的提高我们的开发效率问题

六、Better-Scroll(移动端滚动条👇🔗)

better-scroll移动端插件

七、图片在线转化（👇🔗）

腾讯云图片处理，可以读文档