Question

我对Vue.js相对较新，现在我想在我的Laravel应用程序中安装此插件vue-chat-scroll，但它会抛出此错误：

[Vue警告]：无法解析指令：chat-scroll

（在[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 import plugins [vue-chat-scroll]

1 个答案: