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>

这样就好了；。。。