laravel vue 导入插件 [vue-chat-scroll]

Question

我对 Vue.js 比较陌生，现在我想在我的 Laravel 应用程序中安装这个插件 vue-chat-scroll，但它抛出了这个错误：

[Vue warn]: Failed to resolve directive: chat-scroll

(found in [ChatLog])

我运行npm install --save vue-chat-scroll成功了。
我的 package.json 有插件的实体：

"dependencies": {    
    "laravel-echo": "^1.3.0",
    "pusher-js": "^4.1.0",
    "vue-chat-scroll": "^1.1.1"
}

在 bootstrap.js 中，我按照自述文件中的描述添加了 2 行。

window.Vue = require('vue');

import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll);


window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.Laravel.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

在我的 ChatLog.vue 中，我添加了 v-chat-scroll 指令。

<template lang="html">
<div class="chat-log" v-chat-scroll>
    <chat-message v-for="message in messages" :message="message"></chat-message>
</div>
</template>

<script >
export default{
    props: ['messages']

}
</script>

我错过了什么？

Answer 1

使用单个文件组件时，您必须在组件本身内部定义要求。

试试这个：

<script >
import Vue from 'vue'
import VueChatScroll from 'vue-chat-scroll'
Vue.use(VueChatScroll)

export default{
    props: ['messages']
}
</script>

这很烦人，但值得庆幸的是 webpack 会优化双重要求，或者如果这是你唯一需要它的地方，你可以从 bootstrap.js

中删除它

laravel vue 导入插件 [vue-chat-scroll]

laravel vue import plugins [vue-chat-scroll]

plugins

vue.js

laravel-5.4

vue-directives