详细讲解如何创建, 发布自己的 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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
Javascript基础教程之数组 array
2015/01/18 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
javascript 显示全局变量与隐式全局变量的区别
2017/02/09 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Python-基础-入门 简介
2014/08/09 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
django做form表单的数据验证过程详解
2019/07/26 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python实现百度OCR图片识别过程解析
2020/01/17 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
python文件路径操作方法总结
2020/12/21 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
旷课检讨书2000字
2014/01/14 职场文书
访谈节目策划方案
2014/05/15 职场文书
运动员获奖感言
2014/08/15 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
委托证明范本
2014/11/25 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
django注册用邮箱发送验证码的实现
2021/04/18 Python
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python