代码之家 › 专栏 › 技术社区 › Mathias F

在使用Dotnet New Vue创建的项目中使用单个文件组件

.net-core vue.js

Mathias F · 技术社区 · 6 年前

我使用SPA模板创建了一个新的.NET核心项目。 https://github.com/MarkPieszak/aspnetcore-Vue-starter#getting-started

具有 dotnet new 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

我没有更改webpack.config,因为在我看来它有所需的加载程序。

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    return [{
        stats: { modules: false },
        context: __dirname,
        resolve: { extensions: [ '.js', '.ts' ] },
        entry: { 'main': './ClientApp/boot.ts' },
        module: {
            rules: [
                { test: /\.vue\.html$/, include: /ClientApp/, loader: 'vue-loader', options: { loaders: { js: 'awesome-typescript-loader?silent=true' } } },
                { test: /\.ts$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? [ 'style-loader', 'css-loader' ] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: JSON.stringify(isDevBuild ? 'development' : 'production')
                }
            }),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('site.css')
        ])
    }];
};

我需要做什么来编译单个文件组件?

编辑文件组件本身只包含一个模板,它在我用Vue CLI创建的项目中工作。

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

2 回复 | 直到 6 年前

Julxzs Danny Herbert 6 年前

从 documentation ,似乎缺少Vue加载程序插件。

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

Mathias F 6 年前

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

我实际使用过 dotnet new vuejs

不 dotnet new vue . 类似的事情发生在午夜左右。