導入一個 vue.js 組件

Question

我正在嘗試將Vuelidate插件庫導入我的newsletter.vue.js組件。

但是這個導入返回一個錯誤： Uncaught SyntaxError: Unexpected identifier

如何將其導入到我的 vue.js 組件中？

首先，我正在使用 webpack 並首先調用 Vuelidate ：

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');


window.Vue = require('vue');

import BootstrapVue from 'bootstrap-vue'
import Vuelidate from 'vuelidate'

Vue.use(BootstrapVue)
Vue.use(Vuelidate)

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

//Vue.component('example-component', require('./components/ExampleComponent.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue({
});

window.onload = function(){
    app.$mount('#app');
}

然后我看到我必須將 'vuelidate/lib/validators' 導入到組件中才能使用它。

像這個例子。

問題是我無法在我的組件 vue 中進行導入，它總是給我錯誤。

這是我的組件的代碼：

import validators from 'vuelidate/lib/validators';//this return me error

Vue.component('newsletter', {

    template :  '<div>\
      <b-form @submit="onSubmit">\
        \
          \
        <b-form-group id="exampleInputGroup2" label="Food" label-for="exampleInput2">\
          <b-form-select\
            id="exampleInput2"\
            :options="foods"\
            :state="$v.form.food.$dirty ? !$v.name.$error : null"\
            v-model="form.food"\
          />\
  \
          <b-form-invalid-feedback id="input2LiveFeedback">\
            This is a required field\
          </b-form-invalid-feedback>\
        </b-form-group>\
  \
        <b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>\
      </b-form>\
    </div>',

    props : ['route_post'],

    data: function()
    {
        return {
            foods: ['apple', 'orange'],
            form: {}
          }
    },  

    validations: {
      form: {
        name: {
          required: validators.required,
          minLength: validators.minLength(3)
        }
      }
    },

});

Answer 1

您得到的錯誤是由於沒有正確導入您想要使用的內容。 有幾種方法可以導入這個庫。

全局導入和使用：

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

或者，將 mixin 直接導入到組件中：

import { validationMixin } from 'vuelidate'

var Component = Vue.extend({
  mixins: [validationMixin],
  validations: { ... }
})

或者

import { required, maxLength } from 'vuelidate/lib/validators'

或者單獨導入它們以減少導入大小：

import required from 'vuelidate/lib/validators/required'
import maxLength from 'vuelidate/lib/validators/maxLength'

您還可以使用require ：

const { required, minLength } = require('vuelidate/lib/validators')

對於你的使用情況， validators不存在'vuelidate/lib/validators' ，因為它不是一個屬性/成員。

更新：根據您提供的 Bootstrap 示例鏈接，可能是 vuelidate 的舊版本。

Vuelidate 不提供默認導出，因此import validators from 'vuelidate/lib/validators'這種導入樣式import validators from 'vuelidate/lib/validators'不起作用。 另一方面，使用命名導入效果很好。

Answer 2

您首先必須像這樣將它添加到您的應用程序中：

import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

然后，您可以通過解構來使用它，如下所示：

import { validators } from 'vuelidate'

Answer 3

ES6

使用命名導入並按如下方式更改驗證部分：

import { validators, minLength } from 'vuelidate/lib/validators';

Vue.component('newsletter', {

    template :  `<div>
      <b-form @submit="onSubmit">
        <b-form-group id="exampleInputGroup2" label="Food" label-for="exampleInput2">
          <b-form-select
            id="exampleInput2"
            :options="foods"
            :state="$v.form.food.$dirty ? !$v.name.$error : null"
            v-model="form.food"
          />
          <b-form-invalid-feedback id="input2LiveFeedback">
            This is a required field
          </b-form-invalid-feedback>
        </b-form-group>
        <b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Submit</b-button>
      </b-form>
    </div>`,

    props : ['route_post'],

    data: function()
    {
        return {
            foods: ['apple', 'orange'],
            form: {}
          }
    },  

    validations: {
      form: {
        name: {
          required,
          minLength: minLength(3)
        }
      }
    },

});

Answer 4

首先，如果您已經安裝了vuelidate ，請檢查您的 node_modules：

npm install vuelidate --save

驗證器沒有默認導出，您需要使用解構來分別導入每個驗證：

import { required, minLength } from 'vuelidate/lib/validators'; 

Vue.component('newsletter', {

... 
validations: {
name: {
  required,
  minLength: minLength(3)
},

Answer 5

你在使用 vscode 和 vetur 嗎？ 不確定我們是否遇到了同樣的問題。 但是我如何解決我的問題是在我的根項目文件夾中添加一個 jsconfig.json 文件並將此代碼放入其中。

 {
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
 }

我認為導入問題是由於 vscode 和智能感知。 與 vuelidate 沒有任何關系。

創建 jsconfig 並保存后...重新啟動 vscode。