开发vue组件并发布至npm

创建

• vue-cli创建vue简单项目
  vue init webpack-simple vue-leaflet-map
• 修改package.json

1. 修改"private": false,
   npm默认创建的项目是私有的，如果要发布至npm必须将其公开。
2. 添加"main": "dist/vue-leaflet-map.js",
   通过import VueLeafletMap from 'vue-leaflet-map'引用该组件时，项目会自动找到node_modules/vue-leaflet-map/dist/vue-leaflet-map.js

• 在src下创建文件夹lib， 在lib/下创建自定义组件map.vue,并在lib/创建index.js。
  在index.js中添加：

  import VueLeafletMap from './map.vue'
  export default VueLeafletMap
  

  index.js是用来应用该组件，并以commonJS方式导出该组件。

发布

  发布需要npm账号，需要在官网申请。只有先登录npm之后，才可用npm publish进行发布

  每次更新之后需要要记得修改package.json 中的version项。版本号的修改请遵循相关约定

在下坂本

应用

  npm安装（npm install vue-leaflet-map --save-dev）之后，与自己定义的组件类似，简单的三步：引用、注册和定义
1.引用

  import VueLeafletMap from 'vue-leaflet-map'

2. 注册

  components: {
    VueLeafletMap
  }

3. 定义

    <vue-leaflet-map></vue-leaflet-map>

总结

  上面介绍的方式是先将vue组件进行打包，其结果文件是js。这个js把vue.js和leaflet.js也打包进去了，导致这个文件大了些。

Alt text

  同时我也看到网上有人选择不打包，直接将vue组件导出使用。这样有一定的好处，但对于leaflet-map就稍显不足。如果采用这种方式，那么我们在最后一步的“应用”时，会提示leaflet找不到，需要单独安装、引用leaflet，略显繁琐。

  对于以后组件的开发还在摸索中，但一定会选择更优的方式来处理。

---

参考

1. 10分钟教你快速开发一个vue插件并发布npm
2. 封装一个可拖拽的Tree组件（Vue），并上传到NPM
3. 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）