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

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

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

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

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

先决条件

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

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

完成后，安装vue-cli：

yarn global add @vue/cli

The app

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

vue create sampleapp

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

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

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

yarn serve

这将启动开发服务器，并且如果您打开浏览器并转到http://localhost:8080/。您应该看到一个基本的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 AM
File                        Size                    Gzipped
dist/dummylib.umd.min.js    5.43 KiB                1.98 KiB
dist/dummylib.umd.js        19.94 KiB               4.56 KiB
dist/dummylib.common.js     19.46 KiB               4.42 KiB
dist/dummylib.css           0.33 KiB                0.23 KiB
Images 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商店的组件。我将在第二部分解释如何处理这种情况

翻译自：https://medium.com/@olivierpicault/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751

创建一个Vue.js组件库（第1部分）