教你一步步封裝vue組件併發布到npm

前言

在開發項目過程當中，一般會用到不少功能和設計相相似的組件，爲了不重複造輪子，咱們常常會用到一些第三方組件，好比 vux，vant。可是這樣會引入太多沒用到的組件，形成打包體積過大。因此咱們有必要封裝一些基礎的組件用於開發。

下面我爲你們介紹如何封裝vue的toast和dialog組件並上傳到npm。

GitHub： github.com/Michael-lzg…
掘金：https://juejin.im/post/5dc8c1...

掃碼如下二維碼能夠先睹爲快哦

組件封裝必要性

• 提升開發效率，避免重複造輪子
• 調用同一組件，統一 UI 樣式
• 便於協同開發，提升可維護性
• 減小對第三方組件的使用,定製個性化的組件

toast 和 dialog 組件封裝

toast 和 dialog 組件基本是每個移動端項目都會用到的，下面我將介紹如何封裝這兩個組件，併發布到 npm 供下載使用。

1.必備知識儲備

• vue 的基礎知識
• Vue.extend 構造器
• $mount 手動掛載實例
• vue 組件的傳值傳參
• 理解 Vue 構造函數及 prototype
• webpack 打包
• npm 基礎知識

最終咱們要達到這樣的效果，從 npm 下載依賴包，直接調用

this.$toast({ msg: '手機號碼不能爲空' })

this.$toast({
  msg: '成功提示',
  type: 'success'
})

this.$dialog({
  title: '刪除提示',
  text: '是否肯定刪除此標籤？',
  showCancelBtn: true,
  confirmText: '確認',
  confirm(content) {
    alert('刪除成功')
  }
})

效果圖以下

2.編寫組件

• 根據傳入的 type 肯定彈窗的類型（成功提示，失敗提示，警告，加載，純文字）
• 設置彈窗消失的時間

<template>
  <div>
    <transition name="fade">
      <div class="little-tip" v-show="showTip">
        <img src="assets/img/success.png" alt="" width="36" v-if="type=='success'" />
        <img src="assets/img/fail.png" alt="" width="36" v-if="type=='fail'" />
        <img src="assets/img/warning.png" alt="" width="36" v-if="type=='warning'" />
        <img src="assets/img/loading.png" alt="" width="36" v-if="type=='loading'" class="loading" />
        <span>{{msg}}</span>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        showTip: true,
        msg: '',
        type: ''
      }
    },
    mounted() {
      setTimeout(() => {
        this.showTip = false
      }, 1500)
    }
  }
</script>
<style lang="less" scoped>
  /* 樣式略 */
</style>

3.註冊 toast 組件

3.一、利用 Vue.extend 構造器把 toast 組件掛載到 vue 實例下

import Vue from 'vue'
import Main from './main.vue'

let Toast = Vue.extend(Main)

let instance
const toast = function(options) {
  options = options || {}
  instance = new Toast({
    data: options
  })
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  return instance.vm
}
export default toast

3.2 在 main.js 引入 toast 組價並掛載在 vue 原型上

import Vue from 'vue'
import toast from './components/toast'
Vue.prototype.$toast = toast

至此就能夠在項目中直接調用組件了。dialog 組件的封裝也是一樣的方法。
下面介紹如何把組件發佈到 npm 上。

發佈 npm 組件

1. 在 src 下新建 index.js 文件，引入須要上傳的組件

這裏主要用到 vue 兩種註冊組件和插件的方法

• Vue.component(key, val)
• Vueu.use()

import toast from './components/toast'
import dialog from './components/dialog'
const YMUI = {
  // 這裏是後續補充的組件
}

const install = function(Vue, opts = {}) {
  if (install.installed) return
  Object.keys(YMUI).forEach(key => {
    Vue.component(key, YMUI[key])
  })

  Vue.prototype.$toast = toast
  Vue.prototype.$dialog = dialog
}

// auto install
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue) // 經過use方式所有引入
}

const API = {
  install,
  ...YMUI
}

export default API // 經過插件單獨引入

2.修改 webpack.dist.prod.conf 的打包配置

• entry: 入口文件配置，打包時入口文件爲 index.js
• filename: 是打包生成文件的名字
• libraryTarget: 配置 webpack 打包內容的模塊方式的參數

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/index.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: 'vue-mobile-ymui.js',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
  }
}

3.修改 package.json 的配置

• name: 組件名字
• version: 版本號
• main: 字段，指定了該 npm 包引用的入口（記住必定要記得添加，而且文件名應與上面第二點提到的保持一致）

{
  "name": "vue-mobile-ymui",
  "version": "1.0.3",
  "description": "a mobile compoment",
  "author": "lzg",
  "private": false,
  "main": "./dist/vue-mobile-ymui.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js",
    "build-js": "webpack --config build/webpack.dist.prod.conf.js"
  },
}

4.發佈 npm 組件

1.npm login 註冊並登錄 npm 帳號
2.npm publish 發佈組件

注意點：

• 郵箱必需要先註冊
• 包名不能有大寫字母/空格/下滑線，不能重複

5.升級 npm 包

1.打包修改後的代碼
2.修改包的版本（package.json 裏的 version 字段） version 的字段表現爲：」version「:"x.y.z"

• 有很大的改動，沒法向後兼容,增長 x
• 增長了新特性，但仍能向後兼容，增長 y
• 修復 bug,小改動，增長 z

使用 npm 組件

1.安裝依賴

npm install vue-mobile-ymui

2.在 mian.js 引入並 use()

import UI from 'vue-mobile-ymui'
Vue.use(UI)

3.在頁面直接調用

this.$toast({
  msg: '成功提示',
  type: 'success'
})

後續展望

至此，封裝vue組件併發布到npm並調用的方法就接受完了。
後續的繼續封裝其餘組件，敬請關注

相關文章

搭建一個vue-cli的移動端H5開發模板
從零開始構建一個webpack項目
總結幾個webpack打包優化的方法
一文讀盡前端路由、後端路由、單頁面應用、多頁面應用
從一道面試題中總結JS做用域，this 指向和箭頭函數
關於幾個移動端軟鍵盤的坑及其解決方案
淺談JavaScript的防抖與節流
總結幾種數組去重的方法
淺談JavaScript的 深拷貝和淺拷貝