如何在我的laravel5.3項目中添加這個外部vue組件？

Question

我嘗試在我的laravel 5.3項目中添加http://gritcode.github.io/gritcode-components/#/wizard但是當我在我看來，利用其沒有在這裏展示的是我得到控制檯「未捕獲的ReferenceError：gritcode沒有定義」 我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目錄/組件/嚮導」的建議中的一個答案。

然後在Vue的情況下，你可以做這樣的事情來加載組件：

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的元素。你會遇到的，一旦這種代碼加載的問題是，您要添加未綁定到你的#APP DIV在Vue的實例的成分，因此指定用於管理#APP元素Vue的實例將不會有對它們的訪問。因此，我建議只使用上例中的Vue的一個實例，除非您有足夠的理由使用更多

最後，我建議您不要用'vs-toast'包裝'vs-wizard'標記元素，除非你想在你的麪包，顯示嚮導，我不知道是可能的。

你可以做這樣的事情，而不是：

<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>