Vue.js 在使用dotnet new vue创建的项目中使用单个文件组件

我使用来自的SPA模板创建了一个新的.net核心项目

使用

dotnet新vuejs

使用

npm install

还原包后，我可以成功地打开项目并从Visual Studio运行它

我现在想通过在/ClientApp/components/about/中添加about.vue文件来使用单个文件组件

我将app.ts改为使用

@Component({
    components: {
        MenuComponent: require('../navmenu/navmenu.vue.html'),
        AboutComponent: require('../about/about.vue')
    }
})

当我现在运行应用程序时，我得到了错误

ERROR in ./ClientApp/components/about/about.vue
Module parse failed: C:\playground\vue-journey\ClientApp\components\about\about.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <div class="about">
|         <h1>This is an about page</h1>
 @ ./~/awesome-typescript-loader/dist/entry.js?silent=true!./ClientApp/components/app/app.ts 30:28-57
 @ ./ClientApp/components/app/app.vue.html
 @ ./ClientApp/boot.ts
 @ multi event-source-polyfill webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true ./ClientApp/boot.ts

编译单文件组件需要做什么

编辑 文件组件本身只包含一个模板，它在我使用vue cli创建的项目中工作

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

这是一个关于页面

从中，您似乎缺少Vue加载程序插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [
        new VueLoaderPlugin()
    ]
}

---

这个项目是用一个不同的模板创建的，然后我想

我实际上使用了

dotnet新vuejs

---

不

dotnet新vue

。类似的事情发生在午夜前后。

about.vue是否包含typescript？我更新了问题，使其包含单文件组件的内容。

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    plugins: [
        new VueLoaderPlugin()
    ]
}