Laravel, как мне импортировать пакет vuejs, установленный через NPM - PullRequest
Новая
       12

Laravel, как мне импортировать пакет vuejs, установленный через NPM

0 голосов
/ 30 июня 2018

(Отказ от ответственности: я не очень опытный в Vue)

Как правильно импортировать / включать пакет Vuejs в мой проект? Кажется, я не могу импортировать файл Я пытаюсь импортировать этот пакет: https://github.com/sagalbot/vue-select

Что я сделал до сих пор:

Запустил команду: npm install vue-select

Попробовал добавить пакет vue-select к моему Vue, вот так (в resources / assets / js / app.js): 

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

Теперь, когда я использую v-select в своем HTML-файле, в консоли выдается эта ошибка: [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, и он создал файл vue-resource.js в моем каталоге public / js, который я могу импортировать для использования vue-resource. Похоже, что vue-select не создает свой собственный файл vue-select.js.

Если у вас есть предложения, пожалуйста, дайте мне знать.

Я посмотрел на этот вопрос: Импорт пакета vue в laravel , но я не понимаю, к каким путям и файлам следует добавлять строки.

1 Ответ

0 голосов
/ 30 июня 2018

Я думаю, что это просто ваше import заявление. Если вы установили его через npm, вам следует импортировать из vue-select. Также используйте require вместо import, таким образом: 

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

Возможно, вы захотите использовать его только в своем компоненте Vue, тогда вам следует загрузить свой собственный компонент, как описано выше, а в своем собственном компоненте Vue произнесите VueSelect.vue используйте это: 

<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 из коробки, которая компилирует ваши ресурсы с помощью веб-пакета. Все, что вам нужно сделать, это запустить скрипт компиляции: 

npm run dev

Если вы вносите изменения в свои js-файлы, вам не нужно запускать это снова и снова, поэтому вы можете запустить команду watch: 

npm run watch

Если это не сработает, попробуйте watch-poll. Алс, сначала убедитесь, что вы установили все зависимости: 

npm install
...