VUE 2.x中全局组件的封装（三）

Posted 2023-05-04

参考技术A 在 vue 项目中，我们有了初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建我们不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：

这时候，Vue.extend + vm.$mount 组合就派上用场了。

index.vue

跟他同级目录的 index.js

main.js中注入

使用--在test.vue中

来个升级版，写个类似alert的组件
notice.vue

跟notice.vue同级目录的 index.js

main.js中注入

使用--在test.vue中

上面引入定义的组件用了两种方式

等同于

Vue / Typescript，得到模块'“*.vue”'没有导出成员

【中文标题】Vue / Typescript，得到模块\'“*.vue”\'没有导出成员

【英文标题】：Vue / Typescript, got Module '"*.vue"' has no exported memberVue / Typescript，得到模块'“*.vue”'没有导出成员

【发布时间】：2019-10-01 06:35:46

【问题描述】：

我想从.vue文件中导出几个接口和Component。

基本.vue：

<template>
    <div class="app">
        <router-view></router-view>
    </div>
</template>

<script lang="ts">
import  Vue, Component  from "vue-property-decorator";

export interface IBasic 
    name :string;


/**
 * Simplest container
 */
@Component
export class Basic extends Vue 
export default Basic;
</script>

但是当我从另一个 .ts 文件中导入它时，我得到了：

如何才能成功导入接口？

【问题讨论】：

为什么不将IBasic 移动到它自己的文件中，让任何需要的人都可以导入它？

虽然将它们放入单独的文件中是可行的，但我正在寻找将它们与组件放在一起的可能性。特别是当接口在其他地方无用时。

有关于这个问题的消息吗？目前是否只能将所有导出内容收集到一个默认对象？

看起来 vscode + Vetur@0.34.1 已经解决了这个问题。

【参考方案1】：

尝试将interface 移动到另一个 TS 文件中

组件.vue

<template>
    <div class="app">
        <router-view></router-view>
    </div>
</template>
<script lang="ts">
import  Vue, Component  from "vue-property-decorator";
   
/**
 * Simplest container
 */
@Component
export class Basic extends Vue 
export default Basic;
</script>

interfaces.ts

export interface IBasic 
    name :string;

【参考方案2】：

我遇到了同样的问题，并意识到尽管我的 IDE 上没有错误，但仍然抛出错误，所以我只是 重新启动服务器 并且它运行良好......我必须这样做每次我使用 TS 创建导入或导出任何内容时。

【参考方案3】：

在 VS Code 中使用这个插件为我解决了这个问题： https://github.com/HerringtonDarkholme/vue-ts-plugin

这是一个积极维护的分叉。我运行了yarn add -D ts-vue-plugin 并将这些编译器选项添加到我的tsconfig.json：

compilerOptions: 
  "allowSyntheticDefaultImports": true,
  "plugins": [ "name": "ts-vue-plugin" ]

我的代码（故事书 6 文件button.stories.ts）：

import Button,  BUTTON_TYPE  from '@/components/Button.vue';

有了这个，类型导入终于起作用了，我可以跳转到文件（CMD+点击），而不是像以前那样跳转到shims-vue.d.ts。祝你好运！

【参考方案4】：

您可以从导入中删除 。这是一个默认导出，所以你写 import IBasic from "@/../containers/Basic"

【讨论】：

有一个默认导出，但也有一个名为 IBasic 的名称，这可能是我们想要的。

为什么会这样。它不以任何方式回答问题。

【参考方案5】：

您可以尝试使用ktsn/vuetype，而不是为每个组件文件生成自定义声明文件，而不是使用默认的shims-vue.d.ts 声明。

【讨论】：

这似乎是一个与其他答案不同的实际解决方案，但它似乎有点沉重。有没有办法修改默认的shims-vue.d.ts 声明以接受任意命名的导出。