So erstellen Sie eine öffentliche Front-End-Vue-Komponentenbibliothek

Vorwort

Während des Entwicklungsprozesses war unsere Seite sehr komplex und erforderte, dass jedes Teammitglied unabhängig eine Funktion entwickelte und sich schließlich auf einen Kampf einließ. Dies erfordert eine öffentliche Komponentenbibliothek, damit jeder gemeinsame Komponenten verwenden kann, um die Entwicklung zu beschleunigen und die Entwicklungseffizienz zu verbessern.

Vue.js ist derzeit eines der angesagtesten Frontend-Frameworks und wird von vielen Unternehmen im In- und Ausland übernommen. Daher wird in der Praxis der Aufbau einer Vue.js-Komponentenbibliothek, die für Ihr eigenes Unternehmen geeignet ist, für viele Teams, die ein Framework benötigen, zu einem Pflichtkurs.

Dieser Artikel führt Sie Schritt für Schritt zum Aufbau einer für Ihr Unternehmen geeigneten Vue.js-Komponentenbibliothek als Referenz.

1. Aufbau einer Komponentenbibliothek

Vue-Komponente ist ein abstraktes Konzept, das darin besteht, einige komplexe DOM-Strukturen und -Stile der Schnittstelle in einer unabhängigen Komponente zu kapseln, sodass mehrere Schnittstellen darauf verweisen können, um ihre jeweilige Geschäftslogik zu verarbeiten.

1. Bestimmen Sie die technische Lösung für die Komponentenbibliothek

Bevor wir die Komponentenbibliothek erstellen, müssen wir die technische Lösung für die Komponentenbibliothek festlegen. Es gibt zwei gängige Methoden: die Einführung von Komponenten über Bibliotheken von Drittanbietern und die unabhängige Entwicklung von Komponenten.

Die Einführung von Komponenten über eine Drittanbieterbibliothek kann die Entwicklungseffizienz und die Wartungskosten verbessern. Der Nachteil besteht darin, dass sie den Spezifikationen der Drittanbieterkomponentenbibliothek entsprechen müssen und die Flexibilität relativ ist arm.

Unabhängig entwickelte Komponenten, Sie können die Komponentenbibliothek frei anpassen und den Spezifikationen des Unternehmens entsprechen, aber es erfordert mehr Aufwand bei Entwicklung, Wartung und Updates.

Basierend auf der tatsächlichen Situation entscheiden wir uns dafür, Komponenten unabhängig voneinander zu entwickeln, um die Verwaltung und Wartung zu erleichtern.

2. Initialisieren Sie das Projekt

Verwenden Sie Vue CLI 3, um schnell das Projektgerüst zu erstellen.

    $ vue create my-component-lib
    $ cd my-component-lib

Hier wählen wir die manuelle Konfiguration mit Babel, Router und Vuex.

Als nächstes fügen wir dem Projekt weniger und sass Unterstützung hinzu.

    $ npm install less less-loader node-sass sass-loader -D

Nach der Installation können wir einen neuen Assets-Ordner unter dem src-Ordner erstellen und eine Stildatei index.less zur Stilkontrolle der gesamten Komponentenbibliothek hinzufügen.

3. Komponenten entwickeln

Erstellen Sie unter dem src-Ordner einen Komponentenordner, um die entwickelten Komponenten zu platzieren. Gleichzeitig können wir zur Erleichterung der Wartung und Anzeige eine weitere index.js-Datei im Komponentenordner erstellen. Für die Verwaltung ist für jede Komponente ein separater Ordner erforderlich.

Hier schreiben wir eine Beispielkomponente von HelloWord.vue, um die Entwicklung der Komponentenbibliothek zu demonstrieren.

    <template>
      <div class="hello-world">
        <h1>Hello World</h1>
        <p>{{ message }}</p>
      </div>
    </template>

    <script>
    export default {
      name: 'HelloWorld',
      props: {
        message: {
          type: String,
          default: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    <style scoped>
    .hello-world {
      font-size: 14px;
      line-height: 24px;
      color: #333;
    }
    </style>

Hinweis: Der CSS-Stil der Komponente muss das Bereichsattribut hinzufügen, damit der Stil der aktuellen Komponente keine Auswirkungen auf andere Komponenten hat.

4. Komponenten registrieren

Es gibt im Wesentlichen zwei Möglichkeiten, Komponenten zu registrieren: globale Registrierung und lokale Registrierung.

Durch die globale Registrierung können wir überall auf Komponenten verweisen, während die lokale Registrierung nur innerhalb der aktuellen Komponente verwendet werden kann. Zur Vereinfachung der Verwaltung registrieren wir die Komponenten selbstverständlich in einer speziellen Datei.

Registrieren Sie die Komponente in der Projekteintragsdatei src/main.js:

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    import HelloWorld from '@/components/HelloWorld'

    Vue.config.productionTip = false

    Vue.component('HelloWorld', HelloWorld)

    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

An diesem Punkt können wir die HelloWorld-Komponente im Projekt verwenden.

    <template>
      <div class="container">
        <HelloWorld message="Welcome to my component library" />
      </div>
    </template>

2. Veröffentlichung der Komponentenbibliothek

Nachdem die Komponentenbibliothek entwickelt wurde, müssen wir sie auf npm veröffentlichen, damit Entwickler unsere Komponentenbibliothek über npm herunterladen und verwenden können.

1. Konfigurieren Sie den Verpackungsbefehl

Fügen Sie in der Datei package.json den folgenden Befehl hinzu:

    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build",
      "lib": "vue-cli-service build --target lib --name my-component-lib ./src/components/index.js"
    }

Im obigen Befehl haben wir einen lib-Befehl zum Packen der Komponentenbibliothek angepasst. Die nach dem Packen generierten Dateien werden platziert im dist-Ordner.

2. Benutzerdefinierte Verpackungskonfiguration

Um die verpackten Komponenten besser für die Verwendung geeignet zu machen, müssen wir eine neue vue.config.js-Datei im Projektstammverzeichnis erstellen und den folgenden Code hinzufügen:

    module.exports = {
      // 组件库名称
      outputDir: 'my-component-lib',
    
      // 配置打包的全局入口组件
      configureWebpack: {
        output: {
          libraryExport: 'default'
        },
        externals: {
          vue: {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
          }
        }
      },
    
      // 配置如何处理一些特殊的 CSS，如全局 CSS 的提取
      css: {
        extract: {
          filename: 'css/[name].css'
        }
      }
    }

Unter ihnen Der Parameter „outputDir“ stellt das Verpackungsausgabeverzeichnis dar. Der Parameter „configureWebpack“ stellt die Webpack-Konfiguration dar. Sie müssen den gepackten Eintrag und „libraryExport“ auf „Standard“ setzen, sodass Sie beim Importieren der Komponentenbibliothek nur X aus „my-component-lib“ importieren müssen. , und es ist nicht erforderlich, den Standardwert von X zu importieren. Der externals-Parameter stellt die Webpack-Konfiguration dar und das importierte Vue.js wird ignoriert.

3. Komponentenbibliotheksfreigabe

Führen Sie den Befehl npm run lib aus, um die Komponentenbibliothek zu packen:

    $ npm run lib

Nachdem das Packen abgeschlossen ist, veröffentlichen Sie es in npm:

    $ npm login
    $ npm publish

In anderen Projekten installieren Sie es über npm install my-component- lib Komponentenbibliothek:

    import HelloWorld from 'my-component-lib/components/HelloWorld'

    Vue.component('HelloWorld', HelloWorld)

3. Versionsverwaltung der Komponentenbibliothek

Bei der Entwicklung einer Komponentenbibliothek ist die Versionsverwaltung sehr wichtig. Wenn wir die Versionen der Komponentenbibliotheken nicht verwalten, können wir nichts unternehmen, sobald ein Fehler entdeckt wird. Darüber hinaus kommt es während des Entwicklungsprozesses zwangsläufig zu Versionsiterationsproblemen. Wenn Versionen nicht verwaltet werden, ist dies sehr verwirrend und beeinträchtigt die Entwicklungseffizienz des Teams.

Die Versionsverwaltungsmethode basiert auf der Git-Zweigverwaltung. Während des Entwicklungsprozesses muss jeder Zweig entsprechend entwickelt und getestet und schließlich mit dem Hauptzweig zusammengeführt werden, um die Version freizugeben.

4. Fazit

Durch die Einleitung dieses Artikels glaube ich, dass jeder bereits weiß, wie man eine Vue.js-Komponentenbibliothek erstellt, die für sein eigenes Unternehmen geeignet ist, und sie erfolgreich auf npm veröffentlicht. Die Entwicklung von Komponentenbibliotheken ist eines der Probleme, die das Front-End-Entwicklungsteam lösen muss. Daher müssen wir das relevante Wissen über die Entwicklung und Verwaltung von Komponentenbibliotheken flexibel beherrschen, um zur Entwicklung des Unternehmens und unserer selbst beizutragen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine öffentliche Front-End-Vue-Komponentenbibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!