Question

我试图将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警告]：无法安装组件：模板或渲染功能   定义

在
中找到
---＆GT;           在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的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

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

1 个答案: