手把手教你发布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 排版