Импорт собственной библиотеки в проект vue - PullRequest
Новая
       58

Импорт собственной библиотеки в проект vue

0 голосов
/ 13 марта 2020

Введение: Я создал два проекта с vue -cli ~ 4.2.0: parent-app и dummylib

Цель: к создать DummyButton.vue компонент в dummylib проекте и импортировать его в parent-app проекте.

Что я сделал:

Следовал этому учебнику .

В пакете dummylib . json Я вставил: 

"main": "./dist/dummylib.common.js",

и скрипт build-lib: 

"build-lib": "vue-cli-service build --target lib --name dummylib src/main.js",

dummylib's main. js: 

import DummyButton from './components/DummyButton.vue'

export default DummyButton

Также я создал DummyButton.vue, и теперь vue serve src/components/DummyButton.vue успешно рендерит компонент DummyButton, а npm run build-lib создает папку dist с dummylib.common.js

В parent-app проекте, который я сделал npm i ../dummylib, и он был добавлен в package.json: 

"dependencies": {
  ...
  "dummylib": "file:../dummylib",
  ...
},

Проблема:

Когда я пытаюсь запустить parent-app с npm run serve, в ../dummylib/dist/dummylib.common.js возникает много ошибок линтинга. Насколько я понимаю, ESlint даже не должен пытаться обрабатывать dummylib.common.js, но это приводит к ошибкам ~ 2000.

1 Ответ

1 голос
/ 13 марта 2020

Я пробовал то же самое руководство некоторое время go. Чтобы это исправить: в основной. js библиотеки, которую я должен был сделать, нужно сделать следующее: 

const Components = {
  DummyButton
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

вместо 

export default DummyButton

Также вы не забыли импортировать lib в приложения для родителей main. js

import DummyLib from "DummyLib";
Vue.use(DummyLib);

Вы также можете импортировать прямо в компонент, например так: 

import DummyLib from "DummyLib";
export default {
  components: {
    ...DummyLib
  },
  //... rest of vue file script ...
}
...