将自制库导入vue项目

Posted 2023-02-22

【中文标题】将自制库导入vue项目

【英文标题】：Importing self-made library into vue project

【发布时间】：2020-06-25 11:22:37

【问题描述】：

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

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

我做了什么：

关注了这个tutorial。

在 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 使用dummylib.common.js 生成dist 文件夹

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

【参考方案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 ...

【讨论】：

感谢您的回复！我忘了在parent-app 的main.js 中添加Vue.use(dummylib) 。不过，不确定您在图书馆的main.js 和Object.keys().forEach() 中的解决方案......它有什么好处？如果我只是导入和导出组件，一切都可以正常工作，而且我的 dummylib.common.js 尺寸会变小。

Object.keys().forEach() 被使用，因为我们有大量的组件要导出，这对我们来说是最简单的方法