vue第十六单元(element-ui vue-lazyload 等常用插件)
第十六单元(element-ui vue-lazyload 等常用插件)
#课程目标
1、掌握插件的引入方式
2、精通UI框架
3、掌握前端常见的几种效果实现
#知识点
一、elementUI的使用
1、官网:https://element.eleme.cn/#/zh-CN/
elementUI是pc端框架,配合vue使用。
2、安装
npm i element-ui -S
3、快速上手
(1)完整引入
在 main.js 中写入以下内容:
import Vue from 'vue';
import ElementUI from 'element-ui'; //引入组件
import 'element-ui/lib/theme-chalk/index.css'; //引入样式
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
el: '#app',
render: h => h(App)
});
(2)按需引入
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
二、图片懒加载 vue-lazyload
官网:https://www.npmjs.com/package/vue-lazyload
三、swiper效果 vue-awesome-swiper
官网:https://www.npmjs.com/package/vue-awesome-swiper
#授课思路
#案例作业
1、花礼网 swiper
2、todolist 练习elmentUI排版
3、书城项目 练习图片的loading