Question

我对vue.js相当陌生，所以请原谅我这是一个uts问题：-）

该项目是asp.net的核心项目，我们集成了vue.js作为丰富用户体验的一种方式。过去我们使用jQueru / jQueryUI。考虑到工作的简便性，我们改用vue。

我想使用从这里https://www.npmjs.com/package/vue-swatches#install下载的这个漂亮的颜色选择器组件

我在页面中包含了.js和.css文件，并且在脚本中我已经成功添加了其他组件，但该方法不适用于该组件。

<div id="appointmentsvue" class="row">

    <select v-model="selectedCareprovider" v-on:change="onSelectedCareproviderChanged" class="form-control">
        <option v-for="careprovider in careproviders" v-bind:value="careprovider">
            {{careprovider.FullName}}
        </option>
    </select>
    <v-colorpicker v-model="selectedColor"></v-colorpicker>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<link rel="stylesheet" href="/lib/vue-select/vue-select.css" />
<script src="/lib/vue-select/vue-select.js"></script>

<link rel="stylesheet" href="/lib/vue-swatches/vue-swatches.min.css" />
<script src="/lib/vue-swatches/vue-swatches.min.js"></script>

<script>
    let appointmentsvue = new Vue({
        el: '#appointmentsvue',
        components: {
            'v-colorpicker': VueSwatches.VueSwatches // https://saintplay.github.io/vue-swatches/
        },
        data: {
            selectedColor: '#AABBCC',
            careproviders: [],
            selectedCareprovider: {},
        },
        methods: {
            onSelectedCareproviderChanged: function () {
            },
            updateCareprovider: function () {
            },
        }
    });
</script>

加载页面后出现此错误。

[Vue警告]：未知的自定义元素：-您是否已注册组件正确吗？对于递归组件，请确保提供“名称”选项。

有什么建议吗？

Answer 1

我没有找到一个真正的答案，该答案只能将javascript文件添加到html页面并使用这些组件。

我通过介绍有用的资源webpack找到了可行的解决方案：

webpack beginners guide
vuejs and webpack from scratch
webpack and aps.net core

Answer 2

在该组件的git-pages上，我找到了一个解决方案：

https://github.com/saintplay/vue-swatches/issues/37

我也用于其他组件的解决方案。

vue-js / asp.net核心-错误：您是否正确注册了组件？

2 个答案: