时间戳

首页 > 解决方案 > 将自制库导入vue项目

javascript - 将自制库导入vue项目

问题描述

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

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

我做了什么：

遵循本教程。

在 dummylib 的package.json中，我插入了：

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

和 build-lib 脚本：

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

问题：

当我尝试从parent-app. 据我了解，ESlint 甚至不应该尝试处理，但它确实会导致约 2000 个错误。npm run serve../dummylib/dist/dummylib.common.jsdummylib.common.js

标签： javascriptvue.jsvuejs2eslintvue-cli

解决方案

不久前我尝试了相同的教程。要修复它：在库的 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 ...
}

推荐阅读