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