Как вы интегрируете пакет Vue.js (например, vodal) в Laravel? - PullRequest
Новая
       16

Как вы интегрируете пакет Vue.js (например, vodal) в Laravel?

0 голосов
/ 13 мая 2019

У меня есть пустой проект Laravel, и я пытаюсь установить vodal (https://github.com/chenjiahan/vodal) в него, но безуспешно.

Я знаю основы vue.js, но я все еще начинающий иЯ никогда раньше не использовал пакет Vue.js в своем приложении Laravel.

Примечание. Мне удалось загрузить https://github.com/chenjiahan/vodal и запустить его в качестве автономного приложения. Сложность заключается в его интеграциив новый проект Laravel 5.8.

После запуска: 

npm i -S vodal

Куда этот код попадает в мое приложение laravel? Что должно входить в:

  1. app.js
  2. файл представления blade.php
  3. новый компонент Vue
  4. любое другое местоположение?

Как мне получитьэтот пакет Vodal (или, если на то пошло, любой vue.js) для работы с Laravel? Я боролся часами подряд, и ЛЮБАЯ помощь была бы признательна. 

<vodal :show="show" animation="rotate" @hide="show = false">
    <div>A vue modal with animations.</div>
</vodal>
import Vue from 'vue';
import Vodal from 'vodal';

Vue.component(Vodal.name, Vodal);

export default {
  name: 'app',

  data() {
    return {
      show: false
    }
  }
}
// include animation styles
@import "vodal/common.css";
@import "vodal/rotate.css";

1 Ответ

0 голосов
/ 13 мая 2019

В laravel сначала откройте терминал и установите npm с помощью команды npm install, после этого вы увидите новую папку в вашем проекте с именем node_modules.код всех ваших пакетов находится внутри этой папки.

Теперь просто запустите вашу команду для vodal, например npm i -S vodal

, теперь вы можете просто импортировать этот пакет в ваш app.js файл, как вы это сделали.

Запустите npm run watch для режима разработки, который будет импортировать весь код vodal из папки node_modules в ваш файл app.js, который находится в вашем общедоступном каталоге.

Обновление

Я увидел ваш репозиторий и скачал его и отредактировал некоторые из ваших файлов.ты делал совершенно неправильно.Я предлагаю вам сначала изучить vuejs, а не углубляться в него.

проблема заключалась в том, что вы вызывали его в vue, а не в компоненте vue, поэтому вы даете следующий код. 

export default {
    components: {
        Vodal
    },
    data() {
        return {
            show: false
        }
    }
}

мы делаем это в компоненте vue, а не в vue.в данных мы возвращаем только компонент vue и официальную документацию vodal, они также дают пример использования его в компоненте vue.

, и вы не используете его в компоненте vue, поэтому просто сделали это в vueкак показано ниже 

const app = new Vue({
    el: '#app',
    data:{
        show: false
    }
});

Так что теперь ваш CSS .

так что для включения CSS.я просто импортирую это в файл app.scss, как показано ниже. 

@import "~vodal/common.css";
@import "~vodal/rotate.css";

Теперь последняя часть и ваша самая большая ошибка.почему вы не включаете файл app.js в файл welcome.blade.Весь ваш код написан в файле app.js, и вы не включаете его.поэтому я просто включаю его в файл welcome.blade, как показано ниже 

<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">

, в конце концов, просто запустите npm run watch

, так что теперь для основной части вам нужно show:true для показа модального режима.по умолчанию false, поэтому он не будет отображаться.Я делаю событие клика для шоу, чтобы вы понимали, как все это будет работать.и плохо поделюсь файлами со ссылкой в ​​комментарии.

...