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

Posted 2023-02-23

【中文标题】Laravel如何导入通过NPM安装的vuejs包

【英文标题】：Laravel how do I import a vuejs package installed trough NPM

【发布时间】：2018-12-09 09:07:15

【问题描述】：

（免责声明：我对 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 但我不明白应该将这些行添加到哪些路径和文件。

【参考方案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

【讨论】：

感谢您的快速回复，我现在已更改我的 app.js 文件以匹配 'vue-select' 而不是 ./components/Select.vue 并将其添加到我的 *.vue 文件中：` import vSelect from ' vue-select';` 和 components: vSelect 。但是，当我现在运行我的页面时，它会在vSelect from 'vue-select'; 处给出此错误Uncaught SyntaxError: Unexpected identifier

尝试使用require 而不是import。

require vSelect from 'vue-select'; 在我的 *.vue 文件中？这会在 IDE 中出现错误，但刷新页面时仍然出现相同的错误。

我已经更新了我的答案，试试吧，如果你有任何错误，请告诉我。

我必须安装 webpack/browserify 才能工作吗？