Используйте собственные файлы JS, содержащие классы в компоненте vue

#javascript #vue.js #npm

Вопрос:

у меня есть файл js, содержащий некоторые классы с функциями. и у меня есть компонент vue, в котором мне нравится создавать экземпляр этого класса. (если я скопирую-вставлю файл непосредственно в свой тег, все будет работать нормально

myfile.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.

я пытался, но это не удалось, потому что ему нужен пакет.json.

я создал файл package.json в той же папке, где myfile.js существует

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

но это не удается с Не удалось установить из»…. srcbaujsmyfile.js» так как он не содержит файла package.json.

я перепробовал много разных вариантов, но, похоже, я ищу не в том направлении. было бы здорово, если бы кто — нибудь мог подсказать мне верное направление. заранее спасибо

Ответ №1:

Подробнее о модулях JS читайте здесь

Сначала вам нужно экспортировать свой класс

myFile.js

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

Затем импортируйте

 import { myclass } from "myfile.js"
 

Комментарии:

1. Спасибо за ваш комментарий, с вашей помощью я заставил его работать. Я забыл упомянуть, что я уже пытался экспортировать, но я завернул весь файл js в экспорт по умолчанию { class myclass … } } , теперь я просто написал «экспорт» перед моим основным классом , и все работает нормально. Спасибо за перезагрузку разума. Хорошего дня! ps: ваш ресурс тоже был полезен (и не перегружен).