手把手教你发布vue组件到npm

　　环境
　　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
　　配置package.json {   ＂name＂: ＂et-verify-code＂, // 项目名称，也是安装 npm 包的名称 npm install    ＂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＂ }
　　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＂   }   ... }
　　该命令的参数解释如下（摘自官方文档：https://cli.vuejs.org/zh/guide/cli-service.html#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 组件的方式进行构建。更多细节请查阅构建目标（https://cli.vuejs.org/zh/guide/build-targets.html）。
　　最后你可以修改README.md文件，加上项目和包的说明，这个尽可自由发挥了。
　　组件开发et-verify-code.vue     
　　本地测试组件是否可用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.tgznpm run serve // 启动项目
　　Step 3：在项目的入口文件main.js引入包// src/main.jsimport EtVerifyCode from ＂et-verify-code＂Vue.use(EtVerifyCode)
　　Step 4：在 demo 页面中引用这个组件 // demo.vue 
　　若测试可用，在测试项目中运行npm uninstall et-verify-code卸载组件，然后就可以发布到npm上了。发布到npm
　　1. 注册npm账号
　　发布之前，得先有一个npm账号，如果没有的话上 官网（https://www.npmjs.com/） 注册一个，注册完账号之后，我们就要在本地登录并发布我们的组件了。
　　注意：因为有点童鞋会经常用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  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 [ | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=] | 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 // 安装我们的包