一.建立元件並配置
1.通過vue腳手架的簡易版vue init webpack-******命令建立乙個vue工程(前面的部落格有)
2.寫好自己的元件,並做好配置
專案結構如圖:
1)說明:src下的index.js是專案的入口檔案(改了配置檔案);demo1資料夾表示乙個元件的分類;demo1下的index.js是為了將index元件暴露出去;dist資料夾中的index.js是將要發布的js檔案
2)配置:
*將webpack.config.js下module.
export節點下的子節點替換為
entry:
'./src/index.js'
,//專案的入口
output:
*src下的index.js編碼為export
from
'./myplugin/demo1/index.js'
;*demo1下的index編碼為export
from
'./index.vue'
;//將元件暴露出去
*package
.json下的對應內容替換為
"name"
:"vue-week-date-picker"
,"description"
:"將預設時間的分鐘設定為30分鐘"
,"version"
:"1.0.12"
,"author"
:"roriring"
,"license"
:"mit"
,"private"
:false
,"main"
:"dist/index.js"
,"scripts":,
由於json中不能注釋,下面單獨說明:
name: 在npm中搜尋的名稱
version: npm當前發布的版本,每次發布都要改版本號
private
:false將元件設定為共有才能發布
main: 專案的入口
3)將專案npm run build 編譯生成dist目錄
二.發布1.進入npm官網https:
建立乙個npm賬號,一定要登入郵箱驗證
2.cmd登入npm,由於我用的是idea,所以直接在在terminal下進行,如下圖,如果當前登入的映象是http:
**),將不能發布成功,請在cmd視窗npm config set registry=http:
3.cmd命令進入當前專案所在目錄,然後直接npm publish即可發布
自定義vue元件發布到npm
為什麼會有這個想法呢,主要是vue專案中自定義的元件在多個專案中使用。導致修改bug的時候,總是要在專案分支中修改,然後同步到主線上,這樣容易導致分支修改後沒有同步到主線,慢慢的就會導致元件版本不統一,而導致公升級元件很繁瑣,最後可能都要去維護多個元件的不同版本,這樣不是我們想要的。所以就打算將元件...
NodeJs開發高階 發布自定義模組到NPM
注 最好不要用qq郵箱,不然可能會接收不到驗證郵件,實測谷歌郵箱是可以的 module.exports sub function a,b files index.js keywords author my name license isc npm initnpm loginnpm publish注 ...
Vue 自定義元件
元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...