Vue组件库发布到npm详解


Posted in Javascript onFebruary 17, 2018

制作了一套自己的组件库,并发布到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下载自己写的组件库了。

Javascript 相关文章推荐
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
js检测网络是否具体连接功能的代码
May 23 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
Jquery日期选择datepicker插件用法实例分析
Jun 08 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 #Javascript
JavaScript中严格判断NaN的方法
Feb 16 #Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 #Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 #jQuery
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 #jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 #jQuery
浅谈实现vue2.0响应式的基本思路
Feb 13 #Javascript
You might like
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
AngularJS基础知识
2014/12/21 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
Vue表单实例代码
2016/09/05 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
星球大战与Python之间的那些事
2016/01/07 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
专业实习自我鉴定
2013/10/29 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
创业培训计划书
2014/05/03 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
施工安全保证书
2015/05/09 职场文书
2016年寒假见闻
2015/10/10 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers