使用 Vueify Typescript 的 Vue 错误答案

【问题标题】：Vue error using Vueify Typescript使用 Vueify Typescript 的 Vue 错误
【发布时间】：2018-03-17 10:43:56
【问题描述】：

我是 Vue 的新手，并且已经设法使用 gulp、vueity 和 typescript 获得了一个示例应用程序。

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

菜单.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 警告]：未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

我只使用 gulp，因为我希望避免使用 webpack 并在构建中引入另一个工具。

如果有任何关于我可能遗漏的想法，我将不胜感激。

【问题讨论】：

您没有在MenuComponent.ts 中注册TestComponent。另外，CategoryItem 来自哪里？ Test.vue 也不导入装饰器或扩展 Vue。
@btl 实际上因为实际代码很长，我复制了它并遗漏了一些细节，但已经编辑了。 .
Test.vue 仍然缺少装饰器和 Vue 导入。
再次在代码本身中保留所有内容，但再次编辑

标签： typescript vue.js gulp

【解决方案1】：

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

尝试将类名更改为：

export default class TestComponent extends Vue{}

这将与此处预期的导出默认值一致：

import TestComponent from './test.vue'

或者把上面的导入改成：

import test from './test.vue'

并更新组件注册：

components: {
    test
}

【讨论】：

这实际上不起作用，因为 console.log(test) 未定义。

【解决方案2】：

希望这可以帮助其他使用 typescript/vue/gulp 的人。

经过许多小时后，我找到了一个目前似乎可行的解决方案，它修改代码如下：

菜单.ts

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

似乎出于某种原因，它在此级别注入了组件，并且可以从 MenuComponent 中删除 @Component()。

我确信有一个简单的修复方法可以在 MenuComponent 中注册该组件，但现在这工作正常。

【讨论】：