Typescriptで見る - 定義なしのコンポーネントを使用する

Question

私は子コンポーネントとしてvue-instantコンポーネントを使用しようとしています。私はどのように定義なしでコンポーネントを追加するかわからない、または多分私の問題はタイプの欠如のために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警告]：コンポーネントのマウントに失敗しました：テンプレートまたはレンダリング機能が定義されていません。 が定義されています。スクリプトで

---> で見つかった

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

Answer 1

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