vue引入php插件,vue引入swiper插件的使用实例

vue引入swiper插件的使用实例

2019-01-07

编程之家收集整理的这篇文章主要介绍了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%;

}

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

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

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。