欢迎加入前端交流群交流知识&&获取视频资料: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="" 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: #;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: ;
} .el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
} .el-carousel__item:nth-child(2n+) {
background-color: #d3dce6;
}
</style>

这样就好了;。。。

vue中的swiper element ui的更多相关文章

  1. vue中,使用element ui的弹窗与echarts之间的问题

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就 ...

  2. Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置

    Laravel 版本:6.X Vue 版本:2.X Laravel配置: Laravel使用的是Laragon安装 选择Laravel:接下来弹出框,输入项目名,laravel会自动创建一个数据库,数 ...

  3. vue中引用swiper轮播插件

    有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理. 申明:本文所使用的是vue.2x版本. 通过npm安装插件: npm ins ...

  4. vue中修改swiper样式

    问题 vue单文件组件中无法修改swiper样式. 解决 1,单文件组件中:新增一个style 不加scoped 让它最终成为全局样式.只在其中操作swiper的样式. <style lang= ...

  5. 在vue中使用swiper组件

    第一步:在终端的项目根目录下载安装swiper: cnpm/npm install vue-awesome-swiper --save; 第二步:在程序入口文件main.js中引用: import V ...

  6. vue问题三:element ui的upload组件上传图片成功和移除事件

    element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...

  7. 在vue项目中快速使用element UI

    推荐使用npm安装 1.安装:npm install element-ui -S 2.整体引入: 在你项目的main.js中写入: import ElementUI from 'element-ui' ...

  8. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  9. 在vue2.x项目中怎么引入Element UI

    参考:https://blog.csdn.net/u014054437/article/details/79862793 Element使用方法:https://element.eleme.cn/#/ ...

随机推荐

  1. 积跬步,聚小流------java信息生成图片

    需求: 是在做证书的时候碰到的这个问题. 当时需求是能够进行在线打印证书,第一次进行的操作是直接打印html,并且已经排好版(用jqprint插件)进行打印.在打印时碰到了兼容的问题,另外因为背景图片 ...

  2. 解决问题方法:没有设置对象,app.Config没有配置

  3. VSCode (Code) 技法

    本人使用插件推荐 indent-rainbow https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow B ...

  4. android studio开发去掉titlebar

    android:theme="@style/AppTheme"换成android:theme="@style/Theme.AppCompat.NoActionBar&qu ...

  5. C语言中以文本方式读写文件时换行符转换的注意事项

    我们知道在UNIX下是没有回车符(\r)的,只有换行符(\n),而C语言诞生于UNIX(Linux即面向开源的UNIX,Mac OS也是UNIX发展而来的,而Windows是从MS-DOS发展而来,与 ...

  6. android 给imageView,文字等加上阴影[记录]

    1.链接 https://github.com/Devlight/ShadowLayout 2.效果 3.code compile 'com.github.devlight.shadowlayout: ...

  7. C#数组大小分析(附测试过程中想起的debug和release区别)

    C#数组的理论最大长度到底是多少呢?曾经一度问过度娘,谷歌,貌似都没有得出一个比较准确的答案,无外乎是什么Int32的最大值啊什么的,今天终于决定写个软件来自己测试一下,在几台不同的电脑里面实际测试看 ...

  8. struts 中数据处理的3中方式

    方式一: 获取servletapi中的对象 方式二: struts中封装的对象 方式三: 实现接口 方式一和方式二的区别 方式一需要额外引入包或者是方式二实现不了的功能,比如:获取url 因为方式二只 ...

  9. CF1041F Ray in the tube构造_思维

    不难发现起点必定是一个点. 每次间隔的距离一定是 2k2^k2k,关键就是要判断两点是否在同一跳跃距离上可被同时覆盖. 我们可以对上边进行 x1≡x_{1}\equivx1​≡ x2mod(2∗dx) ...

  10. easyui easyui-accordion的使用和在tab切换时没有样式

    1.easyui-accordion的使用 <div id="aa" class="easyui-accordion" style="width ...