VS Kodu kullanarak .vue dosyalarındaki Typescript ile nasıl çalışır?

Question

Visual Studio Kodu, Vue 2 (webpack şablonu) ve Typescript kullanıyorum.

Bu benim App.vue bileşenidir:

<template> 
    <div id="app"> 
     <navbar></navbar> 
     [content here] 
    </div> 
</template> 

<script lang="ts"> 
    import Navbar from './components/Navbar' 

    export default { 
     components: { 
      Navbar 
     } 
    } 
</script> 

Soru 1: Her şey iyi çalışıyor, ancak ts dosyalarında olduğu gibi ben <script lang="ts"> etiketi içinde intellisense istiyorum, peki nasıl elde edebilirsiniz o?

Soru 2: Ana sayfamda import App from './App' var, ancak VS Kodu, .ts dosyasını bulamadığı için "./App" kırmızı olarak altı çizili. Düzenleyicinin, derleme zamanından önce (düzenleme zamanında) .vue değerini tanıması için bir yol var mı?

Answer 1

iç şablonla ts gibi App.vue bunu ayrı bir script.ts dosyaya typescript kodu koyup şunlardır: @Oswaldo önerdiği gibi, Q2 için

<script lang="ts"> 
    import s from './script' 
    export default s 
</script> 

, bir 01 tanımlı olabilir Eğer ${Project_ROOT}/typings klasöründe bu dosyayı koyarsanız

declare module '*.vue' { 
    import Vue = require('vue') 
    const value: Vue.ComponentOptions<Vue> 
    export default value 
} 

, sen Sonra birlikte *.vue dosyası alabilir

"typeRoots": ["./typings"] 

gibi senin tsconfig.json bu tip dosya eklemek gerekir: Aşağıdaki içeriğe sahipdosya .vue postfix:

import App from './App.vue' 

Eğerdahil etmek beğenmezsenizpostfix, bu tür src/components gibi tek bir klasördeki tüm Vue bileşenlerini koymak ve şöyle vue.d.ts değiştirebilirsiniz:

declare module 'src/components/*' { 
    import Vue = require('vue') 
    const value: Vue.ComponentOptions<Vue> 
    export default value 
} 

src mutlak yolu için bir takma ad olarak webpack.base.conf.js tanımlanır.

resolve: { 
    extensions: ['.js', '.vue', '.json', '.ts'], 
    alias: { 
    'vue$': 'vue/dist/vue.esm.js', 
    'src': resolve('src') 
    } 
} 

Sonra .vue postfix olmadan bir bileşeni ithal etmek tam yolunu kullanmak gerekir:

import App from 'src/components/App' 

Hem zarif çözümler değil ama kırmızı altı çizili gitmiş.

Answer 2

Q2 için, vue sınıfı bileşen bir çözümle gelir, sfc.d.ts, umarım size yardımcı olabilir. Q1 için herhangi bir fikir varsa, bana Q1 için

Answer 3

haber veriniz ben güzel VS Kod uzatma Q2 için

O .vue dosyaları ile elde edilemez Intellisense desteği ile vetur denilen bulunan tek kullanmak gerekir Q1 için bu