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

my 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组件/ DIST / gritcode组件” 不是来自 “gritcode-components / src / components / wizard”，如其中一个答案所示。

然后在你的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的那个。一旦加载此代码，您将遇到的问题是您在Vue实例上添加未绑定到#app div的组件，因此指定用于管理您的#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>

如何在我的laravel5.3项目中添加这个外部vue组件？

2 个答案: