2

我最近将自己的 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>

包：https ://www.npmjs.com/package/vue-toggle-component

4

3 回答 3

3

以下内容涉及一个使用 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赋值。

于 2021-05-31T08:20:51.020 回答
0

我相信我刚刚遇到了同样的问题。

问题是当您的库正在导出 Vue 插件（由声明您的组件的函数组成）时，您正试图'vue-toggle-component'像 Vue 组件一样导入。install

有两种方法可以解决此问题。

解决方案 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 使用起来更加灵活和直观。

于 2022-01-19T02:33:14.737 回答
0

使用组件时，请更换

import VueToggle from 'vue-toggle-component';

和

import VueToggle from 'vue-toggle-component.vue';

或者如果组件用户使用 webpack，他们可以在 config 中指定：

resolve: {
    extensions: ['.vue', '.ts', '.js']
}
于 2021-06-23T16:09:10.237 回答