Question

我正在关注YouTube上的《 Net Ninja Vue教程》。在教程19中，我将介绍嵌套组件，在这些组件中，我希望使用v-for和v-bind：键显示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>

<style>

</style>

错误

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

Answer 1

您还需要检查是否在 webpack.mix.js 文件中添加了以下代码：

 mix.js('resources/js/app.js', 'public/js').vue();

我们添加了 .vue() 函数，因为现在最新的更新，webpack 的配置发生了变化，所以我们需要根据它进行更改。

希望对大家有所帮助

Answer 2

在 laravel 8 中如果你想编译 vue，在运行之前确保你已经安装了“vue-template-compiler”&&“vue-loader”和 npm 如果没有安装试试这个：

npm install vue-template-compile

npm install vue-loader

现在你可以运行 npm run watch

Answer 3

首先，Ninjas.Vue中的代码没有错

问题在于文件名Ninjas.Vue应该重命名为Ninjas.vue

因为vue中的组件以小写的扩展名.vue结尾

VUE：模块解析失败：意外的令牌（1：0）

3 个答案: