手把手教你发布一个vue组件到npm上

最近公司项目比较多,不一样的项目中公用的组件,如何避免由于一个需求的变更,形成全部项目都要拿过来修改,咱们想到把公共的部分抽取出来作为一个组件,常见的组件模式有:

• 直接存放到项目中(须要在不一样的项目中拷贝)
• 发布到npm上公用的模块,

本文章介绍登陆组件如何从0开始建立一个vue组件发布到npm上本项目案例

1、依赖环境

• 一、node环境
• 二、vue-cli的脚手架

2、使用vue-cli构建一个项目及基本配置

• 一、建立一个基本的项目

  vue init webpack-simple maucash(项目名)
  复制代码

• 二、项目的基本结构

  

• 三、本项目是基于iview的基础上,须要根据官网的方式安装与配置iview链接地址

3、本地调试

• 一、在App.vue中直接引入本地的组件

  import maucashLogin from "./packages/maucash-login/maucash-login";
  复制代码

• 二、maucash-login组件和咱们本地写通常的vue组件同样的,附加组件之间的通信

4、本地组件测试没问题,改形成vue插件类型的

• 一、在组件的文件夹下建立一个index.js文件

  // 引入组件
  import MaucashLogin from './maucash-login'
  
  MaucashLogin.install = Vue => Vue.component(MaucashLogin.name, MaucashLogin);
  
  if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(MaucashLogin);
  }
  
  export default MaucashLogin
  复制代码

• 二、在与packages同级下建立一个index.js的文件(一个包下可能有多个组件)

  import Maucash from './packages/maucash-login/index.js';
  
  const components = [
    Maucash,
  ]
  
  const install = function(Vue, opts = {}) {
    components.map(component => {
      Vue.component(component.name, component);
    })
  }
  
  /* 支持使用标签的方式引入 */
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
  }
  
  export default {
    install,
    Maucash,
  }
  复制代码

5、修改配置文件

• 一、修改package.json文件

  {
    "name": "maucash",
    "description": "maucash中经常使用组件抽取",
    "version": "1.0.2",
    "author": "kuangshp <kuangshp@126.com>",
    // 开源协议
    "license": "MIT",
    // 由于组件包是公用的，因此private为false
    "private": false,
    // 配置main结点，若是不配置，咱们在其余项目中就不用import XX from '包名'来引用了，只能以包名做为起点来指定相对的路径
    "main": "dist/maucash.js",
    "scripts": {
      "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
      "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "dependencies": {
      "axios": "^0.18.0",
      "iview": "^2.14.1",
      "style-loader": "^0.23.1",
      "url-loader": "^1.1.2",
      "vue": "^2.5.11"
    },
    // 指定代码所在的仓库地址
    "repository": {
      "type": "git",
      "url": "git+git@git.xxxx.com:maucash/maucash.git"
    },
    // 指定打包后,包中存在的文件夹
    "files": [
      "dist",
      "src"
    ],
    // 指定关键词
    "keywords": [
      "vue",
      "maucash",
      "code",
      "maucash code"
    ],
    // 项目官网的地址
    "homepage": "https://github.com/kuangshp/maucash",
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ],
    "devDependencies": {
      "babel-core": "^6.26.0",
      "babel-loader": "^7.1.2",
      "babel-plugin-transform-runtime": "^6.23.0",
      "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",
      "node-sass": "^4.5.3",
      "sass-loader": "^6.0.6",
      "vue-loader": "^13.0.5",
      "vue-template-compiler": "^2.4.4",
      "webpack": "^3.6.0",
      "webpack-dev-server": "^2.9.1"
    }
  }
  复制代码

• 二、修改.gitignore文件

  由于要用dist文件夹，因此在.gitignore文件中把dist/去掉。

• 三、修改webpack.config.js文件

  var path = require('path')
  var webpack = require('webpack')
  const NODE_ENV = process.env.NODE_ENV;
  
  module.exports = {
    entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      publicPath: '/dist/',
      filename: 'maucash.js',
      library: 'maucash',
      libraryTarget: 'umd',
      umdNamedDefine: true
    },
    ...
  }  
  复制代码

6、本地测试本身的包文件

• 一、本地打包

  npm run build
  # 本地生成一个maucash-1.0.1.tgz的包
  npm pack
  复制代码

• 二、本地测试(在别的项目中)

  npm install 路径/maucash-1.0.1.tgz
  复制代码

• 三、在本地项目的main.js中

  import Maucash from 'maucash';
  Vue.use(Maucash);
  复制代码

• 四、在须要使用的地方

  <maucash-login :baseUrl="baseUrl" :headers="headers" @loginHandle="loginHandle"/>
  复制代码

• 五、本地测试没问题就能够发布到npm上

7、发布到npm上(注意镜像地址要指向npm的地址)

• 一、到npm上注册一个帐号

• 二、登陆

  npm login
  复制代码

• 三、添加用户信息

  npm adduser
  复制代码

• 四、发布到远程仓库(npm)上

  npm publish
  复制代码

• 五、删除远程仓库的包

  npx force-unpublish package-name '缘由描述'
  复制代码

8、补充知识关于本地多个npm镜像的操做