Vue组件库发布到npm详解

2024-04-24 12:30:29

制作了一套自己的组件库，并发布到npm上，项目代码见https://github.com/hamger/hg-vcomponents

前期准备

有一个npm账号
安装了vue-cli

搭建项目

vue init webpack hg-vcomponents
cd hg-vcomponents
cnpm install

目录结构

- vue-flag-list
  + build
   + dist // 存放发布到npm的代码
   - src
     - components // 存放组件源代码 和 README.md
      - arrows
         arrows.vue
         README.md
       - round
        round.vue
         README.md
      index.js // 组件导出文件
    - examples // 存放组件的 demo
      arrows.vue
       round.vue
       index.vue // 组件 demo 的入口
     - router
       index.js // 引入 examples 下的组件，并配置路由
     App.vue
     main.js
   ...

内部代码详见 GitHub，如果对你有所帮助，给个star吧。

项目配置

为了使项目能上传到npm上，需要配置一些地方。

build/webpack.base.conf.js

entry: {
  app: process.env.NODE_ENV === 'production'
   ? './src/components/index.js' // 生产模式下导入文件
   : './src/main.js' // 开发模式下导入文件
},

package.json

"private": false, // 因为组件包是公用的，所以 private 为 false
"main": "dist/hg-vcomponents.min.js", // 导出文件名，即 import 引入的文件

.gitignore

dist文件夹下文件是要导出的文件，所以在.gitignore文件中把dist/去掉，这样上传代码的时候也会更新打包后的文件。

开发与生产

由于配置了webpack.base.conf.js，使得项目的开发与生产独立开来。

使用npm run dev进入开发环境，就可以看到组件的demo，方便调试。使用npm run build打包组件库。

发布到npm

在你登录了npm的情况下，在根目录输入命令行(每次更新代码执行同样操作)

npm version patch
npm publish

大功告成！现在你可以在其他地方使用npm install hg-vconponents下载自己写的组件库了。

浅谈基于Vue.js的移动组件库cube-ui

cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,虽然组件还不是很多,但是基本场景是够用了,感谢开源! 首先创建一个vue项目 vue init webpack my-project cd my-project npm install 安装cube-ui npm install cube-ui -S 官方推荐使用 babel-plugin-transform-modules 插件,可以更优雅引入组件模块以及对应的样式. npm install babel-pl
Mint UI 基于 Vue.js 移动端组件库

官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引
基于Vue框架vux组件库实现上拉刷新功能

最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑: 1.问题:只刷新一次,解决方法:需要自己手动重置状态 this.scrollerStatus.pullupStatus = 'default', 2.问题:不能滚动,解决方法:因为启用keep-alive缓存,需要设置 activated () { this.$refs.scroller.reset() } 如果还没效果,请在获取后台数据后,执行如下代码 this.$nxtTick(() => { th
关于Vue组件库开发详析

前言 2017年是Vue.js大爆发的一年,React迎来了一个强有力的竞争对手,王者地位受到挑战(撰写此文时github上Vue与React的star数量已逼近).我们团队这一年有十多个大型项目采用了Vue技术栈,在开发效率.页面性能.可维护性等方面都有不错的收效. 我们希望把这些项目中可复用的功能组件提取出来,给后续项目使用,以减少重复开发,提高效率,同时也为了致敬前端界"出一个框架,造一遍轮子"的行规, 一个基于Vue 2的移动端UI组件库被提上日程. 组件库的开发过程总的来说还
mpvue项目中使用第三方UI组件库的方法

说明整理了一份简单的源码,放在github,有需要参考的同学自取~ 简介微信小程序上线已有一年多时间啦,自美团的mpvue(基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系)问世也过去了好几个月. 前端技术日新月异,小程序的UI框架也层出不穷. 例如: WeUI: 一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.(github) ZanUI: 有赞移动 Web UI 规范 ZanUI 的小
少女风vue组件库的制作全过程

预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈, 请勿在生产环境中使用,供学习&交流~~ 完整项目目录结构 git clone到本地安装依赖后,执行npm run serve进行本地组件库开发,npm run docs:dev进行组件库官网开发.一般在src/demo.vue进行单个组件测试通过后,再引入到.vuepress/components中放入组件库官网. ├─docs // vuepress开发目录 │ ├─.vuepre
基于Vue 2.0的模块化前端 UI 组件库小结

AT-UI 是一款基于 Vue.js 2.0 的轻量级.模块化前端 UI 组件库,主要用于快速开发 PC 网站产品. 专门为桌面应用程序构建,AT-UI 提供了一套 npm + webpack + babel 前端开发工作流程,以及一个体面的干净整洁的 UI 组件. 特性基于 Vue 开发的 UI 组件基于 npm + webpack + babel 的工作流,支持 ES2015 CSS 样式独立,保证不同的框架实现都能保持统一的 UI 风格( 详见: AT-UI Style) 提供友好的
在vue2.0中引用element-ui组件库的方法

在vue2.0中引用element-ui组件库 element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网: http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的element-ui import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 需要注意的是,样式文件需要
Vue cli3 库模式搭建组件库并发布到 npm的流程

市面上目前已有各种各样的UI组件库,比如 Element 和 iView ,他们的强大毋庸置疑.但是我们面临的情况是需求越来越复杂,当它们不能再满足我们需求的时候,这个时候就有必要开发一套属于自己团队的组件库了. 所以本文的目的就是让读者能通过此文,小能做一个简单的插件供人使用,大能架构和维护一个组件库不在话下. 以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程. vColorPicker 插件 DEMO 一.技术栈如何通过新版脚手架创建项目,这里就不提了
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=

Vue组件库发布到npm详解

前期准备

搭建项目

项目配置

相关推荐

随机推荐