详细讲解如何创建, 发布自己的 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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 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数字字符串左侧补0、字符串填充和自动补齐的几种方法
2014/05/10 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
php计算函数执行时间的方法
2015/03/20 PHP
php实现微信支付之企业付款
2018/05/30 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
JS数组Object.keys()方法的使用示例
2019/06/05 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
基于python实现查询ip地址来源
2020/06/02 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python 实现超级玛丽游戏
2020/11/25 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
临床医师专业个人自我评价范文
2013/11/07 职场文书
高三英语教学反思
2014/01/13 职场文书
教师党员一句话承诺
2014/03/28 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
财务工作失误检讨书
2015/02/19 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers