引入轮播插件 打开项目的根目录,然后打开命令窗口,输入 npm install vue-awesome-swiper --save
在main.js 中,引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'(css 不显示的问题可能就在这)
同时在你所要使用的vue文件中,再次引入,(不知道为什么还要再次引入,否则获取不到Swiper)
import VueAwesomeSwiper from 'vue-awesome-swiper'
然后在页面渲染完成后,初始化Swiper
export default {
name: 'carrousel',
data() {
return {
swiperOption: {
// some swiper options/callbacks
// 所有的参数同 swiper 官方 api 参数
// ...
}
}
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
mounted() {
// current swiper instance
// 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
console.log('this is current swiper instance object', this.swiper)
this.swiper.slideTo(3, 1000, false)
}
}
vue-cli脚手架关闭eslint的步骤:
1.打开 build文件夹下面的webpack.base.conf.js;
2.找到下面这段代码,并将它注释掉:
const createLintingRule = () => ({
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter'),
// emitWarning: !config.dev.showEslintErrorsInOverlay
// }
})
重启项目。