Laravel如何导入通过NPM安装的vuejs包

Question

（免责声明：我对 Vue 不是很精通）

在我的项目中导入/包含 Vuejs 包的正确方法是什么？我不知何故似乎无法导入文件。 我正在尝试导入这个包：https://github.com/sagalbot/vue-select

到目前为止我做了什么：

运行命令：npm install vue-select

尝试像这样将 vue-select 包添加到我的 Vue 中（在 资源/资产/js/app.js）：

import vSelect from './components/Select.vue'
Vue.component('v-select', vSelect);

现在，当我在我的 HTML 文件中使用 v-select 时，它会在控制台中显示此错误：[Vue warn]: Unknown custom element: <v-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我试图解决的问题：

我没有在 app.js 中使用它，而是在我的 *.vue 文件中使用它，我认为我不使用 webpack/browserify，所以导入不起作用：/ 我不想使用 browserify。

我也有 vue-resource 包，它在我的 public/js 目录中创建了一个 vue-resource.js 文件，我可以导入该文件以使用 vue-resource。 vue-select 似乎没有创建自己的 vue-select.js 文件。

如果您有任何建议，请告诉我。

我看过这个问题：Import vue package in laravel 但我不明白应该将这些行添加到哪些路径和文件。

Answer 1

我认为这是你的import 声明。如果你是通过 npm 安装的，那么你应该从vue-select 导入。另外，使用require 而不是import，这样：

Vue.component('v-select', require('vue-select'));

您可能只想在您的 Vue 组件中使用它，然后您应该按照上面的说明加载您自己的组件，并在您自己的 Vue 组件中说VueSelect.vueuse this：

<template>
    <!-- use it with name 'v-select' in your component -->
    <v-select></v-select>
</template>
<script>
export default {
    ...
    components: { vSelect: require('vue-select') },
    ...
}
</script>

然后就可以将自己的组件注册为全局了，

Vue.component('vue-select', require( './components/VueSelect.vue') );

并在你的根组件中使用它：

<vue-select></vue-select>

更新

如果您使用的是 laravel，它会为您提供开箱即用的 laravel mix，使用 webpack 编译您​​的资产。您需要做的就是运行一个编译脚本：

npm run dev

如果你正在修改你的 js 文件，你不会想一遍又一遍地运行它，所以你可以运行watch 命令：

npm run watch

如果这对您不起作用，请改用watch-poll。另外，请确保您首先安装了所有依赖项：

npm install