Vue組件封裝發布到npm


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


  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM