详细讲解如何创建, 发布自己的 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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
常用的javascript function代码
May 23 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
Javascript动态创建div的方法
Feb 09 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
vue-router相关基础知识及工作原理
Mar 16 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里的JS打印函数
2006/10/09 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
深入了解Python中pop和remove的使用方法
2018/01/09 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
python Canny边缘检测算法的实现
2020/04/24 Python
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
Java面试笔试题大全
2016/11/23 面试题
安全员岗位职责
2013/11/11 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
公司回复函格式
2015/07/14 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
春节随笔
2015/08/15 职场文书