Как добавить этот внешний компонент vue в мой проект laravel5.3?

Question

Я пытаюсь добавить http://gritcode.github.io/gritcode-components/#/wizard в мой проект laravel 5.3, но когда я использовал его ничто, показывающее на мой взгляд, вот я получаю консоль «Uncaught ReferenceError: gritcode не определен» my app.js есть.

require('./bootstrap'); 
Vue.component('example', require('./components/Example.vue')); 
new Vue({ components: { 'vs-toast': gritcode-components.toast }}) 

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

и мой welcome.blade.php

<div id="app"> 

    <vs-toast> 

     <vs-wizard :current-index.sync="currentStep"> 
     <vs-wizard-step 
     title="Personal Information" 
     description="Enter your details" 
     :progress="progress.step1" 
     icon="person"> 
     </vs-wizard-step> 
     <vs-wizard-step 
     title="Payment" 
     description="Pay with credit card or Paypal" 
     :progress="progress.step2" 
     icon="credit-card"> 
     </vs-wizard-step> 
     <vs-wizard-step 
     title="Confirmation" 
     description="Your order details" 
     :progress="progress.step3" 
     :disable-previous="true" 
     icon="check"> 
     </vs-wizard-step> 
    </vs-wizard> 

    </vs-toast> 

</div> 

мой package.json

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
    }, 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.21.0", 
    "babel-loader": "^6.2.10", 
    "babel-preset-es2015": "^6.18.0", 
    "bootstrap-sass": "^3.3.7", 
    "gritcode-components": "^0.4.7", 
    "gulp": "^3.9.1", 
    "jquery": "^3.1.0", 
    "laravel-elixir": "^6.0.0-9", 
    "laravel-elixir-vue-2": "^0.2.0", 
    "laravel-elixir-webpack-official": "^1.0.2", 
    "lodash": "^4.16.2", 
    "vue": "^2.0.1", 
    "vue-resource": "^1.0.3", 
    "vuestrap-base-components": "^0.8.10", 
    "webpack": "^1.14.0" 
    }, 
    "dependencies": { 
    "vue-material-datepicker": "^2.0.1" 
    } 
    } 

мои gulpfile.js

const elixir = require('laravel-elixir'); 

     require('laravel-elixir-vue-2'); 



    elixir(mix => { 
     mix.sass('app.scss') 
     .webpack('app.js'); 
      }); 

Answer 1

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

Приведенный на их сайте пример для компонента toast, который имеет экспорт по умолчанию, однако, поскольку wizard состоит из двух компонентов, он использует именованный экспорт вместо этого, поэтому синтаксис для их импорта несколько отличается.

Импорт default экспорт

import foo from "someComponent" 

Импорт named экспорта

import {bar, baz} from "SomeOtherComponent" 

Таким образом, для вашей ситуации, вы должны быть в состоянии сделать:

require('./bootstrap'); 

import {wizard, wizardStep} from "gritcode-components/src/components/wizard"; 

const app = new Vue({ 
    el: '#app', 
    components: { 
     'vs-wizard': wizard, 
     'vs-wizard-step': wizardStep 
    } 
}); 

Надеюсь, это поможет!

Answer 2

У меня была аналогичная проблема, и это сработало для меня.

import { wizard as vsWizard } from 'gritcode-components/dist/gritcode-components'; 
import { wizardStep as vsWizardStep } from 'gritcode-components/dist/gritcode-components'; 
import { toast as vsToast } from 'gritcode-components/dist/gritcode-components'; 

Обратите внимание, что мы загружаем это от "gritcode-компоненты/расстояние/gritcode-компоненты" не из "gritcode-компоненты/SRC/компоненты/мастера" как предложено в одном из ответы.

то в вашем Вью, например, вы можете сделать что-то вроде этого, чтобы загрузить компоненты:

require('./bootstrap'); 

const app = new Vue({ 
    el: '#app', 
    components: { 
     vsWizard, 
     vsWizardStep, 
     vsToast 
    }, 
    data: { 
     currentStep: 0 
    }, 
    computed: { 
     progress: function() { 
      return { 
       step1: this.getStepPercentage(1), 
       step2: this.getStepPercentage(2), 
       step3: this.getStepPercentage(3) 
      }; 
     } 
    }, 
    methods: { 
     getStepPercentage: function(stepNumber) { 

       if (stepNumber == 1) { 
        //depending on your requirements you will return 
        //a value between 0 and 100 that describe 
        //the completion status of the step 1 
       } 

       if (stepNumber == 2) { 
        //depending on your requirements you will return 
        //a value between 0 and 100 that describes 
        //the completion status of the step 2 
       } 

       if (stepNumber == 3) { 
        //depending on your requirements you will return 
        //a value between 0 and 100 that describes the 
        //completion status of the step 3 
       } 

     } 
    } 
}); 

Также в вашем вопросе, у вас есть два Vue экземпляра: один для которых вы загружаете компоненты, а еще одну грань к элементу с id #app. Тот, у кого есть элемент #app, будет управлять вашим html из файла клика. Проблема, с которой вы столкнетесь, после загрузки этого кода заключается в том, что вы добавляете компоненты в экземпляр Vue, которые не привязаны к вашему элементу #app, и поэтому экземпляр Vue, предназначенный для управления вашим элементом #app, не будет иметь к ним доступа , Поэтому я предлагаю использовать только один экземпляр Vue, как в приведенном выше примере, если у вас нет веских причин использовать больше

Наконец, я бы посоветовал вам не обертывать элемент тега 'vs-wizard' 'vs-toast' если вы не пытаетесь отобразить мастера в своем тосте, что я не уверен, что это возможно.

Вы можете сделать что-то вроде этого, вместо:

<div id="app"> 

    <vs-toast></vs-toast> 

    <vs-wizard :current-index.sync="currentStep"> 
     <vs-wizard-step 
     title="Personal Information" 
     description="Enter your details" 
     :progress="progress.step1" 
     icon="person"> 
     </vs-wizard-step> 
     <vs-wizard-step 
     title="Payment" 
     description="Pay with credit card or Paypal" 
     :progress="progress.step2" 
     icon="credit-card"> 
     </vs-wizard-step> 
     <vs-wizard-step 
     title="Confirmation" 
     description="Your order details" 
     :progress="progress.step3" 
     :disable-previous="true" 
     icon="check"> 
     </vs-wizard-step> 
    </vs-wizard> 
</div>