在vue中使用Element-UI

Element-UI是一套基于Vue2.0的UI组件库，http://element.eleme.io/#/zh-CN/component/carousel

首先npm install element-ui --save

然后在main.js中引入：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'Vue.use(ElementUI)new Vue({el: '#app',render: h => h(App)
})

即可使用

<template><el-carousel :interval="4000" type="card" height="200px"><el-carousel-item v-for="item in 6" :key="item"><h3>{{ item }}</h3></el-carousel-item></el-carousel>
</template><style>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}
</style>

将图片引入的一个效果：

若单页则引入js和css即可

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>