VUE 2.x中全局组件的封装(三)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE 2.x中全局组件的封装(三)相关的知识,希望对你有一定的参考价值。
参考技术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
声明以接受任意命名的导出。以上是关于VUE 2.x中全局组件的封装(三)的主要内容,如果未能解决你的问题,请参考以下文章