详细讲解如何创建, 发布自己的 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 相关文章推荐
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
基于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使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
php post换行的方法
2020/02/03 PHP
javascript自启动函数的问题探讨
2013/10/05 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
我的求职计划书
2014/01/10 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
小学一年级评语大全
2014/04/22 职场文书
青春奉献演讲稿
2014/05/08 职场文书
食品安全宣传标语
2014/06/07 职场文书
争做文明公民倡议书
2014/08/29 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS