vue 项目中使用 vue-awesome-swiper 轮播插件

1. 安装less-loader    npm install less less-loader --save

2.安装 css-loader      npm install css-loader --save

以上两个是该插件的依赖,不安装run的时候会报错

3.安装vue-awesome-swiper  npm install vue-awwsome-swiper --save

4 在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

5.组件使用

vue 项目中使用 vue-awesome-swiper 轮播插件_第1张图片

6.修改build\webpack.base.conf.js文件,添加下面代码  (这一步我没有做,没有报错,作为记录,遇到了错误提示可以使用)

  {

        test: /\.less$/,

        loader: 'style-loader!css-loader!less-loader'

      }

7.其中遇到了ESlint规则一堆报错 eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ”

可以挨个挨个的改正这个错误,也可以在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则


vue 项目中使用 vue-awesome-swiper 轮播插件_第2张图片

你可能感兴趣的:(vue 项目中使用 vue-awesome-swiper 轮播插件)