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 Object.extend
May 18 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
node.js中的fs.appendFile方法使用说明
Dec 17 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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
简单采集了yahoo的一些数据
2007/02/14 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
jquery密码强度校验
2015/12/02 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
大学生标准推荐信范文
2013/11/25 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2014年维稳工作总结
2014/11/18 职场文书
导师对论文的学术评语
2015/01/04 职场文书
小学英语复习计划
2015/01/19 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
电影圆明园观后感
2015/06/03 职场文书
荒岛余生观后感
2015/06/09 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Vue.Draggable实现交换位置
2022/04/07 Vue.js