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


Posted in Javascript onMay 29, 2019

前言

在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等.

只需一行命令, 即可方便的将这些库引入我们当前的项目:

npm install vuetify
// or
yarn add vuetify

但是当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗?

这样做是很方便, 但是有两个问题:

  • 当该 component 需要更新时, 我们需要手动维护所有用到该 component 的更新
  • 当有多个 component 需要共享时, 手动复制过于繁琐

那么, 我们为什么不发布一个 UI 组件库给自己用呢?

本文笔者将介绍如何一步步, 创建并发布自己的 Vue UI 组件库.

初始化 project

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

npm install -g @vue/cli
# or
yarn global add @vue/cli
vue create personal-component-set

进入我们新建的项目, 让我们看看当前的项目文件:

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

接下来让我们写一个简单的 _Vue component_. 这里我写了一个简单的顶栏控件, 用来展示: 页面标题, 我的个人信息, github 源码链接等信息.

代码如下:

<template>
<v-toolbar>
<v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon>
<v-toolbar-title>Visual Explain</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat @click="openMyGithub()">
<v-avatar size=42>
<img src="https://avatars3.githubusercontent.com/u/10973821?s=460&v=4">
</v-avatar>
<span style="margin-left:8px;">About me: ssthouse</span>
</v-btn>
<v-tooltip bottom>
<v-btn slot="activator" flat :href="sourceCodeLink" rel="external nofollow" >
<v-avatar size=42>
<img src="https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png">
</v-avatar>
Source Code
</v-btn>
<span class="top-bar-tooltip">Welcome to fork & star <br/> ; )</span>
</v-tooltip>
</v-toolbar-items>
</v-toolbar>
</template>
<script>
export default {
props: ['sourceCodeLink'],
methods: {
openMyGithub() {
const a = document.createElement('a')
a.target = '_blank'
a.href = 'https://github.com/ssthouse'
a.click()
},
toMainPage() {
this.$emit('to-main-page')
}
}
}
</script>
<style scoped>
.top-bar-tooltip {
font-size: 18px;
}
a {
color: black;
}
</style>

以上代码构成了一个非常简单的 Vue component_, 提供了一个 _props: sourceCodeLink 方便定制化跳转链接, 提供了一个 _event: to-main-page_, 用于触发用户跳转回主页的回调.

效果如图:

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

配置 project

下面我们来配置当前项目, 以使其可以发布到 npm 上.

首先我们编辑入口文件 src/components/index.js, 使其被作为 UI 库导入时能自动在Vue中注册我们的 Component:

import Vue from 'vue'
import TopBar from './TopBar.vue'
const Components = {
TopBar
}
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name])
})
export default Components

接下来我们添加 build 项目的脚本到 package.json 的 scripts 中:

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

其中 --name libraryName 指定的是要发布的Library的名称, 我们执行上面新加的脚本:

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

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

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

指定该属性后, 当我们引用该组件库时, 会默认加载 main 中指定的文件.

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

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

我们这里将用户引用我们的组件库可能用到的所有文件都放进来:

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

npm 发布

首先我们注册一个 npm 账号 (如果已有账号, 可以跳过此步骤)

npm add user
// 按照提示输入用户名, 邮箱等即可

然后使用 npm login 登录注册号的状态

登录后可以使用 npm whoami 查看登录状态

在发布之前, 我们修改一下项目的名称(注意不要和已有项目名称冲突), 推荐使用 @username/projectName 的命名方式.

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

接下来我们就可以发布我们的 UI 组件库了, 在发布之前我们再编译一次, 让build出的文件为我们最新的修改:

npm run build-bundle

我们使用下面的命令发布我们的项目:

npm publish --access public

需要注意的是 package.json中指定的version属性: 每次要更新我们的组件库都需要更新一下version(毕竟同一个version 的代码不同,很容易让人产生疑惑)

测试使用

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

npm install --save @ssthouse/personal-component-set

然后在index文件 (如src/main.js) 中引入该组件库:

import '@ssthouse/personal-component-set'

接下来我们就可以在 Vue的template中使用组件库中的 Component了:

<template>
<v-app id="app">
<top-bar :sourceCodeLink="sourceCodeLink"></top-bar>
<router-view/>
</v-app>
</template>

最后

经过上面这些步骤后, 我们就拥有了一个属于自己的组件库了. 我们可以随时更新, 发布自己新版的组件库.

而依赖了该组件库的项目只需要使用简单的 npm 命令即可更新 : )

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
Oct 21 Javascript
JS公共小方法之判断对象是否为domElement的实例
Nov 25 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
基于JS实现一个随机生成验证码功能
May 29 #Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 #Javascript
深入了解响应式React Native Echarts组件
May 29 #Javascript
node将geojson转shp返回给前端的实现方法
May 29 #Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 #Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 #Javascript
JS学习笔记之数组去重实现方法小结
May 29 #Javascript
You might like
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
php支付宝APP支付功能
2020/07/29 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
vue实现通讯录功能
2018/07/14 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python中的id()函数指的什么
2017/10/17 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
卫校毕业生自我鉴定
2013/10/31 职场文书
副总经理工作职责
2013/11/28 职场文书
运动会800米加油稿
2014/02/22 职场文书
承诺书怎么写
2014/03/26 职场文书
丧事主持词大全
2014/04/02 职场文书
2014组织生活会方案
2014/05/19 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
全新239军机修复记
2022/04/05 无线电