具有 vuetify 依赖项的 Vue 库答案

【问题标题】：Vue library with vuetify dependencies具有 vuetify 依赖项的 Vue 库
【发布时间】：2020-07-16 01:40:23
【问题描述】：

我需要制作一个可重用的可打包的 vue 组件并将其上传到 npm 以供我自己在不同的项目中使用。我也在使用 vuetify 作为样式。并且正在使用 vue-cli-service 构建它。

当我使用 npm run serve（使用 vue cli）测试组件时可以工作，但是一旦我将它转译并在其他库中使用它，就无法正常工作。

我需要知道是否有任何方法可以创建具有 vuetify 依赖项的 vue 库。

任何信息都会有所帮助，我使用了 vue-cli-service，因为它似乎是最简单的选择，但我愿意更改为 rollup 或 webpack。

【问题讨论】：

那你在哪部分有问题？
@AlexMA 当我构建它并将其导入其他项目时，它无法正常工作。它已导入但未正确呈现。
也许尝试在代码沙箱中构建一个示例？除非他们从头开始构建应用程序，弄清楚您的库是如何工作的，导入它，然后尝试调试它，否则不确定其他人将如何提供这么多信息。
@AlexMA 你是对的，我只是希望这会在社区中得到很好的定义，就像专业人士每天都在做的事情
你读过这篇文章吗？ vuetifyjs.com/en/getting-started/quick-start/#vue-cli-install - VUE CLI 预设 cli.vuejs.org/guide/plugins-and-presets.html#presets

标签： vue.js npm vue-component vuetify.js

【解决方案1】：

我编写了一个公开可用的 NPM 包，它扩展了 Vuetify (see v-stripe-elements on npm)。我还写了a detailed series of blog posts on how to do it yourself，包括如何设置开发环境、与 TypeScript 搏斗以及发布。也可用：

希望这将启动您的开发过程！我认为单独的项目模板应该可以为您节省不少时间和精力。

【讨论】：

嘿@morphatic 在您的条带组件上，查看源代码，您在哪里指定模板的布局方式，我问的原因是您的卡号，您实现了月份/ year 作为组件的一部分，这意味着您不只是扩展单个文本字段，我还没有在 ts 上投入太多，但我很好奇您的模板在哪里定义组件的结构？
@tmarois v-stripe-card 组件包装了 Stripe 的可自定义卡片元素（文档中应该有指向 Stripe 元素 API 的链接），因此生成了所有被烘焙到组件中的字段在显示时由 Stripe 提供。我主要只是提供 CSS 以确保字段的样式与 Vuetify 兼容，并且可以使用 vue 组件上的道具进行修改。

【解决方案2】：

您的package.json 文件为main 和module 标记指定了同一个文件。我怀疑这里的问题是您在 common.js (CJS) 模块上使用import。它可以在单个项目中工作，因为您是从 components 导入 .vue 文件，而不是从导出的模块中导入，因此您在单个项目中测试了一些非常不同的东西。

module 条目是可选的，但允许您为 main 入口点指定 common.js 模块（即 require() compatible），为 @987654335 指定 ESM 模块（即 import） @入口。

您为两者提供了相同的文件，并且一个通用 (cjs) 模块将无法通过 module 条目导入。

您的dist 文件夹中没有ESM 变体，但您有一个支持两者的UMD 文件。所以它应该与导入兼容，这意味着您可以为package.json文件中的module:字段指定它。

尝试更改：

  "main": "dist/v-number-stepper.common.js",
  "module": "dist/v-number-stepper.common.js",

收件人：

  "main": "dist/v-number-stepper.common.js",
  "module": "dist/v-number-stepper.umd.js",

要为导入生成一个实际的 ESM 模块，请参阅 this page，这确实是 Vue 的标准流程圣经。但这是一个不同的过程，需要汇总。

您需要发布并再次获取它（除非您首先使用库中的npm link 和主项目中的npm link v-number-stepper 测试所有这些，正如我在其他答案中所建议的那样）。

有关 CJS 和 ESM 的 package.json 字段的信息，请参阅 this page，有关 CJS 和 UMD 的信息，请参阅 this page。也可以通过this page 获取有关npm link 的信息，如果您经常这样做，这将节省时间。

【讨论】：

另外，您可以只复制您的 v-number-stepper 文件夹以用作测试主线项目，但如果这样做，您需要从组件下删除该组件的 .vue 文件，删除wrapper.js文件，将组件的App.vue导入改成使用你外部模块的那个，即：import NumberStepper from "v-number-stepper";
实际上我只是尝试在主程序中遇到与模块相关的构建错误。您可能需要一个实际的 ESM 模块来使用导入。如果可能的话，我不知道如何使用 vue-cli-service 做到这一点。我知道其他人已经成功使用 rollup 来生成 ESM 库，因为它直接通过其“--format es”选项支持它。请参阅vuejs.org/v2/cookbook/… 了解更多信息。

【解决方案3】：

如果您将 package.json 的所有代码复制到另一个 Vue 项目中，您可以使用 npm install，CLI 将自动下载您的所有依赖项。

【讨论】：

这不是真的。 Vue CLI 不会使用该命令自动下载依赖项。必须使用 npm install 显式安装默认依赖项以外的依赖项。
@tony19 写的时候我不知道我的头在哪里！哎呀！我写错了。谢谢

【解决方案4】：

我认为拥有一个具有 Vuetify 依赖项的外部包没有问题，只要将这些部分放在一起时，您不会加载多个 Vue 实例。这样做会导致this Vuetify Issue 中的问题（直接链接到关键答案评论，但另请参阅顶部的问题，我询问过）。

在加载 Vue 时避免多个实例的主要方法是使用：

import Vue from 'vue'

在导入包中没有路径，没有特定的文件名（如 Common JS 或 ESM 版本，并避免有编译器的 Vue 运行时与没有编译器的 Vue 运行时发生冲突）。

然后，如果您将其导入为 'vue'，那么您可以定义您在 webpack 配置中获得的文件（如上面的那个问题），或者如果您使用类似 rollup 的东西，也可以类似地定义。

看起来这就是您在 codepens 的两个 main.js 文件中加载它的方式。

另外，你并没有真正问过这个问题，但你不需要在 NPM 上发布你的依赖库，如果你有两个本地 git repos。您可以在库项目中使用npm link，然后在主项目中使用npm link (name)，这将有效地添加库，就像您刚刚从 NPM 正常添加一样。有关详细信息，请参阅npm link 命令文档。

【讨论】：

我遇到的问题是，当我加载作为转译结果的 js 文件时，它不起作用。
这听起来与在项目外部使用库包的问题没有任何关系。但是如果没有错误或视觉症状，很难用“它不起作用”来判断。
我建议你尝试将主线代码复制到一个新项目中，然后将库包代码直接复制到其中（例如复制所有组件等）并尝试直接使用它，看看是否有问题与它是图书馆或其他东西有关。一定要检查控制台是否有错误，而不是它只是不工作。在浏览器调试器中设置断点，找出问题所在。
我已经做到了，如果我将 .vue 文件复制到其他项目中，该库可以正常工作

项目代码沙箱：

代码沙箱测试转译库

存储库：