手把手教你發佈一個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鏡像的操做