第十六單元(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