我刚刚开始学习VueJs，我完全被一个错误阻止，导致我无法编译我的应用程序 .

我的命令行说：

无法在./src/components/SliderHome.vue中编译1个错误19:46:58错误语法错误：意外的令牌（1：233）@ ./src/components/SliderHome.vue 11：0-366 @ . /node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue @ ./src/App.vue @ ./src/main .js @ multi（webpack）-dev-server / client？http：// localhost：8080 webpack / hot / dev-server ./src/main.js

在我 sliderHome.vue ：

<template>
  <div id="app" class="wrapper" v-cloak v-bind:class="{'is-previous': isPreviousSlide, 'first-load': isFirstLoad}">
    <div class="slide-wrapper" 
         v-for="(slide, index) in slides"
         :key="slide.id, index.id"
         v-bind:class="{ active: index === currentSlide }"
         v-bind:style="{ 'z-index': (slides.length - index), 'background-image': 'url(' + slide.bgImg + ')' }">
      <div class="slide-inner">
        <div class="slide-bg-text">
          <p>{{ slide.headlineFirstLine }}</p>
          <p>{{ slide.headlineSecondLine }}</p>
        </div>
        <div class="slide-rect-filter">
          <div class="slide-rect" v-bind:style="{'border-image-source': 'url(' + slide.rectImg + ')'}"></div>
        </div>
        <div class="slide-content">
          <h1 class="slide-content-text"><p>{{ slide.headlineFirstLine }}</p><p>{{ slide.headlineSecondLine }}</p></h1><a class="slide-content-cta">Call To Action</a></div>
        <h2 class="slide-side-text"><span>{{ slide.sublineFirstLine }} / </span><span>{{ slide.sublineSecondLine }}</span></h2></div>
      </div>
      <div class="controls-container">
        <button class="controls-button" 
          v-for="(slide, index) in slides"
          :key="slide.id, index.id"
          v-bind:class="{ active: index === currentSlide }"
          v-on:click="updateSlide(index)">{{ slide.headlineFirstLine }} {{ slide.headlineSecondLine }}</button>
      </div>
      <div class="pagination-container">
        <span class="pagination-item"
          v-for="(slide, index) in slides"
          :key="slide.id, index.id"
          v-bind:class="{ active: index === currentSlide }"
          v-on:click="updateSlide(index)">
        </span>
      </div>
    </div>
</template>

<script>
export default {
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

我想知道我需要查看的位置，或者我需要寻找什么来清除此错误...

在此先感谢您可以带给我的任何帮助 .

javascript vue.js