如何创建和发布 Vue 组件库首先，需要`vue-sfc-rollup`全局安装： `npm install -g vu

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

前提

首先，需要vue-sfc-rollup全局安装：

npm install -g vue-sfc-rollup

全局安装后，从命令行进入项目所在的目录。进入该文件夹后，运行以下命令来初始化项目。

sfc-init

在提示中选择以下选项：

Is this a single component or a library? Library
What is the npm name of your library? (this will need to be unique on npm. I used brian-component-lib)
Will this library be written in JavaScript or TypeScript? JavaScript (feel free to use TypeScript if you know what you're doing)
Enter a location to save the library files: This is the folder name you want your library to have. It will default to the npm name you gave it above so you can just hit enter.

开始

设置完成后，导航到你的文件夹并运行 npm install。

cd path/to/my-component-or-lib

npm install

如上所述，有一个为我们构建的示例 Vue 组件。你可以在/src/lib-components文件夹中找到它。要查看此组件的外观，你可以运行npm run serve并导航到http://localhost:8080/

现在让我们添加我们自己的自定义组件。在文件夹中创建一个新的 Vue 文件lib-components。我将其命名FccButton.vue 屏幕截图 2020-07-22-at-10.08.05-AM

这是我们将构建的按钮组件

你可以将此代码复制并粘贴到你的文件中：

<template>
  <button class="btn-cta">{{ text }}</button>
</template>

<script>
export default {
  name: "FccButton", // vue component name
  props: {
    text: {
      type: String,
      default: "Enter Button Text Here"
    }
  },
  data() {}
};
</script>

<style>
.btn-cta {
  background-color: #d0d0d5;
  border-width: 3px;
  border-color: #1b1b32;
  border-radius: 0;
  border-style: solid;
  color: #1b1b32;
  display: block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
}

.btn-cta:active:hover,
.btn-cta:focus,
.btn-cta:hover {
  background-color: #1b1b32;
  border-width: 3px;
  border-color: #000;
  background-image: none;
  color: #f5f6f7;
}
</style>

src/lib-components/FccButton.vue

你可以看到我们在顶部有基本模板部分以及我们希望它拥有的类。它还使用用户将传入的文本。

在脚本标签中，我们有组件名称和组件将接收的道具。在这种情况下，只有一个名为text“运行测试”的默认道具被调用。

我们还设计了一些样式，使其具有我们想要的外观。

要查看组件的外观，我们需要将其添加到index.js文件lib-components夹中的文件中。您的 index.js 文件应如下所示：

/* eslint-disable import/prefer-default-export */
export { default as FccButton } from './FccButton';

src/lib-components/index.js

您还需要将组件导入到serve.vue文件夹内的dev文件中，如下所示：、

<script>
import Vue from "vue";
import { FccButton } from "@/entry";

export default Vue.extend({
  name: "ServeDev",
  components: {
    FccButton
  }
});
</script>

<template>
  <div id="app">
    <FccButton />
  </div>
</template>

/dev/serve.vue

你可能需要npm run serve再次运行才能看到该按钮，但是当你在浏览器中导航到http://localhost:8080/时，它应该可见。

NPM发布

现在我们已准备好将库发布到 NPM，我们需要完成构建过程，以便将其打包。

在我们运行 build 命令之前，我建议将package.json文件中的版本号更改为，0.0.1因为这是我们库的第一个发布事件。在我们发布官方“第一个”版本之前，我们需要的不仅仅是库中的一个组件。您可以在此处阅读有关语义版本控制的更多信息。

为此，我们运行npm run build.

运行此命令后，我们已准备好发布到 NPM。在我们这样做之前，请确保您在 NPM 上有一个帐户（如果需要，您可以在此处进行操作）。

接下来，我们需要通过运行将您的帐户添加到您的终端：

npm adduser

了解 package.json

当我们发布到 npm 时，我们使用 package.json 文件来控制发布哪些文件。如果您查看package.json我们最初设置项目时创建的文件，您会看到如下内容：

"main": "dist/brian-component-lib.ssr.js",
"browser": "dist/brian-component-lib.esm.js",
"module": "dist/brian-component-lib.esm.js",
"unpkg": "dist/brian-component-lib.min.js",
"files": [
    "dist/*",
    "src/**/*.vue"
],

下面的部分files告诉 npm 发布我们文件夹中的所有内容dist以及我们文件夹中的任何.vue文件src。你可以根据需要对其进行更新。

因为我们没有对 package.json 文件进行任何更改，所以我们已准备好发布。为此，我们只需要运行以下命令：

npm publish

结论

就是这样！恭喜！你现在已经发布了一个 Vue 组件库。你可以访问npmjs.com并在注册表中找到它。