VUE脚手架使用

164 阅读1分钟

引入轮播插件 打开项目的根目录,然后打开命令窗口,输入 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
      // }
    })

重启项目。