vue引入swiper插件的使用实例

发布时间：2020-12-17 02:52:31 所属栏目：百科来源：网络整理

导读：本文介绍了vue引入swiper插件，分享给大家，希望对大家有帮助步骤一：安装vue，步骤二：创建vue项目上面这些就是安装好vue项目，最主要的就是下面的步骤步骤三：下载好swiper相关的js和css，js放在static目录下，css放在assets目录下。步骤四：安装

本文介绍了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文件中添加轮播图代码

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!