快速开发一个vue插件并发布到npm上

1、npm是什么？

   npm 是Node 的模块管理器，功能极其强大。 它是Node 获得成功的重要原因之一。 正因为有了npm，我们只要一行命令，就能安装别人写好的模块。
    下面来介绍如何快速开发一个vue插件并发布到npm上

2、项目初始化

首先安装好脚手架vue-cli,打开终端输入命令

$ npm install --global vue-cli #全局安装

这里封装vue的插件用webpack-simple很合适，webpack-simple类似于webpack。
接着在终端进入需要创建项目的目录下，输入命令

$ vue init webpack-simple project-name #project-name为项目名，在这我的项目名为vue-mytoast

如图：

image.png

其中
"Pproject name":项目名称
“Project description”: 对项目的描述
"Author": 作者
"LIcense":开源协议
"Use sass？"：是否使用sass，这里我们没用到，选择否（No）
按照提示输入命令

$ cd vue-mytoast #进入文件夹
$ npm install #按照依赖包
$ npm run dev #启动项目

最终的项目结构：

image.png

我们在 src目录下创建一个lib文件夹，里面存放需要开发的插件文件，如图

image.png

3、所有环境搭建好后，进入插件开发

在lib文件夹下创建一个toast.vue文件，代码如下

创建一个toast.js文件写install方法，代码如下

import Toast from './toast.vue'
const vueToast = {
  install(Vue, options) {
    Vue.component(Toast.name, Toast) //Toast.name 组件的name属性,也就是后面使用的组件名字
    // 类似通过  this.$xxx方式调用插件，其实只是挂载到原型上而已
    //Vue.prototype.$xxx //最终可以在任何地方通过 this.$XXX调用
  }
}
//global情况下自动安装
if (typeof  window !== 'undefined' && window.Vue) {
  window.Vue.use(vueToast)
}

export default vueToast

写好后整个项目基本开发完成了，下面先在本项目测试一下
在 main.js 文件中全局引入toast.js

image.png

然后在App.vue中使用

image.png

如果在浏览器出现我们开发的组件，则开发成功！

image.png

4、开发完成后进行文件配置

• 修改package.json文件

{
  "name": "vue-mytoast",
  "description": "vue弹窗提示插件",
  "version": "1.0.0",
  "author": "lwz",
  "license": "MIT",   //开源协议
  "private": false,  //（改） 因为组件包是公用的，所以private为false
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "main": "dist/toast.js",  //（改） 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径

  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "keywords": [     //（改） 指定关键字
    "vue",
    "toast"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

• 修改webpack.config.js文件
  由于不是所有使用组件的人都是通过 npm 安装使用 import 引入组件的，还有很多人是通过

  5、配置完毕，进入发布阶段

  在发正式包之前可以在本地先打一个包，然后测试下有没有问题，如果没问题再发布到npm上。
  首先，打包到本地

  $ npm run build 
  $ npm pack 
  

  npm pack 之后，就会在当前目录下生成 一个tgz 的文件。
  打开一个新的vue项目，在当前路径下执行(‘路径’ 表示文件所在的位置)

  npm install 路径/组件名称.tgz 
  

  如图我在project的项目中引入vue-mytoast组件

  
  
  image.png

  然后，在新项目的入口文件（main.js）中引入

  import vueToast from 'toast'
  Vue.use(vueToast)
  

  在组件中使用

  

  image.png
  
  

  测试没问题，可以发布啦！

  首先在npm官网上注册一个npm账号
  然后在发布项目的根目录下输入命令

  $ npm adduser
  

  输入npm账号，输入用户名、密码、邮箱
  

  

  image.png
  
     在这里特别说明一点，在npm注册的账号一定要把镜像切换到 http://registry.npmjs.org/.中来，如果你使用的是淘宝镜像或者别的镜像请切换到此镜像，否则会报错
  命令：

  $ npm config set registry https://registry.npmjs.org/
  

  登陆成功后进行 npm publish发布

  $ npm publish
  

  如果报下面这个错，则在邮箱中核实一下发来的邮件即可
  发布成功后到自己npm上可以看到刚才发的npm包

  
  
  

  image.png

  发布成功后，当别人想使用你的插件时就可以用 npm install 组件名称 来安装了！

  6、后记

  折腾了很久，终于把自己的第一个插件的雏形发布出去了，这是一个很简单的插件，以后会继续维护它，添加更多的实用功能。

  • 更新npm包：

  $ npm version   ;
  $ npm publish
  
  使用命令：npm version 进行修改，update_type 有三个参数，第一个是patch,  第二个是minor,第三个是 major，
    patch：这个是补丁的意思，补丁最合适；
    minor：这个是小修小改；
    major：这个是大改咯；
   具体咋用：
     比如我想来个1.0.1版本，注意，是最后一位修改了增1，那么命令：npm version patch    回车就可以了；
     比如我想来个1.1.0版本，注意，是第二位修改了增1，那么命令： npm version minor    回车就可以了；
     比如我想来个2.0.0版本，注意，是第一位修改了增1，那么命令： npm version major     回车就可以了；
  

  • npm unpublish --force：移除一个发布包（也可以移除指定版本的包）
  • npm logout：登出用户