Einführung in den Produktionsprozess von Vue-Komponenten (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in den Produktionsprozess von Vue-Komponenten (mit Code). Ich hoffe, er wird Ihnen als Referenz dienen.

Komponentisierung ist ein sehr wichtiger Teil der Front-End-Entwicklung. Durch die Entkopplung vom Geschäft kann die Code-Wiederverwendungsrate des Projekts verbessert werden. Wichtiger ist, dass wir es auch verpacken und veröffentlichen können. Wie man so schön sagt: Die Macht des Kollektivs ist gerade wegen der vielen Open-Source-Mitwirkenden möglich.

Ein Ingenieur, der keine Räder bauen möchte, kann kein qualifizierter Träger sein. Werfen wir einen Blick auf den Prozess der Vue-Komponenten von der Entwicklung bis zur Verpackung und Veröffentlichung und konfigurieren Sie die Github-Homepage.

In diesem Artikel wird die Vue-Clock2-Komponente als Beispiel verwendet. Willkommen bei star^_^~~ Projektadresse

• Zielframework: vue

• Verpackungstool: Webpack

• Veröffentlichungsquelle: npm

• Code-Hosting: Github

Projektstruktur

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

• src: komponentenbezogener Code.

• node_modules: Komponentenabhängigkeitspaket.

• docs: Dokumentation, die Komponente kann so einfach wie eine einzelne Seite sein, oder es kann Vuepress verwendet werden.

• dist: Der Inhalt der gepackten Komponente. Im Allgemeinen verweist der Haupteintrag von package.json auf die Datei in diesem Ordner.

Komponentenentwicklung

Vue-Komponentenentwicklung ist relativ einfach. Erstellen Sie eine vue-clock.vue-Datei, um die relevante Logik der Komponente zu implementieren.

Diese Komponente implementiert hauptsächlich einen Uhrstil basierend auf time Attributeingaben, um die entsprechende Zeit anzuzeigen.

    <p>
        </p><p></p>
        <p></p>
        <p></p>
        <b>
            <span>{{h}}</span>
        </b>
    

zeichnet den Stil einer Uhr durch Elemente und dreht jeden Zeitpunkt basierend auf dem Attribut css3的transform.
Da der Stundenzeiger der Uhr nicht direkt zum nächsten Punkt springt, müssen Sie den Drehwinkel des Uhrzeigers bei verschiedenen Minuten berechnen.
In Zukunft wird für den Fall, dass keine Zeit angegeben ist, die aktuelle Zeit hinzugefügt und jede Minute automatisch aktualisiert.

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

Es gibt auch einige Layoutstile von Uhren, die direkt im Projekt angezeigt werden können. vue-clock.vue

Dann müssen wir die Komponente werfen, damit sie im Projekt eingeführt und verwendet werden kann.

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

Hier ist der Teil der Komponentenentwicklung abgeschlossen. Trinken Sie eine Tasse Kaffee und überprüfen Sie den Code. Wir werden ihn verpacken und auf npm veröffentlichen.

Paket und Freigabe

Bestätigen Sie die Konfigurationsdateiausgabe von webpack vor dem Packen.

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

Packen Sie Komponentendateien in den Ordner dist.

npm run build

npm-Release

Paket.json konfigurieren

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

Bei npm anmelden

Wenn Sie den Taobao-Spiegel verwenden, müssen Sie dies tun Korrigieren Sie es zuerst. Quelle spiegeln.

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

rrree

Wenn Sie ähnliche Informationen sehen, bedeutet das, dass die Veröffentlichung erfolgreich war.

// 查看登录人
npm whoami
// 登录
npm login

// 发布
npm publish

Github-Homepage

Laden Sie das Projekt zum Hosten auf Github hoch und konfigurieren Sie eine grundlegende README.md Dokumentation.
Da die Komponente auf npm veröffentlicht wurde, können in der README-Datei mehrere Abzeichen konfiguriert werden.

npm notice
+ vue-clock2@1.1.2

Weitere Badge-Konfigurationen finden Sie unter Schilder

Beschreiben Sie dann die Einführung und Verwendung der Komponenten:

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

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

Für eine detailliertere Interaktion oder Attributbeschreibung überlassen Sie es bitte dem Dokumentation Kommen Sie und lösen Sie es.
GitHub-Seiten über die Einstellungen im Github-Projekt angeben

Die Beschreibung der Komponentendokumentation sollte Folgendes enthalten:

• Komponenteneinführungsmethode

• Komponentenverwendungsmethode

• Ein einfaches Beispiel

• Komponentenattributbeschreibung Beschreibung

Zusammenfassung

Entwicklung-> Hosting

Der Produktionsprozess eines Komponentenrads wurde grob vorgestellt Artikel kann Ihnen helfen.

Das obige ist der detaillierte Inhalt vonEinführung in den Produktionsprozess von Vue-Komponenten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!