Personal Vue 3组件包缺少模板或渲染函数
我最近将我自己的Vue 3组件上传到了NPM，以便于其他人使用。当在其他项目中使用它时，它会给出以下警告：
[Vue warn]: Component is missing template or render function.
at <VueToggle id="1" title="Toggle me" >
at <App>发生这种情况的原因可能是什么？我构建和发布应用程序的方式是通过运行以下代码。
import VueToggle from "./components/VueToggle";
export default {
install(app) {
app.component("vue-toggle", VueToggle);
}
};然后在我的package.json中运行这个构建命令：
"build-library": "vue-cli-service build --target lib --name vue-toggle-component ./src/install.js",如何在不同的项目中使用组件：
<template>
<VueToggle id="1" title="Toggle me"/>
</template>
<script>
import VueToggle from 'vue-toggle-component';
export default {
name: 'App',
components: {
VueToggle,
}
}
</script>组件本身：
<template>
<section class="wrapper" :class="{dark: darkTheme}" :title="title">
<input
:id="id"
:name="name"
v-model="toggleState"
class="toggle"
type="checkbox"
@click="toggleState = !toggleState"
/>
<label :for="id" class="toggler" :style="[toggleState && {'background': activeColor}]"/>
<span class="title" v-text="title" @click="toggleState = !toggleState"/>
</section>
</template>
<script>
export default {
name: 'VueToggle',
props: {
activeColor: {type: String, default: '#9FD6AE'},
darkTheme: {type: Boolean, default: false},
id: {type: String, required: true},
name: {type: [String, Boolean], default: false},
title: {type: String, required: true},
toggled: {type: Boolean, default: false},
},
data() {
return {
toggleState: this.toggled
}
},
}
</script>回答 3
Stack Overflow用户
发布于 2021-05-31 16:20:51
下面是一个使用Vue 3的新项目&使用Quasar CLI (v2测试版)创建的Typescript。尽管我收到了OP报告的相同错误，但我的源代码布局可能不同，因为我没有使用单文件组件。
Vue警告:组件缺少模板或呈现函数。
我通过将vue文件指定为组件源解决了上述问题。我通常将组件拆分为单独的vue和ts文件。
相关片段：
MyComponent: require("./components/My.vue").default在上下文中：
export default defineComponent({
name: "App",
components: {
MyComponent: require("./components/My.vue").default
},
setup() {
...为了让linters安静下来，我有以下es-lint注释
export default defineComponent({
name: "App",
components: {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-var-requires
MyComponent: require("./components/My.vue").default
},理想情况下，应该使用import语句而不是内联require赋值。
Stack Overflow用户
发布于 2021-06-24 00:09:10
使用组件时，请替换
import VueToggle from 'vue-toggle-component';使用
import VueToggle from 'vue-toggle-component.vue';或者如果组件用户使用的是webpack，可以在config中指定：
resolve: {
extensions: ['.vue', '.ts', '.js']
}Stack Overflow用户
发布于 2022-01-19 02:33:15
我想我刚刚遇到了同样的问题。
问题是，当您的库导出一个Vue插件(由声明您的组件的install函数组成)时，您试图像导入Vue组件一样导入'vue-toggle-component'。
有两种方法可以解决这个问题。
解决方案1
完全删除组件导入。
// component.vue (separate project)
<template>
<VueToggle id="1" title="Toggle me"/>
</template>
<script>
export default {
name: 'App'
}
</script>然后在单独项目的index.js中导入您的库插件和样式。您应该使用Vue.use()激活该插件。
// index.js (separate project)
import { createApp } from "vue";
import App from './App.vue';
import VueToggleComponent from 'vue-toggle-component';
import '@vue-toggle-component/dist/style.css';
const app = createApp(App);
app.mount('#app');
app.use(VueToggleComponent);您的组件现在应该在默认情况下导入到项目中，并且可以从任何地方使用。
解决方案2
为每个组件添加匿名导出，以便单独导入。
// install.js
import VueToggle from "./components/VueToggle";
export default {
install(app) {
app.component("vue-toggle", VueToggle);
}
};
export { default as VueToggle } from "./components/VueToggle";然后将该组件作为非默认导出导入到您的单独项目中。
// component.vue (separate project)
<template>
<VueToggle id="1" title="Toggle me"/>
</template>
<script>
import { VueToggle } from 'vue-toggle-component';
export default {
name: 'App',
components: {
VueToggle,
}
}
</script>最后，安装库的样式。
// index.js (separate project)
import { createApp } from "vue";
import App from './App.vue';
import '@vue-toggle-component/dist/style.css';
const app = createApp(App);
app.mount('#app');结论
就我个人而言，我认为解决方案#2使用起来更灵活、更直观。
https://stackoverflow.com/questions/67280488
复制相似问题
腾讯云开发者
