前端开发工程师会使用到的Vuejs2.0中如何使用swiper插件

Vue
385
0
0
2022-04-21
标签   Vue组件

前端时间给大家介绍过Swiper插件,它的用法这里就不一一介绍了,今天主要说说Vuejs2.0中如何使用swiper插件。

在这里默认大家已经安装了vue-cli以及明白了Swiper用法。并且有一定vuejs基础。

前端开发工程师会使用到的Vuejs2.0中如何使用swiper插件

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

2.安装runtime:

终端命令:npm install babel-runtime

3..eslintrc.js

前端开发工程师会使用到的Vuejs2.0中如何使用swiper插件

'globals': {

"Swiper": true

} //这个地方是新加入的 全局注入

4.

前端开发工程师会使用到的Vuejs2.0中如何使用swiper插件

import Swiper from '../../static/js/swiper-3.4.2.jquery.min.js'

import '../assets/css/swiper-3.4.2.min.css'

let mySwiper;

5.从swiper中文网获取代码

前端开发工程师会使用到的Vuejs2.0中如何使用swiper插件

在vuejs中<script>里面的methods中添加:

前端开发工程师会使用到的Vuejs2.0中如何使用swiper插件

前端开发工程师会使用到的Vuejs2.0中如何使用swiper插件

记得要放入mounted中。再运行就好了。