手把手教你發佈vue組件到npm

開發vue組件

環境

vue-cli 4.x

建項

vue create et-verify-code
複製代碼

建項過程當中須要你選擇要安裝的依賴。
我這裏只打算寫一個比較簡單的組件，因此只須要 stylus、babel、eslint 就能夠了。
my 和 et-component 都是我以前作項目所保存下來的組合配置。你能夠選擇default（默認）或者 manually （手動）。 接下來能夠刪掉一些不須要的目錄和文件，在src目錄下，建立 main.js和et-verify-code.vue文件，若是要對webpack打包作一些配置，則須要在項目根目錄下建立一個vue.config.js文件。因而，目錄結構以下：

E:\ET-VERIFY-CODE
│ .browserslistrc │ .eslintrc.js │ .gitignore │ babel.config.js │ package-lock.json │ package.json │ README.md │ vue.config.js │ ├─node_modules └─src  │ et-verify-code.vue  │ main.js 複製代碼

配置

1. package.json

{
 "name": "et-verify-code", // 項目名稱，也是安裝 npm 包的名稱 npm install <name>  "version": "0.1.0", // 項目版本  "main": "lib/et-verify-code.umd.min.js", // 包的入口文件，語句 import [pkg] from '[package]' 時，其實導入的就是 main 定義的文件  "author": "郵箱|做者",  "description": "描述",  "keywords": [ // 項目關鍵字  "vue",  "verify-code",  "et-verify-code"  ],  "private": false,  "scripts": { // 增長了 lib 命令  "serve": "vue-cli-service serve",  "build": "vue-cli-service build",  "lib": "vue-cli-service build --target lib --name et-verify-code --dest lib ./src/main.js", // 指定src目錄下的main.js文件爲組件入口  "lint": "vue-cli-service lint"  },  ...  "repository": {  "type": "git",  "url": "項目的git地址"  },  "license": "MIT" } 複製代碼

2. webpack 配置
   項目根目錄下的 vue.config.js文件

module.exports = {
 css: {  extract: false // 組件的樣式是否另外打包成單獨的css文件。默認爲true  // 由於我這個組件並不複雜，css代碼又很少，不想使用組件的時候還要顯式的去import css，因此就不另外打包成單獨的css文件了  }  // productionSourceMap: false // 是否生成sourcemap，默認是true } 複製代碼

這裏展開一下，若是你在package.json中main屬性設置爲dist目錄下的文件（好比 dist/et-verify-code.umd.min.js）,那麼你須要一些不一樣的配置。
由於默認的npm run build命令後生成在dist目錄下的文件名默認是長這樣的：app.[hash:8].js，中間有8位的隨機生成的哈希值。

所以，若是你在package.json中main屬性設置爲dist目錄下的文件，則須要對 build 命令作相應的配置（package.json文件中）：

{
 ...  "scripts": {  "build": "vue-cli-service build --target lib --name et-verify-code --dest dist ./src/main.js" // 默認是"vue-cli-service build"  }  ... } 複製代碼

該命令的參數解釋以下（摘自官方文檔）

用法：vue-cli-service build [options] [entry|pattern]
 選項：   --mode 指定環境模式 (默認值：production)  --dest 指定輸出目錄 (默認值：dist)  --modern 面向現代瀏覽器帶自動回退地構建應用  --target app | lib | wc | wc-async (默認值：app)  --name 庫或 Web Components 模式下的名字 (默認值：package.json 中的 "name" 字段或入口文件名)  --no-clean 在構建項目以前不清除目標目錄  --report 生成 report.html 以幫助分析包內容  --report-json 生成 report.json 以幫助分析包內容  --watch 監聽文件變化 複製代碼

--target 容許你將項目中的任何組件以一個庫或 Web Components 組件的方式進行構建。更多細節請查閱構建目標。

3. 最後你能夠修改 README.md文件，加上項目和包的說明，這個儘可自由發揮了。

組件開發

• et-verify-code.vue

<template>
 <div class="vcWrap">  <input v-for="n in len" :key="'codeInput' + n" :ref="'codeInput' + n" v-model.trim.number="code[n-1]" @keydown="onkeydown(n)" @keyup="onkeyup(n)" />  </div> </template>  <script> export default {  name: 'EtVerifyCode',  props: ["length"],  data () {  return {  len: this.length || 4, // 驗證碼長度  code: new Array(this.len),  keyCodes: [  48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, // 數字  8, // backspace  // 37, 39, // arrowLeft, arrowRight  13 // enter  ]  }  },  methods: {  onkeydown (n) {  // eslint-disable-next-line  // console.log(event)  if (!this.keyCodes.includes(event.keyCode)) { // 攔截keyCodes數組外的鍵盤輸入  event.returnValue = false  } else if (event.keyCode === 8 && n > 1 && this.code[n - 1] === '') { // 刪除鍵且this.code[n-1]爲空  this.$refs['codeInput' + (n - 1)][0].focus()  event.returnValue = false  }  },  onkeyup (n) {  if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) { // 數字鍵  this.$set(this.code, n - 1, event.key)  if (n < this.len) this.$refs['codeInput' + (n + 1)][0].focus()   this.$emit('sendCodeInput', this.code.join(''))  } else if (event.keyCode === 8) { // 刪除鍵  this.$emit('sendCodeInput', this.code.join(''))  } else if (event.keyCode === 13) { // enter鍵  if (this.code.join('').length === this.len) this.$emit('goNext')  }  }  } } </script>  <style lang="stylus"> .vcWrap  input  width 40px  height 40px  line-height: 40px   -webkit-appearance: none;  // background-color: #fff;  // background-image: none;  // border: 1px solid #dcdfe6;  background-color: #f7f9fa;  border: 1px solid #f7f9fa;   box-sizing: border-box;  display: inline-block;  font-size: inherit;  outline: 0;  padding: 0 14px;  transition: border-color .2s cubic-bezier(.645,.045,.355,1);  border-radius: 4px;   margin-right 1em  &:last-child  margin-right 0 </style> 複製代碼

• main.js

import EtVerifyCode from './et-verify-code.vue'
EtVerifyCode.install = Vue => Vue.component(EtVerifyCode.name, EtVerifyCode) export default EtVerifyCode 複製代碼

本地測試組件是否可用

• Step 1：在項目中執行以下命令

npm run lib // 生成可供import的文件
npm pack // 本地生成一個 et-verify-code-0.1.0.tgz 的包 複製代碼

這裏須要注意一下你在 package.json 中 main 屬性設置的值。該字段指定了包的主入口文件。
main 定義了包的入口文件，在NodeJS環境中，語句 import [pkg] from '[package]' 時，其實導入的就是main定義的文件。
因此，若是你在 main 這裏寫的是lib/et-verify-code.umd.min.js，那麼執行上述命令沒問題。但若是你寫的是dist/et-verify-code.umd.min.js，那麼在執行npm pack命令以前，就須要先執行npm run build（而不是npm run lib）生成dist目錄下可供import的文件了。

• Step 2：把生成的 et-vcode-0.1.0.tgz包拷貝到 用來測試組件的項目（這裏你或許須要另外建一個新的項目）的根目錄下，而後

npm install et-verify-code-0.1.0.tgz
npm run serve // 啓動項目 複製代碼

• Step 3：在項目的入口文件 main.js引入包

// src/main.js
import EtVerifyCode from 'et-verify-code' Vue.use(EtVerifyCode) 複製代碼

• Step 4：在 demo 頁面中引用這個組件

// demo.vue
<template>  <et-verify-code /> </template> 複製代碼

若測試可用，在測試項目中運行npm uninstall et-verify-code卸載組件，而後就能夠發佈到npm上了。

發佈到npm

1. 註冊npm帳號

發佈以前，得先有一個npm帳號，若是沒有的話上 官網 註冊一個，註冊完帳號以後，咱們就要在本地登陸併發布咱們的組件了。

注意：由於有點童鞋會常常用cnpm源，因此，必定要切換到npm源上才能夠，否則就會報錯（error: no_perms Private mode enable, only admin can publish this module）。 所以你要經過執行 npm config set registry http://registry.npmjs.org 命令切換到npm源。

2. 開始發佈

在發包以前，先去npm官網搜索一下有沒有和你的包名相同的，若是有就改一個其餘的名字吧。

npm login // 登錄npm
// 而後輸入你的帳號、密碼、郵箱 // 當你在控制檯看到 Logged in as <Username> on https://registry.npmjs.org 說明登錄成功  // 若是你保證是最新版本且已經打包過，則跳過npm run build這一步 // 這一步是執行npm run build 仍是 npm run lib，要看你在 package.json 中 main 屬性設置的值，詳見「本地測試」中 step 1 中的說明 npm run build // 或者 npm run lib, 根據你的配置決定跑哪一個命令 npm publish // 發佈你的包 複製代碼

注意：一個版本只能發佈一次，也就是你不能發了1.0.0，下次還繼續1.0.0，理論上能夠覆蓋，可是npm不容許這樣，由於你這樣覆蓋，就沒法知道你的版本信息了啊，插件和項目都是迭代的，like git，是有版本信息的。

• 方法一：每一次 npm publish前，自行手動更改 package.json的 version
• 方法二：經過 npm version命令來發布

咱們來學習一下 npm version 命令

在命令行敲入npm version --help就能夠看到可使用的命令：

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
複製代碼

major：主版本號
minor：次版本號
patch：補丁號
premajor：預備主版本
preminor：預備次版本
prepatch：預備補丁號
prerelease：預發佈版本

舉例說明一下，假設當前版本爲0.1.0
➜ npm version preminor
v0.2.0-0
➜ npm version minor
v0.2.0
➜ npm version prepatch
v0.2.1-0
➜ npm version patch
v0.2.1
➜ npm version prerelease
v0.2.2-0
➜ npm version prerelease
v0.2.2-1
➜ npm version premajor
v1.0.0-0
➜ npm version major
v1.0.0

對了，項目的git status必須是clear，才能使用npm version命令。
若是你的項目中包含git，命令還會自動給你提交更新到git（git commit -m "X.Y.Z"），因此還能夠在npm version NEWVERSION後面加上-m參數來指定自定義的commit message。好比：

npm version patch -m "Upgrade to %s for reasons"
複製代碼

message中的%s將會被替換爲版本號。

這裏咱們再展開一下

《版本號策略》
版本號格式：主版本號.次版本號.修訂號；
主版本號：當你作了不兼容的 API 修改；
次版本號：當你作了向後兼容的功能性新增；
修訂號：當你作了向後兼容的問題修正；

處於開發階段的項目版本號以0.Y.Z形式表示，此階段正在開發基礎功能、公衆API；
版本號只能增長，禁止降低，代碼的修改必須以新版本形式更新。

查看npm && 使用咱們的包

這個時候，你稍微等幾分鐘去npm官網搜索一下你的包名，就能夠找到啦。若是搜不到，那就再等等，或許更新慢，沒有徹底更新，可是你在本身 npm 帳號能夠查看到本身發佈的包。
具體使用包的方法就是，在項目目錄下執行命令

npm install et-verify-code // 安裝咱們的包
複製代碼

本文使用 mdnice 排版