Vue 的 StoryBook：[Vue 警告]：无法安装组件：模板或渲染 function 未定义

Question

我想使用Gridsome和StoryBook构建我的前端，为我们的开发人员和产品经理提供一个基于 Web 的组件库。

Gridsome 正在正常工作。 通过npm run storybook运行 StoryBook 运行 Storybook 作品。 但是当我在 Chrome 中访问该页面时，控制台错误提示： [Vue 警告]：无法安装组件：模板或渲染 function 未定义。

我已按照 StoryBook 文档进行设置。 但是我创建了一个自定义的 webpack.config.js，因为我有全局（scss）资源，应该在我的所有组件（例如全局变量）中加载和注入。

我认为问题出在我的 webpack 文件中。 但是改变事物会导致更多错误^^

我的组件：

<template>
    <h1 :style="styles">
        <slot></slot>
    </h1>
</template>
<script>
    export default {
        name: "FaaH1",
        props: {
            color: {
                type: String,
                required: false
            }
        },
        computed: {
            styles(){
                return {
                    color: this.color
                }
            }
        }
    }
</script>
<style scoped lang="scss">
    h1 {
        font-size:   $font-size-base * 2.5;
        color: $secondary;
        text-transform: uppercase;
        font-weight: $font-weight-extrabold;
    }
</style>

我的故事书故事：

import { linkTo } from "@storybook/addon-links";
import Vue from 'vue';

import FaaH1 from "../src/components/texts/headings/FaaH1";

export default {
    title: 'Headings',
};

export const faaH1 = () => ({
    components: {FaaH1},
    template: '<faa-h1>Heading H1</faa-h1>'
});

我的 config.js：

import { configure } from '@storybook/vue';

// Components-Import
import FaaH1 from "../src/components/texts/headings/FaaH1";

import Vue from 'vue';

Vue.component('faa-h1', FaaH1);

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

最后是我的 webpack.config.js

const path = require('path');

module.exports = async ({config, mode}) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../src/assets/styles/'),
    });

    config.module.rules.push({
        test: /\.vue$/,
        use: 'vue-loader'
    });

    config.module.rules.push({
        test: /\.css$/,
        use: [
            { loader: 'vue-style-loader' },
            { loader: 'css-loader', options: { sourceMap: true } },
        ]
    });

    config.module.rules.push({
        test: /\.scss$/,
        use: [
            { loader: 'vue-style-loader' },
            { loader: 'css-loader', options: { sourceMap: true } },
            { loader: 'sass-loader', options: { sourceMap: true } },
            { loader: 'sass-resources-loader',
                options: {
                    sourceMap: true,
                    resources: [
                        path.resolve('../src/assets/styles/_globals.scss')
                    ]
                }
            }
        ]
    });

    return config;
};

Answer 1

猜测一下， Webpack 不知道尝试将FaaH1的请求视为FaaH1.vue 。 尝试在import路径中具体化，即

import FaaH1 from "../src/components/texts/headings/FaaH1.vue"

或者，将.vue添加到 Webpackresolve.extensions列表中

config.resolve.extensions.push('.vue')

Answer 2

不确定我们是否可以通过以下方式注册 Vue 全局组件。 Vue.component()确实将 function 类型作为其第二个参数。 但我认为定制的 function 在其原型中可能没有足够的属性。 所以这里最好使用Vue.extend()而不是箭头 function。

// Perhaps NG
export const faaH1 = () => ({
    components: {FaaH1},
    template: '<faa-h1>Heading H1</faa-h1>'
});

// This should work
export const faaH1 = Vue.extend({
    components: {FaaH1},
    template: '<faa-h1>Heading H1</faa-h1>'
})

Vue.component('faa-h1', FaaH1);