vue引入swiper插件的使用实例

前端之家收集整理的这篇文章主要介绍了vue引入swiper插件的使用实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文介绍了vue引入swiper插件分享给大家,希望对大家有帮助

步骤一:

安装vue,

步骤二:

创建vue项目

上面这些就是安装好vue项目,最主要的就是下面的步骤

步骤三:

下载好swiper相关的js和css,js放在static目录下,css放在assets目录下。

步骤四:

安装runtime:

终端命令:npm install babel-runtime

步骤五:

修改.eslintrc.js文件如下:

module.exports = {
root: true,parser: 'babel-eslint',parserOptions: {
sourceType: 'module'
},env: {
browser: true,},// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',// required to lint *.vue files
plugins: [
'html'
],// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,// allow async-await
'generator-star-spacing': 0,// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
},'globals': {
"Swiper": true
} //这个地方是新加入的 全局注入
}

步骤六:

在自己的vue文件添加轮播图代码

Box-sizing:border-Box; padding:10px 0; background: rgba(0,0.4); cursor: pointer; } .gallery-thumbs .swiper-slide{ width:30%; height:6rem; opacity:0.3; } .gallery-thumbs .swiper-slide-active{ opacity:1; } .swiper-slide{ background-size: 100% 160%; -webkit-background-size: 100% 160%; }

这里还有一个很重要的问题,在模板里面设置背景图,写法应该是

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章