使用Vueify类型记录的Vue错误

Question

我是Vue的新手，并且成功地获得了一个使用gulp、vueity和类型记录的示例应用程序。

我将代码的主要部分用于演示发生了什么以及我遇到的问题。

Menu.ts

import Vue from 'vue'
import Menu from './menucomponent.vue'
new Menu().$mount('#menu');

MenuComponent.ts

import { Vue } from 'vue-property-decorator'
import Component from 'vue-class-component'
import TestComponent from './test.vue'

@Component({
    components: {
        TestComponent 
    }
})
export default class Menu extends Vue {}

MenuComponent.vue

<template>
    <div class="container menu">
    <TestComponent/>
    </div>
</template>
<script lang="ts" src="./menucomponent.ts"></script>

Test.vue

<template>
<h1>hi</h1>
</template>
<script lang="ts">
import { Component,Vue } from 'vue-property-decorator'
@Component({
})
export default class test extends Vue{}
</script>

编译ts和vue的Gulp方法

gulp.task('compile-vue', function () {
    // we define our input files, which we want to have
    // bundled:
    var paths = {
        browserifyEntries: [
            'menu.ts'
        ],
        dependencies: ['']
    };
    // map them to our stream function
    var tasks = paths.browserifyEntries.map(function (entry) {
        console.log('Compiling ' + entry);
        return browserify({ entries: ["ScriptsSrc/vue/" + entry] })
            .external(paths.dependencies)
            .plugin(tsify)
            .transform(vueify)
            .transform(babelify, { presets: ["es2015"], extensions: [".tsx", ".ts"] })
            .bundle().on('error', swallowError)
            .pipe(source(entry))
            .pipe(rename({
                extname: '.js'
            }))
            .pipe(gulp.dest('wwwroot/scripts'));
    });
    // create a merged stream
    return es.merge.apply(null, tasks);
});

发布，我能够在MenuComponent中完成我所需要的一切，一切都进行得很顺利，工作顺利。

但是，由于代码库不断增加，我想将它分成一些组件，比如，一旦我尝试从Vue中得到一个错误，如下所示

Vue警告:未知的自定义元素：-正确注册组件吗？对于递归组件，请确保提供"name“选项。

我只是使用吞咽，因为我希望避免webpack，并引入另一个工具的构建。

我很想知道我错过了什么。

Answer 1

我认为您的问题在于Test.vue中的类名和MenuComponent.ts中相应的导入语句。

尝试将类名更改为：

export default class TestComponent extends Vue{}

它将与预期导出的默认值在这里对齐：

import TestComponent from './test.vue'

或将上述导入更改为：

import test from './test.vue'

并更新组件注册：

components: {
    test
}

Answer 2

希望这能帮助其他人使用打字本/vue/gulp。

经过许多小时之后，我找到了一个解决方案，目前看来它可以按如下方式修改代码：

Menu.ts

import Vue from 'vue'
import Menu from './menucomponent.vue'
import TestComponent from './test.vue'
new Menu({components:{TestComponent}}).$mount('#menu');

出于某种原因，它在这个级别注入组件，并可以从MenuComponent中删除@ component ()。

我确信有一个简单的修复方法可以在MenuComponent中注册组件，但是现在这个方法还不错。