正文 

当前位置： 首页 > 知识 >

在 TypeScript 文件中导入 Vue 组件

     2023-02-22     265

关键词：

【中文标题】在 TypeScript 文件中导入 Vue 组件【英文标题】：Importing Vue components in TypeScript file 【发布时间】：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)

【问题讨论】：

【参考方案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，将它们复制到源目录，看看你有什么！

【讨论】：

使用 TypeScript 时如何在单个文件组件中导入 Vue？

】使用TypeScript时如何在单个文件组件中导入Vue？【英文标题】：HowtoimportVueinSingleFileComponentwhenusingTypeScript?【发布时间】：2020-01-1804:25:47【问题描述】：我有一个单文件组件，我需要导入Vue：<scriptlang="ts">importVuefrom\'vue\'import... 查看详情

如何在 Typescript 文件中导入 Svelte 组件？

】如何在Typescript文件中导入Svelte组件？【英文标题】：HowdoyouimportaSveltecomponentinaTypescriptfile?【发布时间】：2020-10-2621:44:45【问题描述】：是否可以在Typescript文件中导入Svelte组件并让Rollup成功编译它？以下代码作为Javascript文件工... 查看详情

是否有必要在所有组件中导入 vue？ Nuxt 和打字稿

...字稿【英文标题】：isitnecessarytoimportvueinallcomponents?Nuxtandtypescript【发布时间】：2021-11-1723:33:37【问题描述】：目前我已将typescript集成到nuxt，如文档中所示：https://typescript.nuxtjs.org/es/guide/setup/但我有以下疑问：在组件中，您应该... 查看详情

在 vue 组件的 laravel 中导入 json 文件

】在vue组件的laravel中导入json文件【英文标题】：importjsonfileinlaravelinvuecomponent【发布时间】：2018-06-1505:57:08【问题描述】：我正在尝试在我的vue组件中导入一个json文件，但它给出了这个错误错误./~/buble-loader?"objectAssign":"Object.assi... 查看详情

在 Svelte 组件中导入 Typescript 模块

】在Svelte组件中导入Typescript模块【英文标题】：ImportTypescriptmodulesinSvelteComponent【发布时间】：2020-08-0903:49:49【问题描述】：我已经设置了svelte-preprocess，所以我可以成功地做到这一点：<scriptlang="typescript">letsomeConstant:string="s... 查看详情

在 Typescript 文件中导入时找不到 Vue 模块

】在Typescript文件中导入时找不到Vue模块【英文标题】：VuemodulesnotfoundwhenimportinginaTypescriptfile【发布时间】：2018-04-2313:25:57【问题描述】：我有一个使用单文件类组件和打字稿加载器的Vue项目。我使用VSCode和Vetur插件在单个文件.vu... 查看详情

如何在 vue 组件中导入 CSS 文件，范围仅限于组件？

】如何在vue组件中导入CSS文件，范围仅限于组件？【英文标题】：HowtoimportCSSfilesinvuecomponentswithscopelimitedtocomponentsonly?【发布时间】：2019-07-2510:47:27【问题描述】：如何将CSS文件导入到vue组件中，以便这些文件的范围仅限于组件... 查看详情

如何使用对象解构在 TypeScript 中导入 JSON？

】如何使用对象解构在TypeScript中导入JSON？【英文标题】：HowtoimportJSONinTypeScriptwithobjectdestructuring?【发布时间】：2019-07-2108:26:04【问题描述】：在一个Vue项目中，我试图在TypeScript（.vue文件）中导入一个带有对象解构的JSON模块：i... 查看详情

如何在 Vue 单文件组件中导入和使用图片？

】如何在Vue单文件组件中导入和使用图片？【英文标题】：HowtoimportanduseimageinaVuesinglefilecomponent?【发布时间】：2017-12-2008:54:27【问题描述】：我认为这应该很简单，但是我在如何在Vue单文件组件中导入和使用图像时遇到了一些麻... 查看详情

在 Vue.js 单文件组件中导入外部 js 库

】在Vue.js单文件组件中导入外部js库【英文标题】：ImportingexternaljslibraryinVue.jsSingleFileComponent【发布时间】：2017-11-0823:30:15【问题描述】：我在Vue.js中有以下单个文件组件。plasmid标签原本是由angularplasmid.complete.min.js文件呈现的，... 查看详情

在 react-typescript 中导入 html 文件

】在react-typescript中导入html文件【英文标题】：importhtmlfileinreact-typescript【发布时间】：2022-01-1609:42:26【问题描述】：我正在尝试将HTML文件(.html)作为组件导入到reactjs-typescript(.tsx)中但它给了我这个错误：错误-./pages/SM_login/Facebook.... 查看详情

在 vue js 单文件组件中导入 css 时出错

】在vuejs单文件组件中导入css时出错【英文标题】：Errorimportingcssinvuejssinglefilecomponent【发布时间】：2019-05-2618:12:18【问题描述】：我正在尝试在我的vuejs单文件组件的样式标签中导入2个css文件。<style>@import\'../assets/styles/jquery... 查看详情

在 React TypeScript 组件中导入 Javascript

】在ReactTypeScript组件中导入Javascript【英文标题】：ImportingJavascriptinReactTypeScriptcomponent【发布时间】：2021-05-2904:28:16【问题描述】：我正在使用TypeScript开始一个新的React项目，它是一个使用基本JS和HTML完成的旧项目的转换。我正... 查看详情

在 CRA / TypeScript 中导入 mp3 文件

】在CRA/TypeScript中导入mp3文件【英文标题】：importmp3fileinCRA/TypeScript【发布时间】：2020-05-1223:51:57【问题描述】：我有一个内置在CRAv3.2.0中的简单应用程序。我使用默认设置的TypeScript（参见下面的tsconfig.ts）。在/src/sounds/中，我... 查看详情

如何在vue.js项目的main.js文件中导入js类并在所有组件中使用它而不是在每个组件中导入？(代码片段)

我已经编写了一些我想在我的vue.js项目的app.js/main.js文件中导入的JS类，以便我可以在组件中实例化它们。现在我必须在我需要单独的类的所有组件中导入相同的JS类。我已尝试在main.js文件中导入，但组件无法识别它。在main.js文... 查看详情

如何在 Vue 组件中导入外部函数？

...问题。我已将我的新函数（与其他函数）放在一个单独的文件中：exportconstMyFunctions=MyFunction:function(param 查看详情

在 vue 3 中导入组件

】在vue3中导入组件【英文标题】：importingacomponentinvue3【发布时间】：2022-01-0909:22:34【问题描述】：您好，我正在尝试在Vue3中导入一个组件。这是我的组件结构：+src+App.vue+components+Navbar.vue在我的App.vue中我尝试过：<scriptsrc="http... 查看详情

Vuejs 在另一个组件中导入组件

...ev工具中。当我在app.vue中导入table.vue时没有问题。在我的文件下面。提前致谢！//dashboard.vu 查看详情