如何在中使用Typescript。vue文件是否使用VS代码？

Question

我使用的是Visual Studio代码、Vue 2（网页包模板）和Typescript。

这是我的应用。vue组件：

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

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

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

问题1：一切正常，但我想在

问题2：在我的main.ts中，我有从'. /App'导入应用程序，但是“. /App”用红色下划线，因为VS Code找不到. ts文件。有没有办法让编辑器在编译时间（在编辑时间）之前识别. vue？

更新（2018-03-25）：我强烈建议所有想要设置typescript的人阅读此文




Answer 1

对于Q1，我找到了一个很好的VS Code扩展，称为vetur，支持智能感知

对于第二季度而言，这是无法通过以下方式实现的。vue文件，仅需使用。里面有模板

Answer 2

对于第二季度，vue类组件附带了一个解决方案sfc。d、 ts，希望它能帮助你。如果你对Q1有任何想法，请通知我

Answer 3

对于Q1，将Typescript代码放入一个单独的脚本中。ts文件，并将其包含在应用程序中。vue类似：

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

对于Q2，正如@Oswaldo所建议的，您可以定义一个vue。d、 ts包含以下内容的文件：

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

如果您将此文件放在${Project_ROOT}/typings文件夹中，您需要将此类型文件包含在您的tsconfig.json中，例如

"typeRoots": ["./typings"]

然后可以导入*。vue带有的文件。vuepostfix:

import App from './App.vue'

如果您不想包含。vuepostfix，您可以将所有vue组件放在一个文件夹中，例如src/components并更改vue。d、 ts如下所示：

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

src定义为webpack。基础conf.js作为绝对路径的别名。

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

然后，您需要使用完整路径来导入不带的组件。vuepostfix:

import App from 'src/components/App'

这两种方法都不是优雅的解决方案，但红色下划线已经消失了。