構建庫的常見方法有兩種：一種是自己手動構建webpack庫打包，設定output為 library; 另一種是基於vue-cli3輸出庫資源包。我們採用第二種vue腳手架的方式構建庫。

新增編譯庫命令

// package.json 
"scripts": {
    // ...
    "lib": "vue-cli-service build --target lib --name Step --dest dist packages/index.js"
}

// packages/index.js  預設打包Step
import Step from '../steps/src/step';
Step.install = function(Vue) {
    Vue.component(Step.name, Step);
};
export default Step;
 

• --name: 庫名稱。
• --target: 構建目標，預設為應用模式。這裡修改為 lib 啟用庫模式。
• --dest: 輸出目錄，預設 dist。
• [entry]: 最後一個引數為入口檔案，預設為 src/App.vue。

更多詳細配置檢視vue腳手架官網

如果該庫依賴於其他庫，請在vue.config.js 配置 externals

// vue.config.js
module.exports = {
    configurewebpack:{
      externals: {
         vue: 'Vue',
         'vue-router':'VueRouter',
         axios: 'axios'
      }
    }
}
 

執行npmrun lib 就可以發現我們的庫被打包到了 根目錄的dist資料夾下。

新增 .npmignore 檔案（可選）

和 .gitignore 的語法一樣，具體需要提交什麼檔案，看各自的實際情況

# 忽略目錄
examples/
packages/
public/

# 忽略指定檔案
vue.config.js
babel.config.js
*.map

配置npm庫資訊

配置package.json檔案，以釋出庫檔案。

{
  "name": "gis",
  "version": "1.2.5",
  "description": "基於 Vue 的庫檔案",
  "main": "dist/gis.umd.min.js",
  "keyword": "vue gis",
  "private": false,
   "files": ["dist"],
  "license": "MIT"
 }
 

• name: 包名，該名字是唯一的。可在 npm 官網搜尋名字，如果存在則需換個名字。
• version: 版本號，每次釋出至 npm 需要修改版本號，不能和歷史版本號相同。
• description: 描述。
• main: 入口檔案，該欄位需指向我們最終編譯後的包檔案。
• keyword：關鍵字，以空格分離希望使用者最終搜尋的詞。
• author：作者
• files: 要上傳的檔案
• private：是否私有，需要修改為 false 才能釋出到 npm
• license： 開源協議
• dependencies： 依賴庫

注意每次釋出新的庫，需要更改版本號，規則如下：

"version": "1.2.5" 主版本號為 1，次版本號 2，修訂號 5

• 主版本號（Major）：當你做了不相容的API修改
• 次版本號（Minor）：當你做了向下相容的功能性新增
• 修訂號（Patch）：當你做了向下相容的問題修正

廣州vi設計http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

登入npm

首先設定登入的npm映象地址

npm config set registry http://168.20.20.57.4873

然後在終端執行登入命令，輸入使用者名稱、密碼、郵箱即可登入

npm login

接著釋出庫資源到npm

npm publish

最後釋出成功可到官網檢視對應的包並下載

npm install package_name