导入验证组件给出语法错误

Question

我将电子邮件存储在名为“ emailsDB”的数组中，并尝试检查用户在电子邮件输入字段中输入的电子邮件是否存在于该数组中。

此处提供了我所遵循的确切步骤-https://www.npmjs.com/package/vee-validate

但是，在实现过程中，控制台出现错误-

  

SyntaxError：导入声明只能出现在   模块

HTML代码

<div id="updateName" class="wrapper wrapper-right">
                <div class="wrapper-inner full-height">
                    <!--Contact Sec-->
                    <section>
                        <!--form sec-->
                        <section class="animated container-fluid align-center sec-ptop">
                            <h3 class="salutation">
                                Hey <span v-if='formData.Name.length'>{{formData.Name}}</span> <span v-else>There</span>, happy to hear from you.
                            </h3>
                            <div>
                                <form v-on:submit.prevent="validateBeforeSubmit" name="contactform" method="post" class="row form-horizontal" role="form" novalidate="true">
                                    <div class="form-group input--josh col-6">
                                        <div class="input-wrap">
                                            <input autocomplete="off" type="text" v-model="formData.Name" v-validate="'required'" id="Name" name="Name" placeholder="Name" class="form-control input__field input input__field--josh" :class="{'input': true, 'is-danger': errors.has('Name') }" />
                                            <i v-show="errors.has('Name')" class="fa fa-exclamation"></i>
                                            <label for="Name" class="input__label input__label input__label--josh input__label--josh-color-1 input__label--josh input__label--josh-color-1"></label>
                                        </div>
                                        <span v-show="errors.has('Name')" class="help is-danger">{{ errors.first('Name') }}</span>
                                    </div>
                                    <div class="form-group  input--josh col-6">
                                        <div class="input-wrap">
                                            <input autocomplete="off" type="email" v-model="formData.Email" v-validate="'required|email'" id="Email" name="Email" placeholder="Email" class="form-control input input__field input__field--josh" :class="{'input': true, 'is-danger': errors.has('Email') }">
                                            <i v-show="errors.has('Email')" class="fa fa-exclamation"></i>
                                            <label for="Email" class="input__label input__label--josh input__label--josh-color-1"></label>
                                        </div>
                                        <span v-show="errors.has('Email')" class="help is-danger">{{ errors.first('Email') }}</span>
                                    </div>
                                    <div class="form-group  input--josh col-12">
                                        <div class="input-wrap">
                                            <textarea rows="4" v-model="formData.Message" v-validate="'required'" id="Message" name="Message" placeholder="message" class="form-control input input__field input__field--josh" :class="{'input': true, 'is-danger': errors.has('Message') }"></textarea>
                                            <i v-show="errors.has('Message')" class="fa fa-exclamation"></i>
                                            <label for="Message" class="input__label input__label--josh input__label--josh-color-1"></label>
                                        </div>
                                        <span v-show="errors.has('Message')" class="help is-danger">{{ errors.first('Message') }}</span>
                                    </div>
                                    <div class="form-group col-12">
                                        <div class="align-center">
                                            <button type="submit" class="btn btn-default" data-ng-disabled="submitButtonDisabled">
                                                <span class="mask"></span>
                                                send
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                    </section>
                    <!--/Contact Sec-->
                </div>
            </div>

Vue代码

Vue.use(VeeValidate);
import { ValidationProvider } from 'vee-validate';
Vue.config.productionTip = false;
Vue.component('ValidationProvider', ValidationProvider);
const emailsDB = ["viveks.nair1988@gmail.com"];

var app = new Vue({
    el: '#updateName',
    mounted() {
        const isUnique = value =>
            new Promise(resolve => {
                setTimeout(() => {
                    if (emailsDB.indexOf(value) === -1) {
                        return resolve({
                            valid: true
                        });
                    }
                    return resolve({
                        valid: false,
                        data: {
                            message: `${value} has already reached out to me!`
                        }
                    });
                }, 200);
            });
        Validator.extend("unique", {
            validate: isUnique,
            getMessage: (field, params, data) => data.message
        });
    }
})

工作示例- https://codesandbox.io/s/y3504yr0l1?initialpath=%2F%23%2Fbackend&module=%2Fsrc%2Fcomponents%2FBackend.vue

结果应为的图像：