vue組件從開發到發佈

時間 2019-12-05

標籤 vue 組件開發發佈简体版

原文原文鏈接

組件化是前端開發很是重要的一部分，從業務中解耦出來，能夠提升項目的代碼複用率。更重要的是咱們還能夠打包發佈，俗話說集體的力量是偉大的，正由於有許許多多的開源貢獻者，纔有瞭如今的世界。css

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

本文以 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 屬性輸入，顯示對應時間的鐘表樣式。vue

<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 屬性旋轉出每一個時間點。
由於鐘錶的時針並非直接跳到下一個點的，因此須要計算出不一樣分鐘時，時鐘指針的旋轉角度。
後續增長了不指定時間的狀況，顯示當前時間並每分鐘自動更新。node

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.vuewebpack

接着咱們須要拋出組件，以便在項目中引入使用。css3

// 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上。git

打包發佈

打包前確認一下 webpack 的配置文件輸出。github

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'vue-clock.min.js',
    library: 'Clock',
    libraryTarget: 'umd',
    umdNamedDefine: true
  }

打包組件文件到 dist 文件夾中。web

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

組件文檔說明應包括：