文章目录
一、图片懒加载是什么?
图片的懒加载:
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端👇🔗)
文件的导入,以及使用,只需要读文档就可以了,可以快速的提高我们的开发效率问题
四、Ant Design vue(👇🔗)
五、Vant插件库(移动端👇🔗)
文件的导入,以及使用,只需要读文档就可以了,可以快速的提高我们的开发效率问题