创建
- vue-cli创建vue简单项目
vue init webpack-simple vue-leaflet-map - 修改package.json
- 修改
"private": false,
npm默认创建的项目是私有的，如果要发布至npm必须将其公开。 - 添加
"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 VueLeafletMapindex.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，略显繁琐。
对于以后组件的开发还在摸索中，但一定会选择更优的方式来处理。
