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警告]：未知的自定义元素： - 您是否正确注册了组件？对于递归组件，请务必提供＆＃34; name＆＃34;选项。

我只使用gulp，因为我希望避免使用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

希望这可以帮助其他人使用typescript / 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中注册组件有一个简单的方法，但是现在这个工作正常。

使用Vueify Typescript的Vue错误

2 个答案: