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

Question

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

我发现similar problem 是我的，但我没有找到答案，我也尝试过 require。 我也找了一些solution用ES6，但是我没用ES6，不过我也试过了，不行。

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

import Canvas from './canvas.js';

Canvas.js

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

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

P.s 请不要建议使用组件 bcs im 计划在 Canvas 的设备中存储另一个类实例，并且会有太多无用的组件（imho bcs im noob in vue）

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

我的 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"，则不能使用import，除非您运行像webpack 这样的转译器。 Vue 有一个引导应用程序，可帮助您在此处设置一个利用 webpack 的 Vue 项目：vue-cli。

您的应用程序实际上看起来像这样：

Canvas.js

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

我的酷脚本.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"];
  }
}

我的酷脚本.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>