成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

貢獻(xiàn)你的力量 開(kāi)發(fā)一個(gè)Vue組件并發(fā)布到npm

melody_lql / 619人閱讀

摘要：注意可能會(huì)出現(xiàn)重名情況，這時(shí)候請(qǐng)使用你賬戶的命名空間修改你的別人引入的時(shí)候也要加命名空間最后還是留點(diǎn)私心，宣傳一下最近寫的一個(gè)滾動(dòng)組件，主要面向端，如果你有類似的需求不妨看看

最近在工作中寫了一個(gè)面向 PC 端的 Vue 滾動(dòng)組件，關(guān)于 PC 端的滾動(dòng)組件以前也用過(guò)一些，但是沒(méi)有找到特別滿意的，所以自己想著把這個(gè)組件開(kāi)源發(fā)布出去，希望能夠幫到和我有類似需求的人吧！

目標(biāo)

擁有 Dev 模式，能夠邊測(cè)試邊開(kāi)發(fā)組件

構(gòu)建完成后發(fā)布到 npm 上

這個(gè)組件能夠全局注冊(cè) 也能夠局部使用

擁有 demo 能力 依靠于 github 的 pages 功能 直接展現(xiàn)該組件的使用效果

構(gòu)建基本模版

首先我們需要 vue-cli 來(lái)為我們生成一個(gè)項(xiàng)目的初始模板。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue init webpack-simple 
cd project-name
npm init
git init

npm init 和 git init的過(guò)程就略過(guò)了

修改目錄

接下來(lái)在src/目錄下創(chuàng)建一個(gè) components 目錄，隨后在 components 目錄下建立你的組件，比如scrollbars.vue

繼續(xù)在src/下創(chuàng)建index.js 這個(gè) js 將會(huì)在 build 模式下作為入口 js 進(jìn)行打包,如果你要導(dǎo)出多個(gè)組件也是可以的，只要導(dǎo)出一個(gè)對(duì)象即可

import Scrollbars from "./components/scrollbars.vue"

Scrollbars.install = Vue => Vue.component(Scrollbars.name, Scrollbars)

export default Scrollbars
配置打包環(huán)境

為了方便我們的開(kāi)發(fā)，需要配置一下 webpack 的打包配置。

首先在 package.json 里增加一條腳本 dmeo 該命令的作用是一鍵打包出一個(gè)用于 demo 頁(yè)面的主 js 文件

"demo": "cross-env NODE_ENV=demo webpack --progress --hide-modules"

接下來(lái)就是比較核心的 webpack 配置

const NODE_ENV = process.env.NODE_ENV

// 為了方便在不同模式下的路徑配置，我們配置三個(gè)map對(duì)象來(lái)匹配具體的模式，減少?gòu)?fù)雜的判斷
// 三種基本模式
// 1 build - production 用于打包核心組件代碼 別人引入的就是這個(gè)文件
// 2 dev - development 開(kāi)發(fā)模式 調(diào)試你的組件
// 3 demo - 打包demo資源 打出來(lái)的js是包含完整的vue源碼的

const enteyMap = {
  production: "./src/index.js",
  development: "./src/main.js",
  demo: "./src/main.js"
}

const pathMap = {
  production: "./dist",
  development: "./demo",
  demo: "./demo"
}

const publicMap = {
  production: "/dist/",
  development: "/demo/",
  demo: "/demo/"
}

module.exports = {
  entry: enteyMap[NODE_ENV], // 引入路徑 build模式下直接引入組件自身
  output: {
    path: path.resolve(__dirname, pathMap[NODE_ENV]), // 輸出路徑
    publicPath: publicMap[NODE_ENV], // 資源引入路徑 為了方便我們的demo打包 開(kāi)發(fā)模式和demo模式相同
    filename: "vue-scrollbars.js", // 你的組件名稱
    library: "vue-scrollbars", // 填寫組件名稱即可 人家可以通過(guò)這個(gè)名稱來(lái)引入
    libraryTarget: "umd",
    umdNamedDefine: true
  }
}
進(jìn)行開(kāi)發(fā)

由于我們修改了 publicPath 我們需要修改一下index.html的 js 路徑

    
npm run dev

開(kāi)始開(kāi)發(fā)吧，盡情的在app.vue中引入你的組件并進(jìn)行調(diào)試開(kāi)發(fā)

創(chuàng)建demo 
npm run demo

打包完成后你可以嘗試在工程根目錄運(yùn)行http-server來(lái)檢查demo能否正常運(yùn)行。

到這一步你可以push到你的github倉(cāng)庫(kù)，并把gh-pages設(shè)置成master分支，那個(gè)地址應(yīng)該就能展示你的demo了，別忘了放到readme中讓大家看看哦！

發(fā)布

在最后的發(fā)布前記得在package.json里面填寫上版本，關(guān)鍵詞，描述，license等信息，并且寫好README.md,LICENSE等文件. 這樣可以更好的讓別人了解和使用你的項(xiàng)目哦。

npm login
npm publish

注意可能會(huì)出現(xiàn)重名情況，這時(shí)候請(qǐng)使用你賬戶的命名空間

修改你的 package.json "name": "@zhangzhengyi12/vue-scrollbars" 別人引入的時(shí)候也要
加命名空間

最后還是留點(diǎn)私心，宣傳一下最近寫的一個(gè)滾動(dòng)組件，主要面向 PC 端 ，如果你有類似的需求 不妨看看[https://github.com/zhangzheng...]

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99594.html

相關(guān)文章

  • Vue 2019開(kāi)發(fā)者圖譜

    摘要：為了便于您更清晰的理解的體系架構(gòu)，在這里我將為您展示年開(kāi)發(fā)者知識(shí)圖譜，它包含了所有開(kāi)發(fā)過(guò)程中的關(guān)鍵部分。在數(shù)據(jù)展示前端導(dǎo)入導(dǎo)出圖表面板數(shù)據(jù)綁定等場(chǎng)景無(wú)需大量代碼開(kāi)發(fā)和測(cè)試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。 作為 Vue 的初學(xué)者，您或許已經(jīng)聽(tīng)過(guò)很多關(guān)于它的專業(yè)術(shù)語(yǔ)了，例如：?jiǎn)雾?yè)面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等，您可能還聽(tīng)過(guò)和Vue經(jīng)常一起被提到的工具和庫(kù)，如Vuex、Webp...

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

  • Vue高效UI組件庫(kù)—iView開(kāi)發(fā)實(shí)踐

    摘要：它的文檔也是相當(dāng)詳細(xì)，每個(gè)功能都配有詳細(xì)說(shuō)明和實(shí)例代碼，直接復(fù)制就可以使用，我們也計(jì)劃在明年啟動(dòng)英文文檔翻譯計(jì)劃。明年會(huì)啟動(dòng)英文文檔翻譯計(jì)劃，也希望喜歡和支持，同時(shí)英語(yǔ)不錯(cuò)的同學(xué)可以加入我們，一起參與翻譯。 前段時(shí)間在微軟參加活動(dòng)，分享了 TalkingData 開(kāi)源的基于 Vue.js 的高效 UI 組件庫(kù) iView 的一些開(kāi)發(fā)經(jīng)驗(yàn)，現(xiàn)整理成文，和大家探討。 showImg(htt...

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

  • EggBorn.js：一款頂級(jí)Javascript全棧開(kāi)發(fā)框架

    摘要：是什么是一款頂級(jí)全棧開(kāi)發(fā)框架。漸進(jìn)式開(kāi)發(fā)由于模塊的高度內(nèi)聚，可以將業(yè)務(wù)以模塊的形式沉淀，在多個(gè)項(xiàng)目中重復(fù)使用，既可貢獻(xiàn)到開(kāi)源社區(qū)，也可部署到公司內(nèi)部私有倉(cāng)庫(kù)。模塊發(fā)布當(dāng)項(xiàng)目中的模塊代碼穩(wěn)定后，可以將模塊公開(kāi)發(fā)布，貢獻(xiàn)到開(kāi)源社區(qū)。 EggBorn.js是什么 EggBorn.js是一款頂級(jí)Javascript全棧開(kāi)發(fā)框架。 EggBorn.js是采用Javascript進(jìn)行全棧開(kāi)發(fā)的最佳...

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

  • vue.js使用vue-cli搭建一個(gè)SPA項(xiàng)目

    摘要：之所以寫這篇如何運(yùn)用腳手架自動(dòng)化構(gòu)建出一個(gè)項(xiàng)目的大架構(gòu)，主要是面向想入門的小伙伴。之前，我第一次接觸，一直摸不著頭腦，想在網(wǎng)上搜個(gè)接地氣的教程都找不到。 WHY 之所以寫這篇如何運(yùn)用腳手架自動(dòng)化構(gòu)建出一個(gè)項(xiàng)目的大架構(gòu)，主要是面向想入門vue的小伙伴。之前，我第一次接觸vue，一直摸不著頭腦，想在網(wǎng)上搜個(gè)接地氣的教程都找不到。SO，我以如何搭建結(jié)構(gòu)為開(kāi)始，向想入門vue的童鞋們把我僅有的...

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

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

0條評(píng)論

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