Question

简介：我已经用vue-cli〜4.2.0生成了两个项目：parent-app和dummylib

目标：在DummyButton.vue项目中创建dummylib组件并将其导入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，现在vue serve src/components/DummyButton.vue成功地渲染了DummyButton组件，并且npm run build-lib用dummylib.common.js生成了 dist 文件夹

在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个错误。

Answer 1

我前段时间尝试了相同的教程。要解决此问题：在该库的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 DummyLib from "DummyLib";
Vue.use(DummyLib);

您也可以像这样直接导入组件：

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

将自制库导入vue项目

1 个答案: