創建
- 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，略顯繁瑣。
??對于以后組件的開發還在摸索中，但一定會選擇更優的方式來處理。
