使用时Chrome中报错“Vue2.component is not a function”

[YoungSx]

Uncaught TypeError: Vue2.component is not a function
    at eval (eval at <anonymous> (app.js:1011), <anonymous>:14:17)
    at eval (eval at <anonymous> (app.js:1011), <anonymous>:3:26)
    at eval (eval at <anonymous> (app.js:1011), <anonymous>:11:3)
    at Object.<anonymous> (app.js:1011)
    at __webpack_require__ (app.js:660)
    at fn (app.js:86)
    at eval (eval at <anonymous> (app.js:819), <anonymous>:4:82)
    at Object.<anonymous> (app.js:819)
    at __webpack_require__ (app.js:660)
    at fn (app.js:86)

Vue:2.3.4

[tangbc]

原因是访问组件的时候 Vue 没有引进来，可以贴一下你的代码是如何引用 vue-virtual-scroll-list 的？

[YoungSx]

我是在WebPack下运行，通过NPM安装的。
Scroll.vue:

<template>
  <div>
    <VirtualList :size="50" :remain="6" class="list">
      <Item v-for="index of items" :index="index" :key="index" />
    </VirtualList>
  </div>
</template>

<script>
  import Item from './ScrollItem.vue'
  import VirtualList from 'vue-virtual-scroll-list'
  export default {
    name: 'finite-test',
    components: { Item, VirtualList },
    data () {
      return {
        items: new Array(100000)
      }
    }
  }
</script>

<style scoped>
  .list {
    border-radius: 3px;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
</style>

ScrollItem.vue:

<template>
  <div class="item">
    <span>Item # {{ index }}</span>
  </div>
</template>
<script>
  export default {
    name: 'ScrollItem',
    props: {
      index: Number
    }
  }
</script>
<style scoped>
  .item {
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid #eee;
  }
</style>

[YoungSx]

而且我在node_modules/vue-virtual-scroll-list/index.js中console.log(Vue2.component)，这个是存在并且可以输出看到

[tangbc]

这个是因为 babel 编译 es6 module 的时候带上了 default :

Object{ __esModule: true, default: Vue }

新发布的 1.0.8 版本中添加了对 default 的判断。