使用Vue CLI 3將基於element-ui二次封裝的組件發布到npm

前言：之前在網上找的好多都是基於vue-cli 2.x的，而使用vue-cli 3的文章比較少, Vue CLI 3 中文文檔，所以我在自己嘗試的時候把幾篇文章結合了一下，調出來了我想要的模式，也就是Vue CLI 3 + element-ui + 多個二次封裝的組件。最終想要的是 element-ui 這種感覺的，很多組件可以在不同項目中復用。

安裝依賴

首先用Vue CLI 3來初始化項目

yarn global add @vue/cli
vue create qiyun-el-ui
vue ui

安裝element-ui

這里使用官方提供的的插件安裝：
http://element.eleme.io/#/zh-...

https://github.com/ElementUI/...

在插件列表搜索element

在這里我選的手動導入，圖中是全部導入

這樣在項目中，就會新建一個plugins文件夾，里面有個element.js 文件，如果想手動引入，就在這里添加要依賴的組件，這里是為了調試組件：

import Vue from 'vue'
import { 
  Button, 
  Dialog 
} from 'element-ui'

Vue.use(Button)
Vue.use(Dialog)

由於我們是基於element-ui的部分組件做的二次封裝，所以最好還是按需引入所依賴的組件比較好。

編寫組件

在 src 的同級下面新建 packages 目錄，在這里添加自己封裝的要發布的組件。
例如，新建 qe-modal 文件夾，再接着新建 src 文件夾，里面新建 qe-modal.vue，在這里寫組件的代碼：

<template>
  <el-dialog
    :title="title"
    :visible="dialogVisible"
    @close="$emit('update:dialogVisible', false)"
    :width="width">
    <slot name="modal-body"></slot>

    <div slot="footer" class="dialog-footer">
      <slot name="modal-footer">
        <el-button @click="$emit('update:dialogVisible', false)" size="small">取 消</el-button>
        <el-button type="primary" @click="$emit('confirm')" size="small" :disabled="confirmDisable || beforeSendDisable">{{ beforeSendDisable? "處理中..." : "確 定" }}</el-button>
      </slot>
    </div>

  </el-dialog>
</template>

<script>
export default {
  name: 'qeModal',
  props: {
    dialogVisible: Boolean,
    title: String,
    width: {
      type: String,
      default: '580px'
    },
    beforeSendDisable: {
      type: Boolean,
      default: false
    },
    confirmDisable: {
      type: Boolean,
      default: false
    }
  }
}
</script>

在 qe-modal 根目錄下新建 index.js ，里面注冊單獨的該組件，方便使用時可以單獨引用：

import qeModal from './src/qe-modal'

qeModal.install = function(Vue) {
  Vue.component(qeModal.name, qeModal)
}

export default qeModal

這樣一個組件就添加完成了，然后需要在 packages 的根目錄下添加一個總的 index.js，這里是全局注冊的地方，使用時可以全局引入，其實就跟 element-ui 的兩種方式一樣：

import qeModal from './qe-modal'

const components = [
  qeModal
]

const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name, component);
  });
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  qeModal
}

后面再添加組件，在這里也要再注冊一下，而element-ui 源碼中是動態引入的，我們的項目組件還沒那么多，可以先一個個手動引入，如果后面數量多了，不好維護，可以參考 element-ui 的源碼實現，我在這里做了一些簡單的解釋。

配置 npm

在 package.json 里面的 script 里面加一個 lib選項，方便每次構建：

"scripts": {
    // ...,
    "lib": "vue-cli-service build --target lib --name qiyun-el-ui --dest lib ./packages/index.js"
  },

其中 --name 后面是你最后想要生成文件的名字，並用 --dest lib 修改了構建的目錄。
然后在 package.json 里面添加一些npm包發布的相關信息，比如作者、版本等：
其中最重要的是：

"main": "lib/qiyun-el-ui.common.js",

這里的路徑要和上面構建出來的目錄和文件名對應上。

里面的配置項，在網上找了個例子：

{
  "name": "maucash",
  "description": "maucash中常用組件抽取",
  "version": "1.0.2",
  "author": "kuangshp <[e-mail]>",
  // 開源協議
  "license": "MIT",
  // 因為組件包是公用的，所以private為false
  "private": false,
  // 配置main結點，如果不配置，我們在其他項目中就不用import XX from '包名'來引用了，只能以包名作為起點來指定相對的路徑
  "main": "dist/maucash.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "iview": "^2.14.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue": "^2.5.11"
  },
  // 指定代碼所在的倉庫地址
  "repository": {
    "type": "git",
    "url": "[e-mail]:maucash/maucash.git"
  },
  // 指定打包后,包中存在的文件夾
  "files": [
    "dist",
    "src"
  ],
  // 指定關鍵詞
  "keywords": [
    "vue",
    "maucash",
    "code",
    "maucash code"
  ],
  // 項目官網的地址
  "homepage": "https://github.com/kuangshp/maucash",
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

發布到npm

到這塊后面的網上有很多更細致的教程，我就不在這里贅述了。下面給出兩個文章的鏈接，供參考。

1、到npm上注冊一個賬號

2、登錄
npm login

3、添加用戶信息
npm adduser

4、發布到遠程倉庫(npm)上
npm publish

5、刪除遠程倉庫的包
npx force-unpublish package-name '原因描述'

參考：
https://juejin.im/post/5bc441...
Vue cli3 庫模式搭建組件庫並發布到 npm的流程_vue.js_腳本之家

原文地址：https://segmentfault.com/a/1190000016927695