vue元件從開發到發布

2021-08-29 02:50:59 字數 2495 閱讀 1240

元件化是前端開發非常重要的一部分，從業務中解耦出來，可以提高專案的**復用率。更重要的是我們還可以打包發布，俗話說集體的力量是偉大的，正因為有許許多多的開源貢獻者，才有了現在的世界。

不想造輪子的工程師，當不了合格的搬運工。讓我們來了解一下vue元件從開發到打包發布流程，並配置github主頁。

本文以 vue-clock2 元件為例，歡迎star_~~ 專案位址

|-- node_modules


|-- src


| |-- index.js


| |-- vue-clock.vue


|-- docs


| |-- index.html


| |-- index.css


|-- dist
vue元件開發相對來講還是比較容易的，建立乙個vue-clock.vue檔案，元件的相關邏輯實現。

該元件主要實現乙個基於time屬性輸入，顯示對應時間的鐘錶樣式。

}
通過元素畫出鐘錶的樣式，基於css3的transform屬性旋轉出每個時間點。

因為鐘錶的時針並不是直接跳到下乙個點的，所以需要計算出不同分鐘時，時鐘指標的旋轉角度。

後續增加了不指定時間的情況，顯示當前時間並每分鐘自動更新。

export default ;


},props: ["time"],


watch: 


},methods: , 60 * 1000);}},


showtime()  else 


let hour = +times[0];


hour = hour > 11 ? hour - 12 : hour;


let minute = +times[1];


let hourangle = hour * 30 + minute * 6 / 360 * 30;


let minuteangle = minute * 6;


this.hourrotate = `rotatez($deg)`;


this.minuterotate = `rotatez($deg)`;}},


mounted() ,


destroyed() 


};
還有一些鐘錶的布局樣式，可以直接在專案裡檢視。vue-clock.vue

接著我們需要丟擲元件，以便在專案中引入使用。

// src/index.js


import clock from './vue-clock.vue';


export default clock;


if (typeof window !== 'undefined' && window.vue)
這裡，元件開發的部分已經完成了，喝杯咖啡，check一下**，我們要把它打包發布到npm上。

打包前確認一下webpack的配置檔案輸出。

output:
打包元件檔案到dist資料夾中。

npm run build
如果使用**映象的，需要先修正一下映象源。

npm config set registry
// 檢視登入人


npm whoami


// 登入


npm login


// 發布


npm publish
如果看到類似資訊，說明發布成功。

npm notice


+ [email protected]
把專案上傳到github託管，配置乙份基本readme.md說明文件。

因為元件已經發布到npm上，所以可以配置幾個徽章在readme中。

// npm 版本


[npm version](


[npm download](
更多的徽章配置可以檢視shields

接著描述一下元件的引入和使用方法：

安裝：


npm install vue-clock2


使用：
更詳細的互動或是屬性說明就交給文件來解決了。

在 github 專案上通過settings指定github pages

元件文件說明應包括：

開發 -> 發布 -> 託管

乙個元件輪子的製作流程大致介紹完了，希望本文可以幫助到您。

nuxt從開發到部署

經過幾個週六週日的嘗試，終於解決了服務端渲染中的常見問題，也成功說服了公司新專案採用前後端分離的解決方案，當seo不在是問題的時候，或許才是我們搞前端的真正的春天，其中也遇到了一些小坑，nuxt.js官方還是很給力的，提issue後很積極的給予幫助，再次感謝nuxt.js的開發團隊。第乙個攔路虎就是...

從開發到架構學習 一

公司oa 產品到現在發展有3 年多了，一直有人在說系統很爛，不穩定，效能差，可用性不好。這些結果的原因是什麼呢？先看下現狀，存在的問題 1 系統不穩定，偶爾出現無規律的錯誤，中斷類的。分析這些日誌，屬於底層 難定位的多。沒有引起足夠的重視去分析？2 速度慢，在部分子系統中操作時，包含的業務流程太多，...

從專案開發到雲端架構 10

雲計算是 是一種基於網際網路的計算方式，通過這種方式，共享的軟硬體資源和資訊可以按需提供給計算機和其他裝置。整個執行方式很像電網。雲計算描述了一種基於網際網路的新的it 服務增加 使用和交付模式，通常涉及通過網際網路來提供動態易擴充套件而且經常是虛擬化的資源。雲其實是網路 網際網路的一種比喻說法。典...