vue組件從開發到發布的實現步驟

2019-11-19 12:32:21

字體：大中小

來源：轉載

供稿：網友

本文介紹了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+ vue-clock2@1.1.2

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