2020-9-8 seo達人
構建庫的常見方法有兩種：一種是自己手動構建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'
}
}
}
執行 npm run 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）：當你做了向下兼容的問題修正
登錄npm
首先設置登錄的npm鏡像地址
npm config set registry http://168.20.20.57.4873
然后在終端執行登錄命令，輸入用戶名、密碼、郵箱即可登錄
npm login
接著發布庫資源到npm
npm publish
最后發布成功可到官網查看對應的包并下載
npm install package_name
藍藍設計( www.lzhte.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務