자체 만든 라이브러리를 vue 프로젝트로 가져오는 중

자체 만든 라이브러리를 vue 프로젝트로 가져오는 중

인트로: 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의 main.dummy:

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

export default DummyButton

또, 내가 만든 것은DummyButton.vue그리고 지금vue serve src/components/DummyButton.vueDummyButton 컴포넌트를 정상적으로 렌더링하고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개의 오류가 발생합니다.

저도 얼마 전에 같은 튜토리얼을 해봤어요.수정 방법: 라이브러리의 main.js에서 다음 작업을 수행해야 합니다.

const Components = {
  DummyButton
};

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

export default Components; 

대신

export default DummyButton

또한 lib를 부모님 앱 main.js로 Import하는 것도 잊지 않으셨나요?

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

다음과 같은 구성 요소로 직접 가져올 수도 있습니다.

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

언급URL : https://stackoverflow.com/questions/60670539/importing-self-made-library-into-vue-project