創(chuàng)建
- vue-cli創(chuàng)建vue簡(jiǎn)單項(xiàng)目
vue init webpack-simple vue-leaflet-map - 修改package.json
- 修改
"private": false,
npm默認(rèn)創(chuàng)建的項(xiàng)目是私有的幅虑，如果要發(fā)布至npm必須將其公開。 - 添加
"main": "dist/vue-leaflet-map.js",
通過(guò)import VueLeafletMap from 'vue-leaflet-map'引用該組件時(shí)惯吕，項(xiàng)目會(huì)自動(dòng)找到node_modules/vue-leaflet-map/dist/vue-leaflet-map.js
- 在src下創(chuàng)建文件夾lib， 在
lib/下創(chuàng)建自定義組件map.vue,并在lib/創(chuàng)建index.js怕午。
在index.js中添加：import VueLeafletMap from './map.vue' export default VueLeafletMapindex.js是用來(lái)應(yīng)用該組件废登，并以commonJS方式導(dǎo)出該組件。
發(fā)布
??發(fā)布需要npm賬號(hào)郁惜，需要在官網(wǎng)申請(qǐng)堡距。只有先登錄npm之后，才可用npm publish進(jìn)行發(fā)布
??每次更新之后需要要記得修改package.json 中的version項(xiàng)兆蕉。版本號(hào)的修改請(qǐng)遵循相關(guān)約定
在下坂本
應(yīng)用
??npm安裝（npm install vue-leaflet-map --save-dev）之后羽戒，與自己定義的組件類似，簡(jiǎn)單的三步：引用虎韵、注冊(cè)和定義
1.引用
import VueLeafletMap from 'vue-leaflet-map'
2. 注冊(cè)
components: {
VueLeafletMap
}
3. 定義
<vue-leaflet-map></vue-leaflet-map>
總結(jié)
??上面介紹的方式是先將vue組件進(jìn)行打包易稠，其結(jié)果文件是js。這個(gè)js把vue.js和leaflet.js也打包進(jìn)去了包蓝，導(dǎo)致這個(gè)文件大了些驶社。
Alt text
??同時(shí)我也看到網(wǎng)上有人選擇不打包，直接將vue組件導(dǎo)出使用测萎。這樣有一定的好處亡电，但對(duì)于leaflet-map就稍顯不足。如果采用這種方式硅瞧，那么我們?cè)谧詈笠徊降摹皯?yīng)用”時(shí)份乒，會(huì)提示leaflet找不到，需要單獨(dú)安裝腕唧、引用leaflet冒嫡，略顯繁瑣。
??對(duì)于以后組件的開發(fā)還在摸索中四苇，但一定會(huì)選擇更優(yōu)的方式來(lái)處理。
