创建一个自己的Vue UI组件库,并将它发布在npm上

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

因为在开发多个项目中可能会用到同一个组件,那么我们通过复制粘贴的形式更新,无异于是笨拙的,我们可以通过上传到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

原文地址:https://www.cnblogs.com/rope/p/11634160.html

时间: 2024-09-30 21:09:16

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

【转】优秀的Vue UI组件库

原文来源:https://www.leixuesong.com/3342 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护

介绍推荐优秀的Vue UI组件库

Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正式使用.开发团队在使用Vue.js框架和UI组件库以后,开发效率大大提高,自己写的代码也少了,很多界面效果组件已经封装好了.在选择Vue UI组件库的过程中,通过GitHub上根据star数量.文档丰富程度.更新的频率以及维护等因素,也收集整理了一些优秀的Vue UI组件库. 下载资源:www.yi

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

有没有曾遇过,产品要我们实现一个功能,但是 iview 或者 elementui 不支持,我们然后义正言辞的说,不好意思,组件库不支持,没法做到. 有没有曾和设计师争论得面红耳赤,其实也是因为组件库暂不支持.所以,我认为每一个前端都应该具备能为公司架构一套 UI 组件库的能力. 因为机缘巧合,我在 Github 上发起了一次 Vue UI 组件库开源项目的活动,参与人数达到 40 多人,本以为一套 UI 库就是一堆组件叠加在而已,40 个人,每人一个组件,应该会很快搞定吧.万万没想到,一套UI库

目前流行前端几大UI框架 ----vue Vue的UI组件库

在前端项目开发过程中,总是会引入一些UI框架,已为方便自己的使用,很多大公司都有自己的一套UI框架,下面就是最近经常使用并且很流行的UI框架. 一.Mint UI 屏幕快照 2019-01-18 下午3.03.59.png Mint UI是 饿了么团队开发基于vue .js的移动端UI框架,它包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要. 官网:https://mint-ui.github.io/#!/zh-cn Github: https://github.com/Elem

【小程序】UI组件库

WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. GitHub地址:https://github.com/Tencent/weui-wxss iView WeApp iView是TalkingData发布的一款高质量的基于Vue.js组件库,而iView weapp则是它们的小程序版本. GitHub地址:https://github.com/TalkingData/iview-weapp 文档:https://weapp.ivi

造个自己的Vue的UI组件库类似Element

前言 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完善了. 我写这遍文章的目的:记录自己搭建UI库的过程(对Vue的理解加深了好多)演示地址首先讲一下思路: 平常写组件时,写一个组件要用时直接导入就行了,如你写了一个time.vue,用的时候 import time from '路径' 现在要写一个组件库,是不是把所有组件一个文件夹里(如button

[转]VUE优秀UI组件库合集

原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.vue等框架为代表推动的组件化开发模式越来越被开发者认可,这种模式极大的降低了我们开发与维护的成本.vue作为一款深受广大群众以及尤大崇拜者的喜欢,特此列出在github上开源的vue优秀UI组件库供大家参考,期待开发者们推出更多优秀的组件库. 本文分为两大部分介绍:PC端和移动端. 首先介绍PC端

一枚前端UI组件库 KUI for Vue

一枚前端UI组件库 KUI for Vue 基于VUE 2.x 开发,在追求完美视觉体验的同时也保证了其性能高效. 欢迎批评.指正.吐槽.Star 和 捐助 文档 Docs: http://k-ui.xyz Blog: http://chuchur.com 特性 漂亮的UI,可定制主题 兼容IE9+ 组件丰富,功能强大 更新日志: Logs: http://vue.k-ui.xyz/log 安装 使用npm npm install kui-vue --save 使用CDN <!-- import

关于vue ui组件

一.vue ui  组件 1: vue 当前很火前端框架vue 针对PC用户 pc 端与移动端区别 (1)屏幕宽度:992px > (2)操作方式:鼠标 事件   手指:触碰操作 -饿了么:基于VUE框架开发移动端组件库 Mint-UI -MUI :开源团队 MUI http://dev.dcloud.net.cn/mui/ -滴滴: 2: vue ui  组件mint-ui安装与使用 方式一:学习环境下载安装 下载mint-ui js/css/font 方式二:生产环境下载安装(脚手架) 下载