vue.js - 个人 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>
解决方案
以下内容涉及一个使用 Vue 3 和 Typescript 的新项目,该项目使用 Quasar CLI (v2 beta) 创建。尽管我收到了 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
赋值。
推荐阅读
- drools - Drools DMN 在节点上找不到所需的依赖项。消息类型:“REQ_NOT_FOUND”
- c++ - 在 while 循环中获取 bad_alloc
- javascript - Node.js Firestore 错误 - 无法编码值
- r - 将数字分成几组中的任何一组 tidyverse r
- javascript - 复选框状态在反应中没有改变
- python - 检查点周围是否有封闭区域
- c - 无法在 arm64(Apple Silicon)上使用 GTK+3 构建 C11 应用程序
- blockchain - ERC721 - tokenURI 中提及的元数据资产的真实性
- mongodb - 从猫鼬聚合管道中的数组数组中获取单个数组
- ruby-on-rails - Rails ActiveStorage/S3 无法在生产环境中工作