使用VueJS

Question

我通过npm安装了Vue并希望使用它。现在当我加载页面时出现错误：

  

未捕获的SyntaxError：main.js中的意外令牌导入：1

当我在我的HTML代码中添加vue CDN链接时，它有效，但现在我通过NPM安装了我收到此错误。

更新 我觉得很奇怪它根本不适用于任何导入。甚至我的自定义组件。一旦我使用import语句，我就会收到此错误。

Vue文件：

import Vue from 'vue';
import axios from 'axios';
import Form from './core/Form';

window.Vue = Vue;
window.axios = axios;
window.Form = Form;

window.Event = new class {
    constructor() {
        this.vue = new Vue();
    }

    fire(event, data = null) {
         this.vue.$emit(event, data);
    }

    listen(event, callback) {
        this.vue.$on(event, callback);
    }
};

Vue.component('panel', {
    template: `
            <div :class="panelType">
                <div class="panel-heading">
                    <slot name="header"></slot>
                </div>
                <div class="panel-body">
                    <slot></slot>
                 </div>
            </div>
`,
    props: {
        name: { required: true }
    },

    computed: {
        panelType: function() {
            switch(this.name) {
                case 'default': return 'panel panel-default';
                case 'primary': return 'panel panel-primary';
            }
        }
    }
});

Vue.component('tabs', {
    template: `
                    <div>
                        <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li v-for="tab in tabs" :class="{'tab-pane active': tab.isActive }">
                                <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <slot></slot>
                        </div>
                    </div>
`,
    data() {
        return { tabs: [] };
    },

    created() {
        this.tabs = this.$children;
    },

    methods: {
        selectTab(selectedTab) {
            this.tabs.forEach(tab => {
                tab.isActive = (tab.name == selectedTab.name);
            })
        }
    }
});

Vue.component('tab', {
   template: `
        <div v-show="isActive"><slot></slot></div>
`,
    props: {
        name: { required: true },
        selected: { default: false }
    },

    data() {
       return {
           isActive: false
       }
    },

    mounted() {
       this.isActive = this.selected;
    }
});

var app = new Vue({
    el: '#app',

    components: {
        Example
    },

    data: {
        form: new Form({
            incidentReference: '',
            streetName: '',
            latitude: '',
            longitude: '',
            featureTypeId: 1,
            archived: 0,
        }),
        incidents: []
    },

    computed: {
        href() {
            return '#' + this.name.toLowerCase().replace(/ /g, '-');
        }
    },

    mounted: function () {
        this.getIncidents();
    },

    methods: {
        onSubmit() {
            this.form.post('/api/v1/incidents');
        },

        getIncidents: function() {
            console.log('getIncidents');
            var self = this;
            axios.get('/api/v1/incidents').then(function(response) {
                // set data on vm
                console.log(response.data);
                var incidentsReceived = response.data.data.map(function (incident) {
                    return incident;
                });
                Vue.set(self, 'incidents', incidentsReceived);
            });
        }
    }
});

Answer 1

是因为您使用window.vue = vue; 而不是 window.Vue = vue;

OR

window.Vue = require('vue');