我尝试使用vue-cli vue create d-components
构建自己的组件库来实现Vuetify。我的组件通过install
函数注册,该函数导出到我的lib的main.ts文件中,例如:
import Vue, { VueConstructor } from 'vue';
import Vuetify from 'vuetify';
import DBtn from "./components/DBtn.vue";
Vue.use(Vuetify)
export default {
install(vue: VueConstructor): void {
vue.component("d-btn", DBtn);
...
}
}
而一个组件定义为:
<template>
<v-btn v-bind="$attrs" v-on="$listeners" elevation="0" small>
...
</v-btn>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({})
export default class DBtn extends Vue {}
</script>
我将这个库作为一个git子模块添加到我的主Vue.js应用程序中(它也使用Vuetify),在子模块的根文件夹中运行npm install
和npm link
,然后在我的主Application文件夹中运行npm link d-components
。
我的应用程序正在通过以下方式导入和调用库的安装函数:
import Vue from 'vue';
import DComponents from "d-components" // library's name
Vue.use(DComponents);
到目前为止一切都很好。
但是当我尝试使用我的库的组件时,我得到了一堆错误:[Vue warn]: $attrs is readonly.
[Vue warn]: $listeners is readonly.
这似乎是因为在我的应用程序中创建了两个Vue示例,我搜索了所有的Vue导入是否都相同,但在我的主应用程序和库中只能找到import Vue from 'vue'
。
有人知道如何检查我是否创建了几个Vue示例吗?
3条答案
按热度按时间dba5bblo1#
是的,原因是重复的Vue示例,我认为应该在您的控制台中有关于这一点的警告。
原因是你的npm链接是在子模块中完成的--它会全局安装子模块包及其所有依赖项,包括Vue。你可以检查全局安装的子模块的node_modules目录,你应该在那里看到Vue。
因此,第一个Vue位于项目的node_modules中,第二个Vue位于组件的node_modules中(全局安装)。
解决方案是从您的项目目录使用npm link../component(不在组件目录中执行npm install)或者为组件执行npm publish并将其作为项目的常规依赖项安装。这不会导致将Vue安装到组件的node_modules目录中。
mbzjlibv2#
在我的例子中,重复的示例是由一些Vue插件导入的Vue示例与我的项目中设置的不同引起的。我设法通过在我的Webpack配置中添加以下内容来修复它:
希望它能帮助任何在同样问题上挣扎的人:)
iswrvxsc3#