TypeScript文件中导入Vue组件

Question

I have been trying to use Vue.js with TypeScript and I came across this repo .

I faced issues here that I am getting error while importing Vue Single Component File from TypeScript. I am using Visual Studio Code. Please see error below.

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 error:

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

Answer 1

From Alex Jover :

If your editor is yelling at the line import App from './App' in main.js file about not finding the App module, you can add a vue-shim.d.ts file to your project with the following content:

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

and write :

import App from './App.vue'

instead of

import App from './App'

Answer 2

Check out vue-class-component . Basically, you must add appendTsSuffixTo: [/\\.vue$/] to ts-loader 's options and esModule: true to vue-loader 's options.

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

I may have missed something else.

Answer 3

When using the vue-cli, adapt vue-loader-conf.js as follows:

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

FYI, you can generate . d.ts file for your components by turn on declaration generate in tsconfig. json, copy them to the source dir, see what you've got!

Answer 5

Had this issue even with a vue.d.ts because I had multiple declarations in the same file. Had to split them up like this:

In vue 3 this is the vue.d.ts that has to be somewhere in a path that is included in your tsconfig.json.

// vue.d.ts
declare module '*.vue' {
    import { DefineComponent } from 'vue'
    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
    const component: DefineComponent<{}, {}, any>
    export default component
}

Also I wanted to set global properties on my vue instance and have them available in any component via intellisense. After adding the following code to my vue.d.ts file, the editor complained when I imported.vue files into typescript. So I had to add a separate vue-runtime.d.ts file , or it wouldn't work:

// vue-runtime.d.ts
import '@vue/runtime-core'

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        customFunction: (val: number) => string;
    }
}

Then customFunction will be registered on all components!