码迷,mamicode.com
首页 > 其他好文 > 详细

在vue中使用Element-UI

时间:2017-07-27 12:41:28      阅读:392      评论:0      收藏:0      [点我收藏+]

标签:unp   ref   imp   lib   use   type   blog   tps   one   

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>

 

在vue中使用Element-UI

标签:unp   ref   imp   lib   use   type   blog   tps   one   

原文地址:http://www.cnblogs.com/rlann/p/7244130.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!