javascript - 将自制库导入到vue项目中

Question

简介:我使用 vue-cli ~4.2.0 生成了两个项目:parent-app 和 dummylib

目标:在 dummylib 项目中创建 DummyButton.vue 组件并将其导入到 parent-app 项目中.

我做了什么:

已关注此tutorial .

在 dummylib 的 package.json 中我插入了:

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

和构建库脚本:

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

dummylib 的 main.js:

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

export default DummyButton

我还创建了 DummyButton.vue ，现在 vueserve src/components/DummyButton.vue 成功渲染了 DummyButton 组件，并且 npm run build-lib 使用 dummylib.common.js

生成 dist 文件夹

在 parent-app 项目中，我制作了 npm i ../dummylib 并将其添加到 package.json 中:

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

问题:

当我尝试使用 npm runserve 启动 parent-app 时，../dummylib/dist/dummylib.common 中出现大量 linting 错误。 js。据我了解，ESlint 甚至不应该尝试处理 dummylib.common.js，但它确实这样做了，并且会导致大约 2000 个错误。

Answer 1

我不久前尝试过相同的教程。要修复它:在库的 main.js 中我必须这样做:

const Components = {
  DummyButton
};

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

export default Components; 

而不是

export default DummyButton

您还记得将库导入到您 parent 的应用程序 main.js

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

您还可以直接导入到组件中，如下所示:

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