Vue with Typescript-使用没有定义的组件

Question

I'm trying to use vue-instant component as a child component. I'm not sure how to add components without definition, or maybe my issue is in the webpack config ignoring node_modules because of the lack of type? Here's what I have:

SingleUserSearch.vue (my custom component):

<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>

Then I compile my code using webpack without difficulties. When I try to test the code on page I get:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> at 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

The issue isn't that they types are missing. Unless you're using TypeScript in strict mode, anything without types is imported as any .

The issue is that VueImport's default export is a plugin object, so when you import VueInstant from 'vue-instant' you're not actually importing the component.

Just console.log(VueInstant) and you'll see what I mean.

Instead of using the default import, you'll need to either specify what you would like to import by using ES6 destructuring:

import { VueInstant } from 'vue-instant'
VueInstant 

Alternatively you can import all the exported modules under an alias, and then call the class from there:

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