将自制库导入vue项目

Question

Intro: I've generated two projects with vue-cli ~4.2.0: parent-app and dummylib

Goal: to create DummyButton.vue component in dummylib project and import it in parent-app project.

What I've done:

Followed this tutorial .

In dummylib's package.json I've inserted:

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

and build-lib script:

"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

Also I've created DummyButton.vue and now vue serve src/components/DummyButton.vue successfully renders DummyButton component and npm run build-lib generates dist folder with dummylib.common.js

In parent-app project I've made npm i ../dummylib and it has been added to package.json :

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

Problem:

When I try to start parent-app with npm run serve a lot of linting errors occurs in ../dummylib/dist/dummylib.common.js . As far as i understand, ESlint should not even try to process dummylib.common.js , but it does and it results in ~2000 errors.

Answer 1

I tried the same tutorial a while ago. To fix it: in the main.js of the library I had to do has to do this:

const Components = {
  DummyButton
};

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

export default Components; 

instead of

export default DummyButton

Also did you remember to import the lib into your parents apps main.js

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

You can also import straight into a component like so:

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