手把手教你npm发布一个vue插件

前言

最近封装一个vue组件，手把手从0开始，最后发布到npm中。 插件如下 ： npm地址链接

功能效果如下：（左右联动菜单）

• 你可以选择直接修改我的代码进行打包发布。git地址

1. 安装vue脚手架

• 选择最基础的即可

vue create lm-menu-scroll

2. 整理文件代码

1. 删除src文件， 新增packages文件，同时建议把eslint关闭（vue.config.js中增加 lintOnSave: false,
   ）
2. 完整结构如下

├── packages 
│ ├── index.js # 入口文件
│ ├── components # 组件
│ │ ├── index.vue # 本文需要封装的组件
├── README.md
├── package-lock.json
├── package.json
└──vue.config.js # webpack配置

2.1 入口文件

// pageges/index.js

import lmMenuScroll from './components/index.vue'

 lmMenuScroll.install = Vue => Vue.component(lmMenuScroll.name, lmMenuScroll) 

export default lmMenuScroll;

2.2 package.json

{
  "name": "lm-menu-scroll",
  "version": "1.0.0",
  "description": "基于 Vue 的左右菜单联动组件",
  "main": "dist/lm-menu-scroll.umd.min.js",
  "keyword": "vue menu-scroll",
  "private": false,
  "files": [
    "dist"
  ],
  "license": "MIT",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name lm-menu-scroll --dest dist packages/index.js"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "lodash": "^4.17.21",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "lodash": "^4.17.21",
    "vue-template-compiler": "^2.6.11"
  }
}

注意以下内容的修改

• name - 包名（包名应该是kebab-case, 即英文单词全小写或者中划线分割）
• version - 包的版本号（第一版建议1.0.0，具体命名规则看这里）
• description - 包的描述。在npmjs.com上搜索时会显示，有助于用户在搜索时进行筛选）
• main - 该字段指定了程序的主入口文件（最好写dist文件夹内已经压缩后的文件）
• keywords - 关键字（在npm网站上搜索你这个npm包的关键词）
• author - 包的作者。格式一般是name <你的邮箱>，一般来说，用vue/react脚手架创建项目的时候会默认这个格式写法, 当然也可以是一个github地址，也可以自定义，但就不那么标准了
• license - 版权许可证，MIT还是ISC，或者其他都可以，只是我看很多包都是MIT
• files - 默认打包地方

加上打包命令

// package.json
加上打包指令：在script中加入这一行

"lib": "vue-cli-service build --target lib --name lm-menu-scroll --dest dist packages/index.js"

下面介绍下命令中的几个部分。
–target lib：target有好几个选项。这里是打包成一个库（lib），发布插件的话，一般就是lib。
–name lm-menu-scroll： 打包生成的文件名。
–dest dist ：打包生成的目录名称。这里是lib，默认为dist
packages/index.js：打包的入口文件。

vue.config.js 中需要特别安装的依赖

module.exports = {
  lintOnSave: false,
  configureWebpack:{
    externals: {
       vue: 'Vue',
    }
  }
}

打包

npm run lib
npm pack // 本地生成一个tgz包，用于本地测试。 直接npm i 包即可。 测试成功后方可上传npm，否则会出现安装包错误问题。

上线npm

1. npm先注册一下
2. npm login // 登陆npm
// 然后输入你的账号、密码、邮箱（邮箱需要验证）
// 当你在控制台看到 Logged in as <Username> on https://registry.npmjs.org  说明登陆成功

// 如果你保证是最新版本且已经打包过，则跳过npm run lib 这一步
3. npm run lib 
4. npm publish // 发布你的包（邮箱提示发布成功 ，那就发布成功了）

版本更新

1. 修改package.json中的版本号。
2. 重新上线操作