将自制库导入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，现在 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",
  ...
},

问题：

当我尝试使用 npm run serve 启动 parent-app 时，../dummylib/dist/dummylib.common.js 中出现了很多 linting 错误。据我所知，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

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

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

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

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

将自制库导入vue项目

Importing self-made library into vue project

javascript

eslint

vue.js

vuejs2

vue-cli