[Vue warn]: Cannot find element: #indexTop ；不能在每一个vue文件中进行独立的控制么

悬赏园豆：30 [已解决问题] 解决于 2018-02-09 11:45

项目是用vue-cli生成的，然后在webstrom打开

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="src/assets/">
    <meta charset="utf-8">
    <title>fuqing_studio</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
    <style>
      @import "css/base.css";
      @import "css/patient_education.css";
      @import "css/swiper.min.css";
      @import "css/mine.css";
    </style>
  </body>
</html>

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from './component/indexTop.vue'

new Vue({
  render: h => h(Index),
}).$mount('#app')

我希望进去的页面是首页顶部的轮播图

<template>
  <div id="indexTop">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in banners" @click="jumpUrl($index)" class="swiper-slide img"><img src="{{item.path}}" alt=""></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>

  import Vue from 'vue'
  import axios from 'axios'

  Vue.prototype.$http = axios
   new Vue({
      data:{
        banners:{ },
      },
      methods: {
        jumpUrl: function(index){

        }
      },
      mounted: function () {
        this.$nextTick(function () {
          var self = this;
          axios.get('http://localhost:66/studio/banner')
            .then(function(res){
              console.log(res.data);
              self.banners = res.data
            })
            .catch(function(err){
              console.log(err);
            })
        });
      }
    }).$mount('#indexTop')
</script>