Vue.js 无法从vue模板中找到colorpicker函数

我正在尝试将引导颜色选择器插件与vue2一起使用。我阅读了下面的教程，它展示了如何做类似的事情

以下是我的组件代码：

<template>
    <div class="input-group colorpicker-component">
        <input type="text" value="#b8c7ce" class="form-control"/>
        <span class="input-group-addon"><i></i></span>
    </div>
</template>

<script>
    export default {
        mounted: function() {
            $(this.$el).colorpicker()
        },
    }
</script>

但是当我这么做的时候

<color-picker></color-picker>

我在控制台中看到：

[Vue warn]：挂载的挂钩中出现错误：“TypeError:$（…）。colorpicker为 不是一个功能“

---

我并不是在制作一个完整的SPA应用程序，只是在我的应用程序的不同点上使用一些vue2。知道它为什么找不到那个函数吗？

这里有一个简单的工作示例。您的错误消息表明在运行

挂载时没有加载colorpicker代码，或者可能在加载colorpicker代码之前没有加载jQuery


newvue({
el:“#应用程序”，
组成部分：{
颜色选择器：{
模板：“#cp模板”，
安装的（）{
$（this.$el）.colorpicker（）
},
}
}
});

展示如何在项目中包含jquery和插件代码。我像下面的答案一样包含它们，这种方式对我不起作用，我必须像从App.vue中的“bootstrap colorpicker”导入BootstrapColorPicker一样包含它们，才能让它对我起作用，奇怪吧？文档显示您必须在
输入
标记上调用
.colorpicker（）
。您正在根元素上调用它，根元素是
div
。尝试在
输入中调用它
？奇怪，我包含了与您完全相同的文件，但无法使其工作，唯一能使其工作的方法是将bootstra colorpicker包含在我的vue App.vue文件中，就像从“bootstrap colorpicker”导入BootstrapColorPicker一样，然后它工作了
<color-picker></color-picker>