鍍金池/ 問答/HTML  Office/ Vue-awesome-swiper css翻譯報錯

Vue-awesome-swiper css翻譯報錯

使用swiper直接從官網(wǎng)占的代碼,但是總是報錯,將css注釋掉之后就不報錯
報錯信息如下

clipboard.png
代碼如下主文件代碼

請輸入代碼import Vue from "vue";
import App from "./container/App.vue";
import Vuex from "vuex";
import VueRouter from "vue-router";
import store from "./store.js";
import routes from "./routes.js";
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
Vue.use(VueAwesomeSwiper);
Vue.use(Vuex);
Vue.use(VueRouter);
const router = new VueRouter({routes})
new Vue({
    "el":"#app",
    "data":{},
    //注冊組件
    "components":{
        App
},
    render(h){
    return h(App)
    },
   store : new Vuex.Store(store),
   router
})

package.json

{
  "name": "wangyiyun",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --port 8080 --content-base ./"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.5.17",
    "vue-awesome-swiper": "^3.1.3",
    "vue-loader": "^15.2.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "css-loader": "^1.0.0",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "vue-loader": "^15.2.6",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.16.4"
  }
}
``<template>
<div>
    <Swiper></Swiper>
</div>
</template>
<script>
import Swiper from "./swipper.vue";
export default{
     components:{
        Swiper
    }
}
</script>

<template>
<swiper :options="swiperOption" ref="mySwiper">

<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination"  slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>

</swiper>
</template>
<script>
export default {

name: 'carrousel',
data() {
  return {
    swiperOption: {
      // some swiper options/callbacks
      // 所有的參數(shù)同 swiper 官方 api 參數(shù)
      // ...
      pagination: {
        el: '.swiper-pagination'
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      }
    }
  }
},
computed: {
  swiper() {
    return this.$refs.mySwiper.swiper
  }
}

}
</script>

回答
編輯回答
浪婳

import 'swiper/dist/css/swiper.css';語句放在<style></style>標(biāo)簽里面試試。在</script>后面新建一個<style></style>

2017年12月15日 06:15
編輯回答
亮瞎她

把引用改成這個試試
import { swiper, swiperSlide } from 'vue-awesome-swiper';

2017年3月3日 03:31
編輯回答
久愛她

看錯誤 應(yīng)該是沒有css-loader 你是不是沒有npm intsall

2017年2月15日 08:22