最近在網上找到一個 網頁製做輔助工具-jQuery標尺參考線插件 ,以爲在如今的一個項目中能用的上,插件是基於JQuery的,可是如今的項目是用vue寫的。So...,
就照葫蘆畫瓢改裝成了Vue組件,總的來講算是一個用處較多的組件,因而乎,就想着把它上傳到Npm上分享出來。
之前只用過別人的包,這一次本身上傳一個樂呵樂呵...順便記錄發佈一下過程。
https://github.com/gorkys/vue...vue
這裏用的是webpack-simple
,能夠理解爲精簡版的vue-cli
webpack
vue init webpack-simple vue-ruler-tool
安裝好後再就是一頓常規操做git
npm install npm dev
項目結構es6
原結構中紅框裏是放的vue的logo圖片,用不着的東西,因此這裏就把改爲了組件文件夾與組件文件
還須要在src
下面新建一個index.js
做爲入口文件,代碼:github
// src/index.js export { default } from './components/vue-ruler-tool'
{ "name": "vue-ruler-tool", "description": "vue標尺輔助線", "version": "1.0.0", "author": "gorkys", "license": "MIT", // 開源協議 // 採用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" }, // 項目官網的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": { ... } }
由於要用dist文件夾,因此在.gitignore文件中把dist/去掉。
// 原 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放到目錄中,在當前路徑下執行
npm install vue-ruler-tool-1.0.0.tgz
在新項目中引用組件就可使用了
在引用後報錯沒法解析,須要檢查webpack.config.js
配置的輸出文件路徑是否與package.json
同樣。web
進入官網,註冊賬號vue-cli
npm login npm publish
提示報錯是由於註冊完後沒有進行郵箱驗證,驗證完成便可發佈成功