如何在Vue中声明JavaScript类实例？

Question

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

我发现similar problem是我的，但没有为我设置答案，我也尝试过要求。 我还在ES6上找到了一些solution，但我没有使用ES6，但我也尝试过，但无法正常工作。

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

import Canvas from './canvas.js';

Canvas.js

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

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

P.s pls不建议使用打算在Canvas的设备中存储另一个类实例的组件bcs，否则会有太多无用的组件（imho bcs im noob可能会出现这种情况）

UPD：我的问题是“导入”后代码无法编译，我有这个问题。

但是如果我将“导入”添加为注释“ //”，情况就好

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"];
}

我的index.html

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

Answer 1

在浏览器中使用ES模块需要您使用其他机制来加载脚本。本质上，您应该具有一个“入口点”，可以加载该入口点并可以导入需要运行的各种模块。应使用<script type="module" src="whatever.js">定义此入口点，请注意type="module。您可以在这里阅读有关内容：MDN <script>。

如果不使用type="module"，除非运行webpack之类的编译器，否则不能使用import。 Vue有一个引导应用程序，可以帮助您在此处vue-cli上利用Webpack设置Vue项目。

您的应用程序实际上将如下所示：

Canvas.js

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

my-cool-script.js

import Vue from "https://unpkg.com/vuex@3.1.0/dist/vuex.esm.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)
    }
  }
});

index.html

<script src="my-cool-script.js" type="module"></script>
<div id="app"></div>

---

如果不使用type="module"，则如果不进行转译，将无法使用import 。您的项目基本上如下所示：

Canvas.js

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

my-cool-script.js

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

index.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="Canvas.js"></script>
<script src="my-cool-script.js"></script>
<div id="app"></div>

Answer 2

好吧，我找不到在香草Vue中访问画布的任何可能的解决方案（无vue-cli），所以我决定使用webpack。安装所有人员后，一切正常。答案是-只需使用webpack。