npm包版本發布、刪除教程

注冊npm賬戶並在本機添加npm用戶

• 進入https://www.npmjs.com/，注冊賬戶
• 打開終端，輸入npm login
• 輸入賬號名、密碼、郵箱，登錄成功后將添加至npm的本地配置中；
• 

創建npm包項目

1. 新建空文件夾，由於基於vue封裝插件，所以建議使用webpack-simple模版項目來開發， vue init webpack-simple v-testnpm

2. 

3. cmd命令進入項目,並安裝依賴,運行模版

   cd v-testnpm
   npm install
   
   npm run dev
   

4. 在根目錄下的src文件夾中創建lib文件夾，lib作為我們的插件目錄；

5. 在src/lib下編寫我們的插件v-testnpm.vue

   <template>
       <div>
   
         <input type="text" v-model="text">
   
         {{text}}
   
       </div>
   
   </template>
   
   <script>
   
       export default {
   
           name: "v-testnpm",
   
           data () {
   
               return {
   
                 text: '測試'
   
               }
   
           }
   
       }
   
   </script>
   
   <style scoped>
   
   </style>
   

6. 在src/lib創建index.js

   import vTestnpm from './v-testnpm.vue'
   const comment = {
   
     install: function(Vue) {
   
       Vue.component(vTestnpm.name, vTestnpm)
   
     }
   
   }
   
   // 這里的判斷很重要
   
   if (typeof window !== 'undefined' && window.Vue) {
   
     window.Vue.use(comment)
   
   }
   
   export default comment
   

7. 在main.js中引入我們的插件並注冊使用

   import Vue from 'vue'
   import App from './App.vue'
   
   import vTestnpm from './lib/index';
   
   Vue.use(vTestnpm);
   
   new Vue({
   
   el: '#app',
   
   render: h => h(App)
   
   })
   

8. 在App.vue中使用v-testnpm

   <template>
     <div id="app">
   
       <v-testnpm></v-testnpm>
   
     </div>
   
   </template>
   
   <script>
   
   export default {
   
     name: 'app',
   
     data () {
   
       return {
   
       }
   
     }
   
   }
   
   </script>
   

9. 項目成功運行后，查看實際效果
   

10. 修改package.json文件
    
    將private改為false,增加main,main是打包后的入口文件

11. 修改webpack.config.js文件

    

    • entry：是入口文件，src目錄下插件lib的index.js文件
      -filename：/打包后輸出的文件名字,這里需要和package.json文件下main應該寫為:'dist/v-testnpm.js'

12. 打包插件並上傳npm

    npm run build
    npm login
    
    npm publish
    

    最后我們在實際項目中，安裝自己的插件使用就可以了