Vue with Typescript-使用沒有定義的組件

Question

我正在嘗試使用vue即時組件作為子組件。 我不確定如何添加未定義的組件，或者我的問題是由於缺少類型而忽略了node_modules的webpack配置？ 這是我所擁有的：

SingleUserSearch.vue（我的自定義組件）：

<template>

    <div class="input-group">         

       <vue-instant 
       v-model="value"            
       @input="changed"            
       :suggestions="suggestions" 
       name="customName" 
       placeholder="custom placeholder" 
       type="google"></vue-instant>

    </div>

</template>

<script lang="ts">       

    import Vue from "vue";
    import Component from "vue-class-component";
    import axios from "axios";
    import VueInstant from 'vue-instant'   

    let vueInstantComponent : Vue.Component = VueInstant;

    @Component({
        components: {
            'vue-instant': vueInstantComponent
        }       

    })
    export default class SingleUserSearch extends Vue {

        value:string="";
        suggestions : Array<string> = []
        async changed() {
            var that = this
            this.suggestions = []
            let response = await axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value);                   
            alert(response);                           
        }
    }
</script>

然后，我可以毫無困難地使用webpack編譯代碼。 當我嘗試測試頁面上的代碼時，我得到：

[Vue警告]：無法安裝組件：未定義模板或渲染功能。

在發現

--->在scripts \\ vue \\ components \\ SingleUserSearch.vue

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './scripts/vue/main.ts',
    output: {
        path: path.resolve('./scripts/build/'),
        filename: 'app.js'
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader?' + JSON.stringify({
                    transpileOnly: true
                })
            },
            {
                test: /\.vue$/,
                loader:'vue-loader'  
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015','stage-0','stage-1','stage-2','stage-3']
                }
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue': path.resolve('./node_modules/vue/dist/vue.esm.js')
        }
    },
    stats: {
        colors: true
    },
    devtool: 'source-map'
};

Answer 1

問題不是它們缺少類型。 除非您在嚴格模式下使用TypeScript，否則所有不帶類型的內容都將作為any導入。

問題在於VueImport的默認導出是一個插件對象，因此，當您import VueInstant from 'vue-instant'實際上並沒有導入該組件。

只需console.log(VueInstant) ，您就會明白我的意思。

除了使用默認導入，您還需要通過使用ES6解構來指定要導入的內容：

import { VueInstant } from 'vue-instant'
VueInstant 

或者，您可以在別名下導入所有導出的模塊，然后從那里調用類：

import * as VueInstant from 'vue-instant'
VueInstant.VueInstant