在 YouTube 上的 Net Ninja Vue 教程 19 中，我正在介绍 嵌套组件 ，我希望使用 v-for 和 v-bind: key 显示 ul 列表。

我一直收到以下错误，无法编译。 我是 Vue 新手，那里的 Guru 能帮我解决一下吗？目前，我的 vue 版本是 @vue/cli 4.4.6 ， npm 是 6.13.4 。

<template>
    <ul>
        <li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
    </ul>
</template>

<script>
export default {
  data () {
    return {
      ninjas: ['Ryu','Ken','Yoshi']
    }
  }
}
</script>

错误

ERROR in ./src/Ninjas.Vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <ul>
|         <li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
 @ ./src/main.js 3:0-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js