本文仅限于入门级,没有成规模制作,希望能对你有所帮助。

因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到npm后,不断迭代npm包来实现更新。

前期准备

初始化project

这里我们使用vue-cli来初始化一个vue项目。

npm install -g @vue/cli or yarn global add @vue/cli

vue create personal-component-set

首先我们来开发一个可复用的顶栏控件,这里是用vuetifyUI库进行第二次开发。

npm install vuetify or yarn add vuetify

顶栏控件代码:

src/components/TopBar.vue

<template>
<v-toolbar>
<!-- 这里v开头的使用的是第三方ui组件库 -->
<v-toolbar-side-icon @click="toMainPage()"></v-toolbar-side-icon>
<v-toolbar-title>{{title}}</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">
<v-avatar size=42>
<img src="../assets/logo.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', 'title'],
methods: {
openMyGithub() {
// 自定义头像被点击的时候创建a标签并且跳转
const a = document.createElement('a')
a.target = '_blank'
a.href = 'https://github.com/mufengsm'
a.click()
},
toMainPage() {
this.$emit('to-main-page')
}
}
}
</script> <style scoped>
.top-bar-tooltip {
font-size: 18px;
} a {
color: black;
}
</style>

配置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.jsonscripts 中:

"scripts": {
"build-bundle": "vue-cli-service build --target lib --name personal-component-set ./src/components/index.js",
},

命令解释:--target打包为lib仓库构建,--name项目名称为personal-component-set,入口文件为./src/components/index.js

运行命令后就可以在dist文件夹中看到打包后的文件了,这里我们选择默认发布我们的 *.common.js 文件, 所以我们在 package.json中添加main属性。

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

"main": "./dist/personal-component-set.common.js",

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

"files": [
"dist/*",
"src/*",
"public/*",
"*.json",
"*.js"
],

npm 发布

首先去npm官网注册一个账号记得去查看邮箱邮件来认证邮箱,要不然会上传会不成功。

然后在项目中打开命令行工具npm adduser or npm login输入你注册的用户名密码和邮箱,可以使用npm whoami 查看登录状态。

在发布之前, 我们修改一下项目的名称(注意不要和npm已有项目名称冲突,可以先去npm搜索一下), 推荐使用 @你注册npm的用户名/项目名称 的命名方式。

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

npm run build-bundle

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

npm publish --access public

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

测试使用

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

npm install --save @你注册npm的用户名/项目名称

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

import @你注册npm的用户名/项目名称

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

<template>
<!-- v-app是vuetify中的 -->
<v-app id="app">
<top-bar :sourceCodeLink="sourceCodeLink"></top-bar>
</v-app>
</template>

如果你完全按照上面教程来的,可记得在src/main.js中引入我们文章开头的第三方ui组件库vuetify

// 使用第三方组件库
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify)

最后

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

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


参考文章:https://juejin.im/post/5b54120b5188251967307be4

创建一个自己的Vue UI组件库,并将它发布在npm上的更多相关文章

  1. 16款优秀的Vue UI组件库推荐

    16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基 ...

  2. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  3. 【转】优秀的Vue UI组件库

    原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司 ...

  4. 为公司架构一套高质量的 Vue UI 组件库

    有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂 ...

  5. Vue UI组件库

    1. iView UI组件库  iView官网:https://www.iviewui.com/ 2.Vux UI组件库   Vux官网:https://vux.li/ 3.Element UI组件库 ...

  6. 前端如何搭建vue UI组件库/封装插件(从零到有)

    需求 因之前是做外包项目居多,经常用到相同的组件,之前的办法是在一个项目中写一个组件,其他项目直接将compents下的组件复制,粘贴到项目中使用,缺点是维护起来,改一个项目,其他项目也需要修改,所以 ...

  7. 手把手教你写 Vue UI 组件库

    最近在研究 muse-ui 的实现,发现网上很少有关于 vue 插件具体实现的文章,官方的文档也只是一笔带过,对于新手来说并不算友好. 笔者结合官方文档,与自己的摸索总结,以最简单的 FlexBox  ...

  8. Vite+TS带你搭建一个属于自己的Vue3组件库

    theme: nico 前言 随着前端技术的发展,业界涌现出了许多的UI组件库.例如我们熟知的ElementUI,Vant,AntDesign等等.但是作为一个前端开发者,你知道一个UI组件库是如何被 ...

  9. [转载]前端——实用UI组件库

    https://www.cnblogs.com/xuepei/p/7920888.html Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https:/ ...

随机推荐

  1. HDU 1045 Fire Net 二分图建图

    HDU 1045 题意: 在一个n*n地图中,有许多可以挡住子弹的墙,问最多可以放几个炮台,使得炮台不会相互损害.炮台会向四面发射子弹. 思路: 把行列分开做,先处理行,把同一行中相互联通的点缩成一个 ...

  2. POJ-2104 K-th Number CDQ分治

    题目传送门 题意:给你一个序列,长度为n,m次询问,询问一段区间的第k大. 题解:CDQ分治,对整个值域进行分治.每次取一个mid, 计算出整个区间内mid <= 的数目,如果 num > ...

  3. HTML5基本介绍

    HTML5简介 HTML是互联网上应用最广泛的标记语言.HTML文件就是普通文本+HTML标记,而不同的HTML标记能表示不同的效果.(简单的说HTML是超文本标记语言) HTML5草案的前身名为 W ...

  4. Java服务器-Disruptor使用注意

    最近看了一下部署游戏后台的服务器状况,发现我的一个Java程序其占用的CPU时长超过100%,排查后发现竟是Disruptor引起的,让我们来看看究竟为什么Disruptor会有这样的表现. 发现占用 ...

  5. 单细胞转录组测序技术(scRNA-seq)及细胞分离技术分类汇总

    单细胞测序流程(http://learn.gencore.bio.nyu.edu) 在过去的十多年里,高通量测序技术被广泛应用于生物和医学的各种领域,极大促进了相关的研究和应用.其中转录组测序(RNA ...

  6. bzoj2141_排队

    题意 给定\(n\)个数,每次交换两个数,输出交换后的逆序数. 分析 交换两个数只会影响到对应区间内的逆序数,具体为减少区间\([l+1,r-1]\)中比\(a[r]\)大的数的个数,增加比\(a[r ...

  7. Linux基础提高_sudo,行为审计,跳板机

    sudo 临时给普通用户赋予root权限的一种方式 echo "%wheel        ALL=(ALL)       NOPASSWD: ALL" >>/etc/ ...

  8. Excel如何动态获取列名

    遇到一个动态列,N行数据的求和,但是求和时需要Excel列名(A,B,C...)当时觉得这太非常难了.后来仔细研究了下Excel列名,都是从A到Z,然后AA再到AZ,以此类推. 如此的话就好弄了.通过 ...

  9. 每天学会一点点(spring-mvc.xml与web.xml配置文件)

    1.spring-mvc.xml中拦截器的使用 首先在springMVC.xml配置如下代码: <!-- 拦截器 --> <mvc:interceptors> <bean ...

  10. Scratch Blocks本地环境搭建

    关于Scratch Blocks环境的搭建,大家在实现的过程中还是有很多的问题,目前谷歌和MIT的工程师也在进一步完善.可以通过以下方式,简单快捷的导出Scratch Blocks对应的index.h ...