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>

這樣就好了；。。。