Как импорт должен использоваться в одной странице Vue компонент? - PullRequest
Новая
       8

Как импорт должен использоваться в одной странице Vue компонент?

0 голосов
/ 22 апреля 2020

У меня проблемы с импортом внешнего класса в один файл Vue компонент.

Компонент выглядит следующим образом: 

<style>
</style>
<template>
  <div>
    A page
  </div>
</template>
<script>
import AClass from './js/aclass.js';

// -----------------------------------------
// I have also tried all the below options
// -----------------------------------------

// import default from '/js/aclass.js';
// import * from '/js/aclass.js';
// import '/js/aclass.js';

// import default from '/js/aclass';
// import AClass from '/js/aclass';
// import * from '/js/aclass';

// import { AClass } from '/js/aclass.js';

// const AClass = require('/js/aclass.js');

module.exports = {
    data: function () {
        return {
        }
    },
    mounted: function(){
        // console.log('ACLass', AClass);
    },
    destroyed: function(){
    },
    methods: {
    },
}
</script>

, а файл класса выглядит следующим образом: 

class AClass {
    constructor() {
        return this
    }
}

export AClass

или 

export default class AClass {
    constructor() {
        return this
    }
}

Кажется, что ни один из параметров не работает: все параметры, основанные на import, генерируют ошибку, которая говорит ReferenceError: "responseText is not defined", а параметры, основанные на require, один в котором говорится, что класс не определен (когда строка console.log не закомментирована).

Я прибег к загрузке класса в глобальном window в базовом приложении Vue. js, но все говорят, что это barbari c, и я хотел бы иметь возможность отложить загрузку библиотеки (реальная является более тяжелой и редко используется).

Я проверил различные ответы, такие как это и это и это , но похоже, что простое использование import в компоненте делает вещи go неправильными.

Сам компонент загружается так 

var app = new Vue({
    el: '#app',
    router: (new VueRouter({
        routes: [
            { path: '/view/grid/:md5', component: httpVueLoader('components/view/grid.vue'), name: 'grid_md5' },  
        ] 
    })),
});

Я уверен, что решение должно быть где-то здесь, но примерно через три часа, ударившись головой об это, я брошу себя на милость толпы StackOverflow.

...