将自制库导入vue项目

问题描述

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

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

目标：创建 DummyButton.vue dummylib 项目中的组件，并将其导入 parent-app 项目中。

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

我所做的事情：

按照此。

在我已经插入了dummylib的 package.json ：

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

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

和build-lib脚本：

and build-lib script:

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

dummylib的main.js：

dummylib's main.js:

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

export default DummyButton

我还创建了 DummyButton.vue ，现在 vue服务src / components / DummyButton.vue 成功渲染了DummyButton组件，并且 npm运行build-lib 生成了 dist 文件夹，其中 dummylib.common.js

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

在 parent-app 项目中，我 npm i ../ dummylib ，它已添加到 package.json ：

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

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

问题：

当我尝试使用 npm run serve 启动 parent-app 错误的错误发生在 ../ dummylib / dist / dummylib.common.js 中。据我了解，ESlint甚至不应该尝试处理 dummylib.common.js ，但确实会导致大约2000错误。

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.

推荐答案

我前一阵子尝试了相同的教程。要解决它：在库的main.js中，我必须这样做：

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; 

而不是

export default DummyButton

您还记得将lib导入到您的父母应用程序中吗.js

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 ...
}

这篇关于将自制库导入vue项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！