javascript - Importera Vue-komponenter i TypeScript-fil

Jag har försökt att använda Vue.js med TypeScript och jag stötte på detta repo.

Jag stötte på problem här där jag får ett fel när jag importerar Vue Single Component File från TypeScript. Jag använder Visual Studio Code. Se fel nedan.

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

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

Svar #1

Från Alex Jover:

Om din redigerare skriker åt raden import App from './App' i main.js-filen om att den inte hittar App-modulen, kan du lägga till en vue-shim.d.ts-fil i ditt projekt med följande innehåll:

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

och skriv :

import App from './App.vue'

istället för

import App from './App'

Svar #2

Kolla in vue-class-component. I princip måste du lägga till appendTsSuffixTo: [/\.vue$/] i ts-loader:s alternativ och esModule: true i vue-loader:s alternativ.

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

Jag kan ha missat något annat.

Relaterade artiklar