在 TypeScript 文件中导入 Vue 组件答案

【问题标题】：Importing Vue components in TypeScript file在 TypeScript 文件中导入 Vue 组件
【发布时间】：2017-06-19 12:50:17
【问题描述】：

我一直在尝试将 Vue.js 与 TypeScript 一起使用，但遇到了this repo。

我在这里遇到了从 TypeScript 导入 Vue 单组件文件时出错的问题。我正在使用 Visual Studio 代码。请参阅下面的错误。

main.ts:

// The Vue build version to load with the 'import' command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import * as Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
})

VS 代码错误：

1 ERROR 
• main.ts
[ts] Cannot find module './App'. (4 17)

【问题讨论】：

标签： javascript typescript vue.js

【解决方案1】：

来自Alex Jover：

如果您的编辑器对 main.js 文件中的 import App from './App' 这一行大喊“找不到 App 模块”，您可以添加 vue-shim.d.ts 将以下内容添加到您的项目中：

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

然后写：

import App from './App.vue'

而不是

import App from './App'

【讨论】：

这里到底发生了什么？你能解释一下吗？
@winklerrr 如果你还没有弄清楚，该模块声明告诉 typescript 将每个 .vue 文件假定为 Vue 类型。因此，当您将任何 .vue 文件导入 .ts 文件时，它被认为是 Vue 类型。不确定 Vue 对声明做了什么，但我想你可以在根目录中的任何 .d.ts 文件中声明模块，因为 TS 会自动处理所有 .d.ts 文件
但是，我尝试导入的每个类都有interface 类型（因为Vue 本身就是一个接口）。如何正确加载类（以访问其类变量等）？

【解决方案2】：

查看vue-class-component。基本上，您必须将appendTsSuffixTo: [/\.vue$/] 添加到ts-loader 的选项和esModule: true 到vue-loader 的选项。

// webpack.config.js

{ modules: { rules: [
  {
    test: /\.ts$/,
    exclude: /node_modules|vue\/src/,
    loader: "ts-loader",
    options: { appendTsSuffixTo: [/\.vue$/] }
  },
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      esModule: true
    }
  }
]}}

我可能错过了其他东西。

【讨论】：

【解决方案3】：

使用vue-cli时，适配vue-loader-conf.js如下：

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  loaders: utils.cssLoaders({

    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction, esModule: true
  }), esModule: true
}

【讨论】：

【解决方案4】：

仅供参考，您可以生成 .通过在 tsconfig 中打开声明生成来为您的组件创建 d.ts 文件。 json，将它们复制到源目录，看看你有什么！

【讨论】：