本篇文章主要是記錄自己學習思路

1、先去npm官網注冊個賬號 https://www.npmjs.com/ 如果有賬號就直接登錄哈~
登錄進去之后，點自己的圖像下拉菜單，有個package選項，查看自己上傳了多少個包；

packages.png

2、根據vue-cli3的官方文檔創建一個項目；

新建的項目目錄.png

3、開始寫toast 插件
目錄如下：

toast.png

一般插件都寫在一個文件夾里面，什么文件夾放在那里隨便~

4、詳細展開plugin toast組件

//toast.vue文件代碼
<template>  

    <div class="toast" v-if="isShow" :class="showContent ?'fadein':'fadeout'">{{message}}</div>

</template>
<script>
export default {
    data(){
        return {
            message:'嗨~',
            isShow:false,
            showContent:false
        }
    }
}
</script>
<style scoped >
    
    .toast {
        position: fixed;
        left: 50%;
        top:50%;
        background: rgba(0,0,0,.35);
        padding: 10px;
        border-radius: 5px;
        transform: translate(-50%,-50%);
        color:#fff;
    }

    .fadein {
        animation: animate_in 0.25s;
    }
    .fadeout {
        animation: animate_out 0.25s;
        opacity: 0;
    }
    @keyframes animate_in {
        0% {
        opacity: 0;
        }
        100%{
        opacity: 1;
        }
    }
    @keyframes animate_out {
        0% {
        opacity: 1;
        }
        100%{
        opacity: 0;
        }
    }
    
     
</style>

index.js 文件代碼

import  toastComponent from './toast.vue';
 
let toast = {}
toast.install = function(Vue,options){

    let toastConsTructor = Vue.extend(toastComponent);
    Vue.prototype.$toast = function(text,duration = 2000){
        let toastDom = new toastConsTructor({
            el:document.createElement('div'),
            data(){
                return {
                    message:text,
                    isShow:true,
                    showContent:true
                }
            }
        }) 
        document.body.appendChild(toastDom.$el)
        let outduration = duration - 1250;
        setTimeout(() => {toastDom.showContent = false},outduration)
        setTimeout(()=>{toastDom.isShow = false},duration)
    }
}

export default toast;

這樣插件就寫好了，我們開始本地測試

5、本地先測試

我直接用components 目錄下面的HelloWorld.vue組件添加測試，如下是我修改的代碼

<template>
  <div class="hello"> 
      <button @click="showFn"> 點擊</button>
  </div>
</template>

<script>
import Vue from 'vue'
import toastTest from '../plugin'
Vue.use(toastTest)
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }, 
  methods:{
    showFn(){
       this.$toast('嗨，歡迎一起來學習')
    }
  }
}
</script>
 
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

測試toast組件.png

基本上測試這個插件是沒什么問題，接下來就開始編寫package.json文件相關配置 打包上傳到npm

6、打包組件

vue-cli 3 的官方文檔有打包庫的相關配置 庫打包相關命令官方入口
主要需要四個參數：
1，target: 默認為構建應用，改為 lib 即可啟用構建庫模式
2，name: 輸出文件名
3，dest: 輸出目錄，默認為 dist，這里我們改為 lib
4，entry: 入口文件路徑，默認為 src/App.vue，這里改為 src/plugin/index.js

// pageage.json

{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name toast --dest lib  src/plugin/index.js"
  }
}
然后執行 npm run lib 命令，編譯組件

編譯后lib目錄.png

7、package.json文件配置

首先需要在 package.json 添加組件信息
name: 包名，該名不能和已有的名稱沖突；
version: 版本號，不能和歷史版本號相同；
description: 簡介；
main: 入口文件，應指向編譯后的包文件；
keyword：關鍵字，以空格分割；
author：作者；
private：是否私有，需要修改為 false 才能發布到 npm；
license：開源協議。

//配置如下
  "name": "vue-toast-tests",
  "version": "0.1.0",
  "description": "vue-toast-tests test",
  "private": false,
  "main": "lib/toast.umd.min.js",
  "keyword": "test",
  "author": "zds_dawson",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name toast --dest lib  src/plugin/index.js"
  },

8、開始發布

如果以前改過 npm 的鏡像地址，比如使用了淘寶鏡像，就先改回來
npm config set registry http://registry.npmjs.org
如果沒有 npm 賬戶，可以通過** npm adduser** 命令創建一個賬戶，或者到 npm 官網注冊
如果在官網注冊的賬戶，或者以前就有賬戶，就使用** npm login** 命令登錄；

1，cmd打開項目所在目錄， 然后輸入登錄命令 npm login
2，根據返回信息輸入你的用戶名，密碼，郵箱（這些信息都在注冊npm賬號的時候填寫的）
3，然后提示登錄成功，我們可以用 npm whoami 命令查看當前操作用戶

cmd登錄命令操作.png

4，然后再確保項目已經編譯成功的情況下（運行npm run lib 命令） 輸入npm publish 發布npm包
5，如果想發布迭代版本，首先要 npm version patch 命名改變package.json文件里面的version版本信息
然后再npm publish 發布包
6，刪除包 執行 npm unpublish --force ；npm會根據package.json的version刪除該version的包版本

E:\project\vue-toast-tests>  npm publish //如果發布成功會有如下圖提示，同時也會發一封郵件到你剛剛填寫的郵箱

圖片.png

7，發布成功后，可以去npm 官網查看自己發布的包

包.png

9、使用包
再main.js加入包并使用，然后執行cnpm i vue-toast-tests --save-dev 下載包（我電腦用npm 報錯，cnpm沒問題）

import Vue from 'vue'
import App from './App.vue'
import toast from 'vue-toast-tests' //引入包
Vue.use(toast) //使用包
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
 

E:\project\vue-toast-tests> cnpm i vue-toast-tests --save-dev //下載包

測試包.png

測試toast.png

點擊下沒問題 整個流程就結束了~

問題區

我再發布包的時候有個問題，就是toast.vue文件里的style 加了scoped之后，發布包之后，沒有樣式，刪除掉就好了

問題，沒有樣式.png

補丁.png

擴展部分
vue.config.js配置參考地址 vue-cli 3 配置 官方文檔

//vue.config.js 這個文件是功能配置擴展文件，一定要放在項目的根目錄（跟package.json同級）下面，這樣才能生效 
module.exports = {
    lintOnSave:false //關閉eslint 代碼校驗
}