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

【问题标题】：Vue with Typescript - using components without definitionVue with Typescript - 使用没有定义的组件
【发布时间】：2018-01-22 17:54:08
【问题描述】：

我正在尝试使用 vue-instant 组件作为子组件。我不确定如何添加没有定义的组件，或者我的问题可能出在 webpack 配置中，因为缺少类型而忽略了 node_modules？这是我所拥有的：

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'
};

【问题讨论】：

标签： typescript webpack vue.js

【解决方案1】：

问题不在于缺少它们的类型。除非您在严格模式下使用 TypeScript，否则任何没有类型的内容都会导入为 any。

问题是 VueImport 的 default export 是一个插件对象，所以当你 import VueInstant from 'vue-instant' 你实际上并没有导入组件。

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

您需要使用 ES6 解构来指定要导入的内容，而不是使用默认导入：

import { VueInstant } from 'vue-instant'
VueInstant

或者，您可以在别名下导入所有导出的模块，然后从那里调用类：

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

【讨论】：