vue元件從開發到釋出
元件化是前端開發非常重要的一部分，從業務中解耦出來，可以提高專案的程式碼複用率。更重要的是我們還可以打包釋出，俗話說集體的力量是偉大的，正因為有許許多多的開源貢獻者，才有了現在的世界。
不想造輪子的工程師，當不了合格的搬運工 。讓我們來了解一下vue元件從開發到打包釋出流程，並配置Github主頁。
本文以 vue-clock2 元件為例，歡迎star_~~ 專案地址
- 目標框架：vue
- 打包工具：webpack
- 釋出源：npm
- 程式碼託管：github
專案結構
|-- node_modules |-- src | |-- index.js | |-- vue-clock.vue |-- docs | |-- index.html | |-- index.css |-- dist
- src: 元件相關程式碼。
- node_modules: 元件依賴包。
- docs: 說明文件，元件簡單的可以單個頁面，也可以使用vuepress。
- dist: 打包後元件內容，一般 package.json 的 main 入口指向這個資料夾裡的檔案。
元件開發
vue元件開發相對來講還是比較容易的，建立一個 vue-clock.vue 檔案，元件的相關邏輯實現。
該元件主要實現一個基於 time 屬性輸入，顯示對應時間的鐘表樣式。
<div class="clock"> <div class="clock-circle"></div> <div class="clock-hour" :style="{transform:hourRotate}"></div> <div class="clock-minute" :style="{transform:minuteRotate}"></div> <b class="hour" v-for="h in timeList" :key="h"> <span>{{h}}</span> </b> </div>
通過元素畫出鐘錶的樣式，基於 css3的transform 屬性旋轉出每個時間點。
因為鐘錶的時針並不是直接跳到下一個點的，所以需要計算出不同分鐘時，時鐘指標的旋轉角度。
後續增加了不指定時間的情況，顯示當前時間並每分鐘自動更新。
export default { data() { return { timeList: [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], hourRotate: "rotatez(0deg)", minuteRotate: "rotatez(0deg)" }; }, props: ["time"], watch: { time() { this.show(); } }, methods: { show() { this.showTime(); if (this._timer) clearInterval(this._timer); if (!this.time) { this._timer = setInterval(() => { this.showTime(); }, 60 * 1000); } }, showTime() { let times; if (this.time) { times = this.time.split(":"); } else { const now = new Date(); times = [now.getHours(), now.getMinutes()]; } 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(${hourAngle}deg)`; this.minuteRotate = `rotatez(${minuteAngle}deg)`; } }, mounted() { this.show(); }, destroyed() { if (this._timer) clearInterval(this._timer); } };
還有一些鐘錶的佈局樣式，可以直接在專案裡檢視。vue-clock.vue
接著我們需要丟擲元件，以便在專案中引入使用。
// src/index.js
import Clock from './vue-clock.vue';
export default Clock;
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.component('clock', Clock);
}
這裡，元件開發的部分已經完成了，喝杯咖啡，check一下程式碼，我們要把它打包釋出到npm上。
打包釋出
打包前確認一下 webpack 的配置檔案輸出。
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'vue-clock.min.js',
library: 'Clock',
libraryTarget: 'umd',
umdNamedDefine: true
}
打包元件檔案到 dist 資料夾中。
npm run build
npm釋出
配置package.json
{
"name": "vue-clock2",
"description": "Vue component with clock",
"version": "1.1.2",
"author": "bestvist",
"keywords": [
"vue",
"component",
"clock",
"time"
],
"main": "dist/vue-clock.min.js",
"license": "MIT",
"homepage": "https://bestvist.github.io/vue-clock2/"
}
登入npm
如果使用淘寶映象的，需要先修正一下映象源。
npm config set registry https://registry.npmjs.org/
// 檢視登入人
npm whoami
// 登入
npm login
// 釋出
npm publish
如果看到類似資訊，說明發布成功。
npm notice
+ [email protected]
Github主頁
把專案上傳到github託管，配置一份基本 README.md 說明文件。
因為元件已經發布到npm上，所以可以配置幾個徽章在README中。
// npm 版本
[npm version](https://img.shields.io/npm/v/vue-clock2.svg)
// npm 下載量
[npm download](https://img.shields.io/npm/dt/vue-clock2.svg)
更多的徽章配置可以檢視shields
接著描述一下元件的引入和使用方法：
安裝：
npm install vue-clock2
使用：
<template>
<clock :time="time"></clock>
</template>
<script>
import Clock from 'vue-clock2';
export default {
components: { Clock },
data () {
return {
time: '10:40'
}
}
}
</script>
更詳細的互動或是屬性說明就交給文件來解決了。
在 github 專案上通過 settings 指定 GitHub Pages
元件文件說明應包括：
- 元件引入方法
- 元件使用方法
- 一個簡單的例子
- 元件屬性描述說明
總結
開發 -> 釋出 -> 託管
一個元件輪子的製作流程大致介紹完了，希望本文可以幫助到您。