详细解释如何创建和发布自己的Vue UI组件库

前言

在使用Vue进行日常开发的时候，我们经常会用到一些开源的UI库，比如： Element-UI_、_Vuetify等等。

这些库只需一行命令就可以很容易地引入到我们当前的项目：中

Npm安装vuetify//oryam添加vuetify，但是我们开发一个_UI Component_的时候，需要在多个项目中使用？我们的第一个想法可能是直接复制过去的副本，对吗？

这样很方便，但是有两个问题：

当该组件需要更新时，我们需要使用该组件手动维护所有更新。当有多个组件要共享时，手动复制太麻烦了。那么我们为什么不发布一个自己使用的UI组件库呢？

在本文中，作者将逐步介绍如何创建和发布自己的Vue UI组件库。

初始化项目

这里我们使用官方的Vue-cli来初始化一个Vue项目

使用npminstall-g @ vue/CLI # or arnglobal add @ vue/clivue创建个人组件集进入我们的新项目，让我们看看当前的项目文件：

接下来，让我们编写一个简单的_Vue组件_。在这里，我写了一个简单的顶栏控件来显示：页面标题、我的个人信息、github源代码链接等信息。

代码如下：

templatev-toolbarv-toolbar-side-icon @ click=' to mainpage()'/v-toolbar-side-icon v-toolbar-title visual Explain/v-toolbar-title v-spacer/v-spacerv-toolbar-toolbar-items class=' hidden-sm-and-down ' v-BTN flat @ click=' openMyGithub()' v-avatar size=42 img src=' http 3360https://avatar S3 . githubuser content.com/u/10973821？s=460v=4 '/v-avatar span style=' margin-left :8 px；关于me :s house/span/v-btnv-tooltip bottom v-BTN slot=' activator ' flat : href=' sourceCodeLink ' rel=' external no follow ' v-avatar size=42 img src=' http 3360https://assets-cdn . g ithub.com/images/modules/logos _ page/GitHub-mark . png '/v-avatar source Code/v-btnspan class=' top-bar-tooltip '欢迎来到叉星)/span/v-tooltip/v-toolbar-items/v-toolbar/templatescript export default { props :[' sourceCodeLink ']，methods : { openMyGithub(){ const a=document . create element(' a ')a . target=' _ blank ' a . href=' https://github.com/SST house ' a . click()}，toMainPage() {this。$ emit(' to-main-page ')} } }/script style scoped . top-bar-tooltip { font-size : 18px；} a { color: black}/style上面的代码构成了一个非常简单的Vue组件_，它提供了一个_ props: sourceCodeLink来方便自定义跳转链接，以及一个_ event3360 to-main-page _，用来触发用户跳转回主页的回调。

效果如图3360所示

配置项目

让我们配置当前项目，以便它可以发布到npm。

首先，我们编辑入口文件src/components/index.js，这样当它作为UI库导入时，我们可以在Vue中自动注册我们的Component:

从“vue”导入Vue，从“TopBar”导入。/TopBar . vue ' const Components={ TopBar } object . key(Components)。forEach(name={ vue.component(name，Components[name]))})导出默认组件接下来，我们将构建项目的脚本添加到package.json :的脚本中

其中-nameLibraryname指定要发布的库的名称，我们执行上面新添加的脚本：

您可以看到build已经生成了各种版本的js文件，可以用于发布

这里我们选择默认发布我们的* .common.js文件，所以我们在package.json中添加了main属性.

指定该属性后，当我们引用组件库时，默认情况下会加载main中指定的文件。

最后，我们在package.json中配置files属性来配置我们想要发布到npm的文件路径。

这里我们把用户可能用来引用我们组件库的所有文件放在：中

Npm版本

首先，我们注册一个npm帐户(如果我们有帐户，我们可以跳过这一步)

Npm添加用户//输入用户名、电子邮件地址等。根据提示，然后使用npm登录来登录注册号状态

您可以使用npm whoami在登录后检查登录状态

发布前，我们修改项目名称(注意不要与现有项目名称冲突)，建议使用@username/projectName的命名方式。

接下来，我们可以发布我们的UI组件库。在发布之前，我们再次编译它，让文件构建成为我们最新的修改：

npm运行构建包

我们使用以下命令发布我们的项目：

npm发布-访问公共

需要注意的是，在package.json中指定的version属性：在我们每次想要更新组件库的时候都需要更新版本(毕竟同一个版本的代码不一样，容易让人产生疑惑)

测试用法

这样，我们就完成了发布自己的UI组件库。接下来，我们可以在任何需要使用这个组件库的项目中使用：

npm安装-保存@ SST house/个人-组件集

然后在索引文件中引入组件库：(比如src/main.js)

导入“@ s house/personal-component-set”

接下来，我们可以在Vue的模板：中使用组件库中的组件

模板v-app id=' app' top-bar:源代码链接='源代码链接'/top-bar outer-view//v-app/template最后

经过这些步骤，我们有了自己的组件库。我们可以随时更新和发布新版本的组件库。

依赖于组件库的项目只能通过使用简单的npm命令(:)来更新

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。