vue中的swiper element ui

 

欢迎加入前端交流群交流知识&&获取视频资料：749539640

 

很多同学问，怎么把swiper引入到vue的脚手架里去，之前的一篇博客有提到怎么引入，但是后来感觉不怎么好，还是用一些vue ui组件感觉好一些；

常见的vue组件：

pc：

element ui ：http://element.eleme.io/#/zh-CN

iview ：https://www.iviewui.com/

mobile：

mint-ui：http://mint-ui.github.io/#!/zh-cn

今天就说一下用比较常见的组件elemt ui来写一下；

官方脚手架文档安装一个脚手架；

npm install -g vue-cli

vue init webpack elemt

进入项目目录；

npm install

npm start

 

安装Element到项目;

npm i element-ui

在 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)
})

就拿官方的Helloword来写；Helloword.vue里写：

<template>
  <el-carousel :interval="4000" type="" height="200px">
    <el-carousel-item v-for="（item,index） in 6" :key="index">
      <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>

这样就好了；。。。