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』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
实例详解带参数的 npm script
May 28 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 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容易忘记的知识点分享
2013/04/30 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python生成器(Generator)详解
2015/04/13 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
python 类之间的参数传递方式
2019/12/20 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Python-openCV开运算实例
2020/07/05 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
C++是不是类型安全的
2014/02/18 面试题
方正Java笔试题
2014/07/03 面试题
药学专业个人自我评价
2013/11/11 职场文书
员工薪酬福利制度
2014/01/17 职场文书
五一活动标语
2014/06/30 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
2015年教师节广播稿
2015/08/19 职场文书