在 vue 组件中使用包含类的自己的 JS 文件

Posted 2023-02-22

【中文标题】在 vue 组件中使用包含类的自己的 JS 文件

【英文标题】：Use own JS files containing classes in vue component

【发布时间】：2021-08-11 09:00:41

【问题描述】：

我有一个 js 文件，其中包含一些带有函数的类。 我有一个 vue 组件，我喜欢在其中创建该类的实例。 （如果我将文件直接复制粘贴到我的标签中，一切运行正常

我的文件.js

class myclass
  
  constructor(x)
      this.x=x
    

在我想使用的 vue 组件脚本标签中

<script>
..
mounted()
    let myinstance = new myclass("hi") 
    console.log(myinstance.x) 


..
</script>

-- 从这里我说到目前为止我尝试过的（没有成功），如果你喜欢解决方案，可以跳过--

<script>
import myclass from "myfile.js"

信息失败，我应该先安装 js 文件。

我试过了，但失败了，因为他想要一个 package.json。

我在 myfile.js 所在的同一文件夹中创建了一个 package.json

  "name"        : "myfile",
  "version"     : "0.0.1",
  "main"        : "myfile.js",
  "scripts"     : 
  ,
  "dependencies": 
  

但它失败了 Could not install from "....\src\baujs\myfile.js" 因为它不包含 package.json 文件。

我尝试了许多不同的变体，但似乎我搜索的方向错误。如果有人能引导我朝着正确的方向前进，那就太好了。提前致谢

【参考方案1】：

阅读更多关于 JS 模块的信息here

首先你需要导出你的类

我的文件.js

export class myclass
  
  constructor(x)
      this.x=x
    

然后导入

import  myclass  from "myfile.js"

【讨论】：

感谢您的评论，在您的帮助下，我得到了它的工作。我忘了提到我已经尝试导出，但是我将整个 js 文件包装到 export default class myclass ... 中，现在我只是在我的 mainclass 之前写了“export”，一切正常。感谢您的心灵重启。祝你今天过得愉快！ ps：你的资源也很有帮助（而且没有超载）。