組件化是前端開發非常重要的一部分,從業務中解耦出來,可以提高項目的代碼複用率。更重要的是我們還可以打包發佈,俗話說集體的力量是偉大的,正因爲有許許多多的開源貢獻者,纔有了現在的世界。
不想造輪子的工程師,當不了合格的搬運工 。讓我們來了解一下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
組件文檔說明應包括:
- 組件引入方法
- 組件使用方法
- 一個簡單的例子
- 組件屬性描述說明
總結
開發 -> 發佈 -> 託管
一個組件輪子的製作流程大致介紹完了,希望本文可以幫助到您。