Componentization is a very important part of front-end development. Decoupling from business can improve the code reuse rate of the project. More importantly, we can pack and distribute. As the saying goes, the collective power is great, because there are so many open source contributors, we have the world today.

Engineers who don't want to build wheels can't be qualified porters. Let's take a look at the vue component development to packaging release process, and configure the Github home page.

• Target framework: vue
• Packaging tool: webpack
• Publishing source: npm
• Code hosting: github

Project structure

|-- node_modules
|-- src
| |-- index.js
| |-- vue-clock.vue
|-- docs
| |-- index.html
| |-- index.css
|-- dist

• src: Component-related code.
• node_modules: Component dependency packages.
• docs: Description documents, simple components can be a single page, can also be used vuepress.
• dist: Component content after packaging. Generally, the main entry of package.json points to the file in this folder.

Component development

Vue component development is relatively easy, create a vue-clock.vue file, component related logic implementation.

This component mainly implements a time attribute input, which shows the clock style corresponding to the 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>

By drawing the style of the clock through the elements, each time point is rotated based on the transform ation attribute of css3.
Because the clocks do not jump directly to the next point, it is necessary to calculate the rotation angle of the clock pointer in different minutes.
Subsequently, the case of no specified time is added, the current time is displayed and updated automatically every minute.

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);
    }
};

There are also some clocks layout styles that can be viewed directly in the project. vue-clock.vue

Then we need to throw out the components to introduce usage in the project.

    // src/index.js
    import Clock from './vue-clock.vue';
    export default Clock;
    if (typeof window !== 'undefined' && window.Vue) {
        window.Vue.component('clock', Clock);
    }

Here, the component development part has been completed, have a cup of coffee, check the code, we want to package and publish it to npm.

Package release

Confirm the configuration file output of webpack before packaging.

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

Package component files into dist folders.

npm run build

npm release

Configure 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/"
}

Login npm

If you use Taobao mirror, you need to modify the mirror source first.

npm config set registry https://registry.npmjs.org/

// View loggers
npm whoami
// Sign in
npm login

// Release
npm publish

If you see similar information, the release is successful.

npm notice
+ vue-clock2@1.1.2

Github home page

Upload the project to github hosting and configure a basic README.md description document.
Because components have been published on npm, several badges can be configured in README.

// npm version
[npm version](https://img.shields.io/npm/v/vue-clock2.svg)

// npm Download
[npm download](https://img.shields.io/npm/dt/vue-clock2.svg)

More badge configurations can be viewed shields

Then describe how components are introduced and used:

Installation:
npm install vue-clock2

//Use:
<template>
  <clock :time="time"></clock>
</template>

<script>
  import Clock from 'vue-clock2';
  export default {
    components: { Clock },
    data () {
      return {
          time: '10:40'
      }
    }
  }
</script>

More detailed interaction or attribute descriptions are handed over to the document for resolution.
Specify GitHub Pages on the github project through settings

Component documentation should include:

• Component introduction method
• Component usage method
• A simple example
• Description of component attributes

summary

The production process of a component wheel has been described in general. I hope this article can help you.

Original link