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

我試圖使用vue-instant組件作爲子組件。我不知道如何添加沒有定義的組件，或者也許我的問題是在webpack配置中忽略node_modules，因爲缺少類型？下面是我有：Vue with Typescript - 使用沒有定義的組件

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 warn]：裝載組件失敗：模板或渲染函數未定義爲。在

---> 發現在腳本\ VUE \組件

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

來源

2017-08-14 Vilém Procházka

問題ISN」他們的類型不見了。除非你在嚴格模式下使用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

來源

2017-08-17 18:26:05 fny

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

回答

相關問題