如何在vue中声明javascript类实例？

我需要访问vue.js中canvas.js中存储的数据。为此，我必须在vue中创建canvas实例。但我对此有一些问题

我发现答案和我的一样，但答案不适合我，我也试过了。 我也发现了一些ES6，但我不使用ES6，但我也尝试过，不起作用

这是我在Vue.js中键入的内容

import Canvas from './canvas.js';

Canvas.js

export default class Canvas{
contructor(){
    this.devices = ["5", "15"];
}

我想知道为什么第一个解决方案对我没有帮助，因为我的问题非常相似。如果我在Vue.js中用“/”注释导入，则一切正常。也许还有另一种不使用导入的解决方案，但我需要访问存储在画布中的数据

注意：请不要使用组件bcs im planning在Canvas的设备中存储另一个类实例，这样会有太多无用的组件（vue中的imho bcs im noob）

UPD：我的问题是代码在“导入”之后不会编译，我有这个问题

但如果我在注释“/”中加上“import”，情况如下

UPD2：完整的Vue.js文件

//import Canvas from './canvas.js';
  var app1 = new Vue({
     el: '#vue1',
     data: {
        arr2: [8, 7, 6, 5]
     },
     methods: {
        addArr1: function(num){
        this.arr2.push(num)
     }
   }
 });

canvas.js

export default class Canvas{
contructor(){
    this.devices = ["5", "15"];
}

my index.html

<div id="vue1">
    <ul v-for="ar in arr2">
        <li>{{ ar }}</li>
    </ul>
    <button v-on:click="addArr1(15)">CLICK</button>
</div>

{{ar}}

点击

在浏览器中使用ES模块需要使用不同的机制来加载脚本。本质上，您应该有一个“入口点”，可以加载并导入需要运行的各种模块。应使用

定义此入口点，请注意

type=“module

。您可以在此处阅读：

如果不使用

type=“module”

，则除非运行类似于transfiller的.Vue有一个引导应用程序，它帮助您设置了一个利用此处网页的Vue项目：

您的应用程序实际上看起来如下所示：

Canvas.js

导出默认类画布{
承包商（）{
this.devices=[“5”，“15”]；
}
}

my-cool-script.js

从导入Vue”https://unpkg.com/vuex@3.1.0/dist/vuex.esm.js”；
从“/Canvas.js”导入画布；
var app1=新的Vue({
el:“#vue1”，
数据：{
arr2:[8,7,6,5]
},
方法：{
addArr1:函数（num）{
this.arr2.push（num）
}
}
});

index.html

---

如果不使用

type=“module”

，则在不进行传输的情况下，无法使用

import

。您的项目基本上如下所示：

Canvas.js

类画布{
承包商（）{
this.devices=[“5”，“15”]；
}
}

my-cool-script.js

var app1=新的Vue({
el:“#vue1”，
数据：{
arr2:[8,7,6,5]
},
方法：{
addArr1:函数（num）{
this.arr2.push（num）
}
}
});

index.html

您的问题是什么？您如何尝试访问

设备

？因为使用当前代码，您必须首先创建

画布

实例。很抱歉没有澄清问题，我更新了主题“您如何传输代码？”浏览器环境中还不正式支持

导入

。传输我吗ans将使用

import

和

export

的ES6模块（文件）转换为一个

bundle.js

文件。您似乎在使用纯客户端Vue，因此不能像那样使用

import

。您可以做的是在HTML中放入

，然后使用

const Canvas={devices:[“5”，“15”}；

，现在您的Vue脚本应该能够使用画布设备了。我不使用ES，如果它只是为了从“”添加导入Vue；我这样做了，并按照您的说明进行了操作，但仍然没有working@Ordec除非您使用

type=“模块“

，如果不运行类似transpiler的网页包，则无法使用

导入

。您必须在HTML中明确包含这两个脚本，并删除导入。idk为什么，但是任何使用导入的尝试都会导致无法编译itok下面的代码，我想知道如果我添加，我的代码会工作吗？我做到了，它不起作用，或者我必须使用webpack使我的代码起作用（caps bcs就是这个目标）。在我不使用webpack和ES的情况下，是否有可能访问画布？