最近在網(wǎng)上找到一個 網(wǎng)頁制作輔助工具-jQuery標尺參考線插件 ，覺得在現(xiàn)在的一個項目中能用的上，插件是基于JQuery的，但是現(xiàn)在的項目是用vue寫的。So...,
就照葫蘆畫瓢改裝成了Vue組件，總的來說算是一個用處較多的組件，于是乎，就想著把它上傳到Npm上分享出來。
以前只用過別人的包，這一次自己上傳一個樂呵樂呵...順便記錄發(fā)布一下過程。

項目地址

https://github.com/gorkys/vue-ruler-tool

初始化項目

這里用的是webpack-simple,可以理解為精簡版的vue-cli

vue init webpack-simple vue-ruler-tool

安裝好后再就是一頓常規(guī)操作

npm install
npm dev

項目結(jié)構

項目結(jié)構

原結(jié)構中紅框里是放的vue的logo圖片，用不著的東西，所以這里就把改成了組件文件夾與組件文件

還需要在src下面新建一個index.js作為入口文件，代碼：

// src/index.js
export { default } from './components/vue-ruler-tool'

修改package.json

{
  "name": "vue-ruler-tool",
  "description": "vue標尺輔助線",
  "version": "1.0.0",
  "author": "gorkys",
  "license": "MIT",  // 開源協(xié)議
  // 采用commonJs入口文件，如果不配置，我們在其他項目中就不用import XX from XX來引用了，只能以包名作為起點來指定相對的路徑
  "main": "dist/index.js", 
  "jsnext:main": "src/index.js", // 采用es6模塊化入口
  "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"
  },
// 指定代碼所在的倉庫地址
  "repository": {
    "type": "git",
    "url": "https://github.com/mauricius/vue-draggable-resizable.git"
  },
// 提交bug的地址
  "bugs": {
    "url": "https://github.com/mauricius/vue-draggable-resizable/issues"
  },
  // 項目官網(wǎng)的url
  "homepage": "https://github.com/mauricius/vue-draggable-resizable",
  "keywords": [
    "vue",
    "component",
    "dragabble",
    "resizable"
  ], // 指定關鍵字
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
   ...
  }
}

修改.gitignore

因為要用dist文件夾，所以在.gitignore文件中把dist/去掉。

修改webpack.config.js

// 原
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }
...
}
// 新
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'index.js',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
...
｝

測試插件

npm run build
npm pack

npm pack 之后，就會在當前目錄下生成 一個vue-ruler-tool-1.0.0.tgz 的文件。
打開一個新的vue項目，將vue-ruler-tool-1.0.0.taz放到目錄中，在當前路徑下執(zhí)行

npm install vue-ruler-tool-1.0.0.tgz

在新項目中引用組件就可以使用了

報錯

在引用后報錯無法解析，需要檢查webpack.config.js配置的輸出文件路徑是否與package.json一樣。

發(fā)布到npm

1、注冊

進入官網(wǎng)，注冊帳號

2、登錄并發(fā)布

npm login
npm publish

登錄

提示報錯是因為注冊完后沒有進行郵箱驗證，驗證完成即可發(fā)布成功

成功

參考文獻

如何制作并發(fā)布一個vue的組件的npm包
發(fā)布自己第一個npm 組件包（基于Vue的文字跑馬燈組件）