我已经在Vue.js项目上工作了几个月了。最初，它只是一个仅位于一个元项目中的项目，但是我们现在正在考虑将其发布到其他平台中。

为了不复制粘贴代码并必须维护它的多个副本，我认为将这个项目打包为一个好东西。显然有很多优点：易于安装，每个人都将从更新中受益，一次修复的错误将为每个人修复，等等。

有一个想法：我以前从未做过Vue.js包。

在第一部分中，我们将编写两个Vue.js应用程序的代码：

包含基本组件的库或软件包一个将使用刚刚创建的库的应用先决条件

我将使用yarn作为包管理器和vue-cli来创建和构建我们的库和应用程序。

如果您的机器上没有 yarn，请参考此进行安装。

完成后，安装vue-cli：

yarn global add @vue/cli

我们将需要一个应用程序来导入我们的库。由于VUE-CLI，它很容易地创建一个：

vue create sampleapp

您应该对要选择哪个预设有疑问。

? Please pick a preset: (Use arrow keys)❯ default (babel, eslint) Manually select features

让我们在这里选择默认值。创建完成后，转到文件夹并运行：

yarn serve

这将启动开发服务器，并且如果您打开浏览器并转到。您应该看到一个基本的Vue.js应用程序

现在我们有了我们的应用程序。

The library

Setup

现在，我们将创建一个库，该库将被导入到上面刚刚创建的应用程序中。库是任何其他Vue.js应用程序。区别在于如何构建。

但是首先创建库：

vue create dummylib

完成后，打开您喜欢的编辑器。是时候编写一点代码了！

打开package.json并查找该scripts节点。您应该会看到以下内容：

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint"},

这些是可用的命令。我们已经使用serve过了。但是还有另外两个：

build 旨在创建该应用的正式版lint 用于检查您的代码是否遵守准则

如前所述，库的构建方式与应用程序不同。默认情况下，“library mode build”不可用。我们需要添加它。这是命令：

vue-cli-service build --target lib --name myLib [entry]

可以在vue-cli 官方文档中找到。

我们将lib重命名为“ dummylib”，“入口点”为src/main.js。将新脚本添加到package.json文件。您可以按自己的意愿命名（此处已决定使用build-lib）。

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build-lib": "vue-cli-service build --target lib --name dummylib src/main.js", "lint": "vue-cli-service lint"},

现在尝试运行，yarn build-lib您应该在屏幕上看到如下所示的内容：

DONE Compiled successfully in 1389ms 10:15:58 AMFile Size Gzippeddist/dummylib.umd.min.js 5.43 KiB 1.98 KiBdist/dummylib.umd.js 19.94 KiB 4.56 KiBdist/dummylib.common.js 19.46 KiB 4.42 KiBdist/dummylib.css 0.33 KiB 0.23 KiBImages and other types of assets omitted.✨ Done in 2.91s.

这意味着构建成功。而且，如果您查看该dist文件夹，则应该会看到很多文件。

现在，我们需要定义将导入包的任何应用程序应使用哪个文件。我们将选择common.js一个。为此，请在package.json文件中添加以下行：

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

创建一个组件

现在我们有了库的设置，是时候创建一个组件了。我们称之为“虚拟按钮”

DummyButton.vue在components文件夹内创建一个新文件。

为了本教程的缘故，我们将创建一个非常简单的组件。这将是一个按钮，显示单击了多少次。

这是DummyButton.vue代码：

<template> <div> <button @click="increment">{{ text }}</button> </div></template><script>export default { data () { return { count: 0 } }, computed: { times () { return this.count > 1 ? 'times' : 'time' }, text () { return `I have been clicked ${this.count} ${this.times}` } }, methods: { increment () { this.count += 1 } }}</script>

这里没有什么太复杂的。vue-cli甚至提供一种查看我们组件运行情况的方法：

vue serve src/components/DummyButton.vue

你应该看到类似

并且每次您单击按钮时，文本都会更新。

最后，为了从另一个应用程序导入我们的库，我们需要告诉它要公开的内容。

打开main.js文件，删除所有内容并复制以下内容：

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

上面的代码非常简单：我们导入刚创建的组件并将其公开。

不要忘记重建库。

现在我们有了我们的图书馆！

在应用程序中导入库

现在，我们有了我们的库和应用程序。大多数时候，您现在必须发布库，然后从npm注册表中导入它。多亏了yarn（现在）不需要做所有的事情。您可以导入本地库。

yarn add ../dummylib

您的应用程序现在将库作为依赖项。如果检查package.json文件，则应在dependencies节点中看到它。

"dependencies": { "core-js": "^2.6.5", "dummylib": "../dummylib", "vue": "^2.6.10"},

好极了！

让我们更新App.vue组件以查看是否一切正常

您的App.vue文件现在应该看起来像这样：

<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default { name: 'app', components: { HelloWorld }}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

您可以删除与该HelloWorld组件相关的所有内容，DummyButton并将其导入并添加到模板中。

您现在应该具有以下内容（我省略了CSS部分）：

<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <dummy-button /> </div></template><script>import DummyButton from 'dummylib'export default { name: 'app', components: { DummyButton }}</script>

现在，让我们看看我们的应用程序是否具有按钮，并检查其是否按预期工作。

yarn serve

看看我们这里有什么！从我们刚创建的库中导入组件的应用程序！

这是第一部分。我们已经设置了基础。一个简单的组件，可以在任何Vue.js应用程序中轻松使用。

如果仅要导出单个文件组件，这实际上就足够了。但就我而言，我拥有依赖Vuex商店的组件。我将在第二部分解释如何处理这种情况

翻译自：