如何使用@vue/cli 3.0在npm上建立，发布和使用你本身的Vue.js组件库

时间 2019-11-21

标签如何使用 vue cli 3.0 npm 建立发布本身 vue.js 组件栏目 JavaScript 繁體版

原文原文链接

译者按： 你可能npm人家的包过成千上万次，但你是否有建立，发布和使用过本身的npm包？javascript

原文: How to create, publish and use your own VueJS Component library on NPM using @vue/cli 3.0
译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原做者全部，翻译仅用于学习。css

尽管我已经在工做上用了Vue.js一段时间，但我从不须要在npm上发布组件。但最近发如今不一样的项目重写组件是件很是蛋疼的事，因此当我第三次使用Vue.js开发项目时，我以为咱们是时候须要一些高度可配置而且可重用的组件了。vue

首先，你须要安装vue-cli才能开始。java


npm install -g @vue/cli
# 或者
yarn global add @vue/cli

vue create my-vue-library

咱们正在使用vue-cli 3.0 beta版本。你可能会Github的README.md看到一条警告：“除非您有冒险精神，不然不要在生产中使用”，很显然我颇有冒险精神，哈哈。程序员

你如今的控制面应该看起来以下图：vue-cli

如今你只需开始作如下事情：npm


npm run serve

如今开始建立一个简单的组件，来看一个Banner组件的例子。json

<template>
 <div class="banner" :style="bannerStyles" :class="`banner__${position}`">
 <slot></slot>
 </div>
</template>

<script>
const defaultStyles = {
 left: 0,
 right: 0,
};
export default {
 props: {
 position: {
 type: String,
 default: 'top',
 validator(position) {
 return ['top', 'bottom'].indexOf(position) > -1;
 },
 },
 styles: {
 type: Object,
 default: () => ({}),
 },
 },
 data() {
 return {
 bannerStyles: {
 ...defaultStyles,
 ...this.styles,
 },
 };
 },
};
</script>

<style lang="scss" scoped>
.banner {
 padding: 12px;
 
 color: #f6a623;
 text-align: left;
 position: fixed;
 z-index: 2;
}
.banner__top {
 top: 0;
}
.banner__bottom {
 bottom: 0;
}
</style>

将组件注册为名为Banner的组件后，能够在模板中简单使用该组件：frontend

<Banner>Fundebug：最专业的应用错误监控平台!</Banner>

你能够在CodeSandbox查看这个组件的demo学习

Fundebug错误实时监控为您的Vue项目保驾护航！

如今，若是你想经过npm使用这个组件，你必须作一些事情。

第1步 - 设置库构建

你须要利用vue-cli将你的组件构建为库。将vue-cli-service build --target lib --name myLib [entry]添加到你的package.json脚本中。

默认状况下，[entry]是你的App.vue，但你能够将其更改成你导入这些组件的任何文件的相对路径。你可能会也可能不会选择全局注册这些组件，但若是我是你，我会将它们与个人库名称一块儿注册为前缀。程序员用组件的时候，代码越少越好。

我已经为个人脚本添加了build-bundle，以便我能够运行npm run build-bundle来建立个人库包。

这会产生相似于如下的输出：

对于CodeSandbox示例，输入文件应该以下所示：

第2步 - 指向package.json中的输出文件

为了确保package.json中的main属性正确指向输出文件。我更喜欢使用commonjs包。

第3步 - 以用户身份在npm上添加/登陆

确保你在npm上注册。 npm adduser注册一个新用户和npm login做为一个现有用户登陆。

第4步 - 验证npm用户凭证

输入npm whoami来验证你的用户名。

第5步 - 命名你的组件库

为你的包选择一个名字，你必须确保它还没有被使用。确保把它放在你的package.json中。

第6步 - 构建

经过执行在第1步中添加的程序包脚原本构建捆绑软件。


npm run build-bundle

第7步 - 在npm上发布组件库

运行npm publish –access public来发布该库供公众访问。

就是这样。你完成了在npm上发布你的Vue组件库！

第8步 - 如何使用你新发布的库

从npm安装组件库并将组件导入代码中。安装：


npm install --save [你的库名]

其中[你的库名]是你在第5步中给出的库的名称。

在你的main.js或相似的入口点，只需使用如下命令导入你的库：


import '你的库名';

如今，你能够开始使用你的组件了，由于咱们在第一步中全局注册了这些组件。

对于咱们的示例组件Banner，当咱们注册组件时，组件名称为FlockBanner。因此，你能够直接在你的模板中使用它：


<flock-banner>这是你的Banner是示例</flock-banner>

使用上面提到的组件库查看实例：https://codesandbox.io/s/n9n7yy2lwp

整个过程咱们就完成了。在Vue.js团队提出CLI版本3后，构建本身的组件库以便重用变得很是容易。若是以为这个流程有点帮助，点个赞呗，同时也支持下Fundebug哦！