資訊專欄INFORMATION COLUMN
摘要：注意可能會出現(xiàn)重名情況，這時候請使用你賬戶的命名空間修改你的別人引入的時候也要加命名空間最后還是留點私心，宣傳一下最近寫的一個滾動組件，主要面向端，如果你有類似的需求不妨看看
最近在工作中寫了一個面向 PC 端的 Vue 滾動組件，關于 PC 端的滾動組件以前也用過一些，但是沒有找到特別滿意的，所以自己想著把這個組件開源發(fā)布出去，希望能夠幫到和我有類似需求的人吧！
目標
擁有 Dev 模式，能夠邊測試邊開發(fā)組件
構建完成后發(fā)布到 npm 上
這個組件能夠全局注冊 也能夠局部使用
擁有 demo 能力 依靠于 github 的 pages 功能 直接展現(xiàn)該組件的使用效果
構建基本模版首先我們需要 vue-cli 來為我們生成一個項目的初始模板。
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的過程就略過了
修改目錄接下來在src/目錄下創(chuàng)建一個 components 目錄，隨后在 components 目錄下建立你的組件，比如scrollbars.vue
繼續(xù)在src/下創(chuàng)建index.js 這個 js 將會在 build 模式下作為入口 js 進行打包,如果你要導出多個組件也是可以的，只要導出一個對象即可
import Scrollbars from "./components/scrollbars.vue" Scrollbars.install = Vue => Vue.component(Scrollbars.name, Scrollbars) export default Scrollbars配置打包環(huán)境
為了方便我們的開發(fā)，需要配置一下 webpack 的打包配置。
首先在 package.json 里增加一條腳本 dmeo 該命令的作用是一鍵打包出一個用于 demo 頁面的主 js 文件
"demo": "cross-env NODE_ENV=demo webpack --progress --hide-modules"
接下來就是比較核心的 webpack 配置
const NODE_ENV = process.env.NODE_ENV
// 為了方便在不同模式下的路徑配置，我們配置三個map對象來匹配具體的模式，減少復雜的判斷
// 三種基本模式
// 1 build - production 用于打包核心組件代碼 別人引入的就是這個文件
// 2 dev - development 開發(fā)模式 調試你的組件
// 3 demo - 打包demo資源 打出來的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打包 開發(fā)模式和demo模式相同
filename: "vue-scrollbars.js", // 你的組件名稱
library: "vue-scrollbars", // 填寫組件名稱即可 人家可以通過這個名稱來引入
libraryTarget: "umd",
umdNamedDefine: true
}
}
進行開發(fā)
由于我們修改了 publicPath 我們需要修改一下index.html的 js 路徑
npm run dev
開始開發(fā)吧，盡情的在app.vue中引入你的組件并進行調試開發(fā)
創(chuàng)建demonpm run demo
打包完成后你可以嘗試在工程根目錄運行http-server來檢查demo能否正常運行。
到這一步你可以push到你的github倉庫，并把gh-pages設置成master分支，那個地址應該就能展示你的demo了，別忘了放到readme中讓大家看看哦！
發(fā)布在最后的發(fā)布前記得在package.json里面填寫上版本，關鍵詞，描述，license等信息，并且寫好README.md,LICENSE等文件. 這樣可以更好的讓別人了解和使用你的項目哦。
npm login npm publish
注意可能會出現(xiàn)重名情況，這時候請使用你賬戶的命名空間
修改你的 package.json "name": "@zhangzhengyi12/vue-scrollbars" 別人引入的時候也要
加命名空間
最后還是留點私心，宣傳一下最近寫的一個滾動組件，主要面向 PC 端 ，如果你有類似的需求 不妨看看[https://github.com/zhangzheng...]
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/99594.html
摘要：為了便于您更清晰的理解的體系架構，在這里我將為您展示年開發(fā)者知識圖譜，它包含了所有開發(fā)過程中的關鍵部分。在數(shù)據(jù)展示前端導入導出圖表面板數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風險。 作為 Vue 的初學者，您或許已經(jīng)聽過很多關于它的專業(yè)術語了，例如：單頁面應用程序、異步組件、服務器端呈現(xiàn)等，您可能還聽過和Vue經(jīng)常一起被提到的工具和庫，如Vuex、Webp...
摘要：它的文檔也是相當詳細，每個功能都配有詳細說明和實例代碼，直接復制就可以使用，我們也計劃在明年啟動英文文檔翻譯計劃。明年會啟動英文文檔翻譯計劃，也希望喜歡和支持，同時英語不錯的同學可以加入我們，一起參與翻譯。 前段時間在微軟參加活動，分享了 TalkingData 開源的基于 Vue.js 的高效 UI 組件庫 iView 的一些開發(fā)經(jīng)驗，現(xiàn)整理成文，和大家探討。 showImg(htt...
摘要：是什么是一款頂級全棧開發(fā)框架。漸進式開發(fā)由于模塊的高度內聚，可以將業(yè)務以模塊的形式沉淀，在多個項目中重復使用，既可貢獻到開源社區(qū)，也可部署到公司內部私有倉庫。模塊發(fā)布當項目中的模塊代碼穩(wěn)定后，可以將模塊公開發(fā)布，貢獻到開源社區(qū)。 EggBorn.js是什么 EggBorn.js是一款頂級Javascript全棧開發(fā)框架。 EggBorn.js是采用Javascript進行全棧開發(fā)的最佳...
摘要：之所以寫這篇如何運用腳手架自動化構建出一個項目的大架構，主要是面向想入門的小伙伴。之前，我第一次接觸，一直摸不著頭腦，想在網(wǎng)上搜個接地氣的教程都找不到。 WHY 之所以寫這篇如何運用腳手架自動化構建出一個項目的大架構，主要是面向想入門vue的小伙伴。之前，我第一次接觸vue，一直摸不著頭腦，想在網(wǎng)上搜個接地氣的教程都找不到。SO，我以如何搭建結構為開始，向想入門vue的童鞋們把我僅有的...
閱讀 3722·2021-10-12 10:11
閱讀 1104·2021-09-22 15:42
閱讀 3559·2019-08-30 13:06
閱讀 969·2019-08-29 17:05
閱讀 1706·2019-08-29 12:21
閱讀 2448·2019-08-29 11:31
閱讀 1248·2019-08-23 18:37
閱讀 1321·2019-08-23 14:58
