在TypeScript文件中导入Vue组件

Question

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

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

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 Code错误：

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

Answer 1

来自https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project/

如果您的编辑器在main.js文件中的'./App'关于无法找到App模块的行导入应用程序大吼大叫，您可以添加 vue-shim.d.ts 使用以下内容将文件归档到您的项目：

/* extract all office locations */
var officeLocations = {};
for (var i = 0; i < partners.length; i++) {
    officeLocations[i] = JSON.parse(JSON.stringify(partners[i].offices));
}

并写：

// A dictionary object NSDictionary *dict; // Create array to hold dictionaries NSMutableArray *arrayOfDictionaries = [NSMutableArray array]; // Create three dictionaries dict = [NSDictionary dictionaryWithObjectsAndKeys: // Key value pairs @"Bock", style, @"Deep Gold", appearance, [NSNumber numberWithInt:25], hopProfile, nil]; arrayOfDictionaries addObject:dict]; dict = [NSDictionary dictionaryWithObjectsAndKeys: // Key value pairs @"India Pale Ale (IPA)", style, @"Copper", appearance, [NSNumber numberWithInt:50], hopProfile, nil]; [arrayOfDictionaries addObject:dict]; dict = [NSDictionary dictionaryWithObjectsAndKeys: @"Stout", style, @"Jet Black", appearance, [NSNumber numberWithInt:35], hopProfile, nil]; [arrayOfDictionaries addObject:dict]; NSLog(@"array of dictionaries: %@", arrayOfDictionaries);

而不是

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

Answer 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
    }
  }
]}}

我可能错过了其他的东西。

Answer 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
}

Answer 4

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