1.使用Vue腳手架創建項目 vue init webpack-simple <project-anem>,這里使用wepack簡單模板
2.目錄結構如下:
3.封裝組件(兩種情況)
情況1:每次發布一個組件到npm上去
1.目錄結構:
2.packages/switch/LjzSwitch.vue代碼:
3.packages/switch/index.js 代碼:
index.js代碼說明:Vue.js 的封裝組件有一個公開方法 install。這個方法的第一個參數是 Vue 構造器,第二個參數是一個可選的選項對象: MyPlugin.install = function (Vue, options) {} 該方法會在你使用該插件,
也就是 Vue.use(yourPlugin)時被調用。這樣也就給Vue全局注入了你的所有的組件。
4.配置webpack.config.js:
5.配置package.json:
情況2:每次封裝發布多個組件到npm上去
1.目錄結構:
2.組件.vue和index.js同上
3..此時有多個組件導出時,需要將所有組件放在一個文件下,在與App.vue同級目錄下新建index.js;引入所有組件然后統一導出,index.js代碼如下
4.配置webpack.config.js:
5.修改package.json文件:
6.引用方式:npm install ljz-switch3
4.npm login // 登陸 ; npm adduser(修改npm用戶);
5.npm publish (發包);npm unpublish --force //強制刪除;npm unpublish <project-name>@version //指定版本號
6.package.json文件中private:false時不可以更新包,每次發包時,更改package.json中的version
參考鏈接:http://www.cnblogs.com/liuyishi/p/9732386.html