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);