年輕人如何從0到1封裝發佈一個vue組件

封裝發佈組件是前端開發中很是重要的能力，經過對經常使用組件的封裝能夠提高團隊開發的效率，避免重複勞做且不方便維護。好的組件的抽象和封裝能讓組件獲得更普遍和多環境兼容的應用。
本文講述瞭如何一步步從0到1封裝發佈一個經常使用的toast組件的過程。本文是搭配實例書寫的，因此理論上根據本文你能夠本身成功打包發佈一個本身的vue 組件。
在文末有對應的項目地址可供參考。css

組件建立

建立一個空文件前端

mkdir ToastComponent
cd ToastComponent/
複製代碼

初始化一個package.jsonvue

npm init -y
複製代碼

代碼以下：node

{
  "name": "ToastComponent",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
複製代碼

新建一個src目錄,裏面寫兩個文件index.js 和 toast.vue,目錄以下：webpack

├── package.json
└── src/
     └── index.js
     └── toast.vue
複製代碼

toast.vue以下，一個單純的vue文件git

<template>
  <div class="toast">{{msg}}</div>
</template>
<script>
export default {
  name: "Toast",
  data() {
    return {
      msg: ""
    };
  }
};
</script>
<style scoped>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: fit-content;
  height: 44px;
  background-color: rgba(0, 0, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  color: #fff;
  border-radius: 5px;
}
</style>
複製代碼

index.js代碼以下：github

import Toast from './components/Toast.vue'

Toast.install = (Vue) => {
  Vue.prototype.$toast = (msg, duration) => {   //添加一個實例方法 這樣全局的實例均可以調用$toast方法了 msg、duration是調用$toast時傳入的兩個參數
    if (!msg) {
      return;
    }
    duration = duration || 1500;  //若是不傳toast持續時間則默認使用此時間
    const constroct = Vue.extend(Toast)  //構造器
    const instance = new constroct();   //建立實例
    instance.msg = msg || '';           //將$toast(msg,duration)中的msg傳入組件的data中
    const tpl = instance.$mount().$el   //vue實例未掛載時可這樣拿到它的dom 後續可對它的dom進行操做

    document.querySelector('body').appendChild(tpl);
    setTimeout(() => {
      document.querySelector('body').removeChild(tpl)
    }, duration);
  }
}

export default Toast;
複製代碼

組件打包

對組件進行編譯打包，這裏使用webpack,在跟目錄下新建webpack.config.js,配置以下：web

// webpack.config.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: {
    index: path.join(__dirname, "/src/index.js") // 入口文件（就是剛纔用於暴露組件的index.js）
  },
  output: {
    path: path.join(__dirname, "/dist"), // 打包後的文件存放在dist文件夾
    publicPath: '/dist/', // 設置公共路徑
    filename: "toast.js", // 打包後輸出文件的文件設置爲btn.js
    libraryTarget: 'commonjs2' // 這個選項會嘗試把庫暴露給前使用的模塊定義系統，這使其和CommonJS、AMD兼容或者暴露爲全局變量
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它會應用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 塊
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 它會應用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 塊
      {
        test: /\.js$/,
        exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()   //這個插件是webpack打包.vue文件必須使用的 它的做用是將你定義的其餘規則複製並運用到.vue文件裏相應的塊  若是你有一條匹配 /\.js$/ 的規則，那麼它會應用到 .vue 文件裏的 <script> 塊。
  ]
}

複製代碼

對應的package.json 修改以下：vue-router

{
  "name": "toast-component",
  "version": "1.0.0",
  "description": "",
  "main": "dist/toast.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.2.2",
    "style-loader": "^1.2.1",
    "vue-loader": "^15.9.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}
複製代碼

項目目錄以下
vue-cli

安裝對應的依賴

npm i 
複製代碼

編譯生成打包文件

npm run build
複製代碼

可見打包後的文件已生成

測試驗證組件是否正常

npm pack
複製代碼

可在目錄中看到生成了一個.tgz的壓縮包
如何檢測這個包呢？咱們能夠新建一個vue項目去驗證。
在此爲了方便使用vue-cli新建一個test-toast項目.將剛纔生成的壓縮包放在test-toast目錄的跟路徑下：

npm i toast-component-1.0.0.tgz
複製代碼

全局引入註冊這個組件

//main.js

import Vue from 'vue'
import App from './App.vue'

import Toast from 'toast-component'

Vue.config.productionTip = false
//全局註冊
Vue.use(Toast)

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

在項目中使用

//App.vue

<template>
  <div id="app">
    <div @click="showToast">點我出toast</div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},

  methods: {
    showToast() {
      this.$toast("hello world", 2000);
    }
  }
};
</script>

複製代碼

運行點擊按鈕能夠出現toast以下，能夠自定義duration、msg

至此驗證該組件經過，就回到組件開發項目就能夠發佈了。

發佈

在組件項目中命令行運行：

npm publish
複製代碼

便可發佈到npm。如須要登陸能夠運行：

npm login 
複製代碼

進行登陸再操做。發佈成功的效果：就能夠在npm平臺看到該組件了

附

組件項目地址
 測試組件效果項目地址

總結

本文介紹瞭如何封裝經常使用的vue toast組件的過程，講述了本地如何測試驗證打包的組件以及發佈npm的流程。你能夠根據這樣的流程去發佈其餘的vue組件，爲團隊和社區貢獻更多本身的力量，讓不凡被看見。

若是這篇文章對你有用，歡迎點贊！你的點贊和支持能夠鼓勵做者持續輸出好的做品喲！讓咱們一塊兒快速成長~