成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

制作并發(fā)布第一個(gè)vue組件的npm包

bawn / 1060人閱讀

摘要：發(fā)布到注冊(cè)進(jìn)入官網(wǎng)，注冊(cè)帳號(hào)登錄并發(fā)布提示報(bào)錯(cuò)是因?yàn)樽?cè)完后沒有進(jìn)行郵箱驗(yàn)證，驗(yàn)證完成即可發(fā)布成功參考文獻(xiàn)如何制作并發(fā)布一個(gè)的組件的包發(fā)布自己第一個(gè)組件包基于的文字跑馬燈組件

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

https://github.com/gorkys/vue...

初始化項(xiàng)目

這里用的是webpack-simple,可以理解為精簡(jiǎn)版的vue-cli

vue init webpack-simple vue-ruler-tool

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

npm install
npm dev

項(xiàng)目結(jié)構(gòu)

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

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

// src/index.js
export { default } from "./components/vue-ruler-tool"
修改package.json 
{
  "name": "vue-ruler-tool",
  "description": "vue標(biāo)尺輔助線",
  "version": "1.0.0",
  "author": "gorkys",
  "license": "MIT",  // 開源協(xié)議
  // 采用commonJs入口文件，如果不配置，我們?cè)谄渌?xiàng)目中就不用import XX from XX來引用了，只能以包名作為起點(diǎn)來指定相對(duì)的路徑
  "main": "dist/index.js", 
  "jsnext:main": "src/index.js", // 采用es6模塊化入口
  "private": false, // 因?yàn)榻M件包是公用的，所以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"
  },
  // 項(xiàng)目官網(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 
因?yàn)橐胐ist文件夾，所以在.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
  }
...
｝
測(cè)試插件 
npm run build
npm pack
npm pack 之后，就會(huì)在當(dāng)前目錄下生成 一個(gè)vue-ruler-tool-1.0.0.tgz 的文件。 
打開一個(gè)新的vue項(xiàng)目，將vue-ruler-tool-1.0.0.taz放到目錄中，在當(dāng)前路徑下執(zhí)行
npm install vue-ruler-tool-1.0.0.tgz
在新項(xiàng)目中引用組件就可以使用了
報(bào)錯(cuò)

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

發(fā)布到npm
1、注冊(cè)

進(jìn)入官網(wǎng)，注冊(cè)帳號(hào)

2、登錄并發(fā)布
npm login
npm publish

提示報(bào)錯(cuò)是因?yàn)樽?cè)完后沒有進(jìn)行郵箱驗(yàn)證，驗(yàn)證完成即可發(fā)布成功

參考文獻(xiàn)

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/97871.html

相關(guān)文章

  • 少女風(fēng)vue組件庫制作全攻略~~

    摘要：組件監(jiān)聽自定義事件。組件觸發(fā)自定義事件。生命周期鉤子函數(shù)，后組件的所有的事件監(jiān)聽器會(huì)被移除。技術(shù)點(diǎn)總結(jié)組件設(shè)計(jì)的思想包括單數(shù)據(jù)流事件中心，核心是組件通信。完善給彈出日期面板和關(guān)閉日期面板增加組件自定義事件即調(diào)用觸發(fā)和事件。預(yù)覽 組件庫官網(wǎng) github地址 如果喜歡各位小哥哥小姐姐給個(gè)小星星鼓勵(lì)一下哈， 請(qǐng)勿在生產(chǎn)環(huán)境中使用，供學(xué)習(xí)&交流~~ showImg(https://user...

    springDevBird 評(píng)論0 收藏0

  • 基于vue的網(wǎng)頁標(biāo)尺輔助線工具(vue-ruler-tool)

    摘要：最近在網(wǎng)上找到一個(gè)網(wǎng)頁制作輔助工具標(biāo)尺參考線插件，覺得在現(xiàn)在的一個(gè)項(xiàng)目中能用的上，插件是基于的，但是現(xiàn)在的項(xiàng)目是用寫的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在網(wǎng)上找到一個(gè) 網(wǎng)頁制作輔助工具-jQuery標(biāo)尺參考線插件 ，覺得在現(xiàn)在的一...

    劉玉平 評(píng)論0 收藏0

  • 基于vue的網(wǎng)頁標(biāo)尺輔助線工具(vue-ruler-tool)

    摘要：最近在網(wǎng)上找到一個(gè)網(wǎng)頁制作輔助工具標(biāo)尺參考線插件，覺得在現(xiàn)在的一個(gè)項(xiàng)目中能用的上，插件是基于的，但是現(xiàn)在的項(xiàng)目是用寫的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在網(wǎng)上找到一個(gè) 網(wǎng)頁制作輔助工具-jQuery標(biāo)尺參考線插件 ，覺得在現(xiàn)在的一...

    codecraft 評(píng)論0 收藏0

  • 如何發(fā)布制作vue組件

    摘要：引言如果你自己做了一個(gè)感覺還不錯(cuò)的組件，而想分享給別人或者發(fā)布到上，那該怎么辦呢分享一個(gè)大神做的一個(gè)模板，這個(gè)模板集成了本地測(cè)試和打包發(fā)布，項(xiàng)目地址附上我的捂臉使用安裝發(fā)布打包最后別人就可以這樣使用你的組件了補(bǔ) 引言 如果你自己做了一個(gè)感覺還不錯(cuò)的vue組件，而想分享給別人或者發(fā)布到npm上，那該怎么辦呢？ vue-share-components 分享一個(gè)大神做的一個(gè) vue 模板，...

    smartlion 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

bawn

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<