Question

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

Gridsome正在正常工作。通过npm run storybook运行StoryBook的方法有效。但是，当我在Chrome中访问该页面时，出现控制台错误消息： [Vue警告]：无法装入组件：模板或渲染函数未定义。

我已按照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>

我的StoryBook故事：

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添加到Webpack resolve.extensions的列表中

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

Answer 2

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

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

Story Book for Vue：[Vue警告]：无法安装组件：模板或渲染函数未定义

2 个答案: