資訊專欄INFORMATION COLUMN
摘要：發(fā)布到注冊進入官網(wǎng)，注冊帳號登錄并發(fā)布提示報錯是因為注冊完后沒有進行郵箱驗證，驗證完成即可發(fā)布成功參考文獻如何制作并發(fā)布一個的組件的包發(fā)布自己第一個組件包基于的文字跑馬燈組件
最近在網(wǎng)上找到一個 網(wǎng)頁制作輔助工具-jQuery標尺參考線插件 ，覺得在現(xiàn)在的一個項目中能用的上，插件是基于JQuery的，但是現(xiàn)在的項目是用vue寫的。So...,項目地址
就照葫蘆畫瓢改裝成了Vue組件，總的來說算是一個用處較多的組件，于是乎，就想著把它上傳到Npm上分享出來。
以前只用過別人的包，這一次自己上傳一個樂呵樂呵...順便記錄發(fā)布一下過程。
https://github.com/gorkys/vue...
初始化項目這里用的是webpack-simple,可以理解為精簡版的vue-cli
vue init webpack-simple vue-ruler-tool
安裝好后再就是一頓常規(guī)操作
npm install npm dev
項目結(jié)構(gòu)
原結(jié)構(gòu)中紅框里是放的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"
], // 指定關(guān)鍵字
"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進入官網(wǎng)，注冊帳號
npm login npm publish
提示報錯是因為注冊完后沒有進行郵箱驗證，驗證完成即可發(fā)布成功參考文獻
如何制作并發(fā)布一個vue的組件的npm包
發(fā)布自己第一個npm 組件包（基于Vue的文字跑馬燈組件）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97871.html
摘要：組件監(jiān)聽自定義事件。組件觸發(fā)自定義事件。生命周期鉤子函數(shù)，后組件的所有的事件監(jiān)聽器會被移除。技術(shù)點總結(jié)組件設計的思想包括單數(shù)據(jù)流事件中心，核心是組件通信。完善給彈出日期面板和關(guān)閉日期面板增加組件自定義事件即調(diào)用觸發(fā)和事件。預覽 組件庫官網(wǎng) github地址 如果喜歡各位小哥哥小姐姐給個小星星鼓勵一下哈， 請勿在生產(chǎn)環(huán)境中使用，供學習&交流~~ showImg(https://user...
摘要：最近在網(wǎng)上找到一個網(wǎng)頁制作輔助工具標尺參考線插件，覺得在現(xiàn)在的一個項目中能用的上，插件是基于的，但是現(xiàn)在的項目是用寫的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在網(wǎng)上找到一個 網(wǎng)頁制作輔助工具-jQuery標尺參考線插件 ，覺得在現(xiàn)在的一...
摘要：最近在網(wǎng)上找到一個網(wǎng)頁制作輔助工具標尺參考線插件，覺得在現(xiàn)在的一個項目中能用的上，插件是基于的，但是現(xiàn)在的項目是用寫的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在網(wǎng)上找到一個 網(wǎng)頁制作輔助工具-jQuery標尺參考線插件 ，覺得在現(xiàn)在的一...
摘要：引言如果你自己做了一個感覺還不錯的組件，而想分享給別人或者發(fā)布到上，那該怎么辦呢分享一個大神做的一個模板，這個模板集成了本地測試和打包發(fā)布，項目地址附上我的捂臉使用安裝發(fā)布打包最后別人就可以這樣使用你的組件了補 引言 如果你自己做了一個感覺還不錯的vue組件，而想分享給別人或者發(fā)布到npm上，那該怎么辦呢？ vue-share-components 分享一個大神做的一個 vue 模板，...
閱讀 2351·2021-11-24 10:27
閱讀 3593·2019-08-30 15:55
閱讀 3355·2019-08-30 15:53
閱讀 2355·2019-08-29 17:27
閱讀 1445·2019-08-26 13:47
閱讀 3558·2019-08-26 10:28
閱讀 927·2019-08-23 15:59
閱讀 2871·2019-08-23 15:19
