Vue kapselt Plug-Ins von Drittanbietern und veröffentlicht sie auf npm-Instanzen

In diesem Artikel wird hauptsächlich die Methode zum Kapseln von Drittanbieter-Plug-Ins und deren Veröffentlichung in npm vorgestellt. Er erklärt hauptsächlich, wie man Drittanbieter-Plug-Ins in Vue-Plug-Ins kapselt, die Konfiguration vereinfacht und sie mit einem solchen installiert Klicken Sie hier, um Ideen zu finden. Der Artikel ist etwas lang, also haben Sie etwas Geduld. Der Herausgeber findet es ziemlich gut, deshalb möchte ich es jetzt mit Ihnen teilen und es als Referenz für alle zur Verfügung stellen. Folgen wir dem Herausgeber und werfen wir einen Blick darauf. Ich hoffe, es kann allen helfen.

Gitment

Gitment ist ein Kommentar-Plug-In, das auf der Github Issues-Verpackung basiert. Verwenden Sie dieses Plug-In als Demonstration und kapseln Sie es in ein Vue-Plug-In -In. vue-gitment, das Plug-in wurde auf npm veröffentlicht und in seinem eigenen Open-Source-Projekt vueblog installiert.

Dieser Befehl erstellt das Verzeichnis unseres Projekts, erstellt Ordner und Dateien und erstellt die endgültige Struktur so

Das lib-Verzeichnis ist unser Plug-in-Verzeichnis, die anderen Standardeinstellungen sind nur

vue init webpack-simple vue-gitment

Konfigurationselemente ändern

Ändern Sie zunächst package.json

Fügen Sie das Abhängigkeitsgitment zu den Abhängigkeiten hinzu. Main ist der Dateieintrag, nachdem wir es gepackt haben Sie können den Befehl npm init verwenden, um eine package.json zu generieren

Webpack.config.js ändern

{
 "name": "vue-gitment",
 "version": "0.1.1",
 "description": "A comment plugin by gitment",
 "main": "dist/vue-gitment.js",
 "directories": {
  "dist": "dist"
 },
 "scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/vue-blog/vue-gitment.git"
 },
 "dependencies": {
  "gitment": "^0.0.3",
  "vue": "^2.3.3"
 },
 "devDependencies": {
 },
 "author": "wmui",
 "license": "MIT",
 "bugs": {
  "url": "https://github.com/vue-blog/vue-gitment/issues"
 },
 "homepage": "https://github.com/vue-blog/vue-gitment#readme"
}

Wir müssen nur konfigurieren den Ein- und Ausgang. Löschen Sie nicht die Standardkonfiguration, da wir das Plug-in später entwickeln und die Arbeitswirkung überprüfen müssen

Index.html ändern

Da wir die Webpack-Konfiguration geändert haben, müssen wir natürlich den Quellcode des Skripts ändern

Plug-in-Verpackung

Der Inhalt von VueComment.vue lautet wie folgt

Ich glaube, jeder, der mit Vue vertraut ist, kann es auf einen Blick verstehen Die Renderfunktion ist eine Methode des Gitment-Objekts. Keine Sorge, sie ist dieselbe wie die von uns entwickelte Komponente

index.js gekapselte Komponente

<template>
 <p v-comment="options"></p>
</template>
<script>
// 引入依赖项
import Gitment from &#39;gitment&#39;
export default {
 name: &#39;vue-comment&#39;,
 props: [&#39;options&#39;],
 directives: {
  // 自定义指令
  comment: {
   bind: function (el, binding) {
    const gitment = new Gitment({
     id: binding.value.id + &#39;&#39;,
     owner: binding.value.owner,
     repo: binding.value.repo,
     oauth: {
      client_id: binding.value.oauth.client_id,
      client_secret: binding.value.oauth.client_secret
     }
    })
    gitment.render(el)
   }
  }
 }
}
</script>

Die Eintragsdatei, die wir im Webpack konfigurieren, ist die Methode zum externen Mounten von Komponenten.

Testen Sie den Plug -in

import VueComment from './VueComment.vue'
const comment = {
 install: function(Vue) {
  Vue.component(VueComment.name, VueComment)
 }
}
// 这里的判断很重要
if (typeof window !== 'undefined' && window.Vue) { 
  window.Vue.use(comment) 
}
export default comment

Erster Test, ob der Build erfolgreich ist

Die folgenden Dateien werden im Verzeichnis generiert

Herzlichen Glückwunsch, fahren Sie fort. Kommen Sie vorbei und testen Sie, ob das Plug-in ordnungsgemäß funktioniert

npm run builddist

Wir müssen das Paket und das Webpack ändern, aber ich habe vorhin gesagt, dass wir es nicht löschen sollen Zum Auskommentieren und Ändern von main von package.json in dist/build js werden der Eintrag und der Dateiname von wepack durch die Standardkonfiguration ersetzt, und der src von index.html wird ebenfalls durch den Standard

Führen Sie unsere Komponente in main.js ein

Verwenden Sie unser Plug-in in App.vue

Ausführen

import VueComment from './lib/index.js'
Vue.use(VueComment)

Haha, es funktioniert normal, Fehler: Nicht gefunden liegt daran, dass ich client_id nicht konfiguriert habe.

<template>
 <p id="app">
  <vue-comment :options="options" v-if="options"></vue-comment>
 </p>
</template>
<script>
export default {
 name: &#39;App&#39;,
 data() {
  return {
   options: {
    id: &#39;article id&#39;,
    owner: &#39;Your GitHub ID&#39;,
    repo: &#39;The repo to store comments&#39;,
    oauth: {
     client_id: &#39;Your client ID&#39;, 
     client_secret: &#39;Your client secret&#39;,
    } 
   }
  }
 }
}
</script>
<style>
  @import &#39;~gitment/style/default.css&#39;;
</style>

npm run dev Plug-in veröffentlichen

Nach Abschluss der Testarbeiten können wir es auf npm veröffentlichen. Dies ist besser sichtbar Wenn Sie npm login im Projektverzeichnis ausführen möchten, geben Sie Ihr Kontokennwort und Ihre E-Mail-Adresse ein. Um den Effekt zu überprüfen, wird empfohlen, sich den Quellcode anzusehen direkt, weil es wirklich einfach ist.

Fazit

Stellen Sie selbst genug Essen und Kleidung her. Ich denke, jeder Front-End-Entwickler braucht ein eigenes Rad (vue-gitment jedoch nicht). ein Rad), ein Gehören zu Ihrem eigenen Rad, und Sie können bei der Herstellung von Rädern viel lernen.

Verwandte Empfehlungen:

Zusammenfassung von ThinkPHP mit der Smarty-Plug-in-Methode von Drittanbietern

PHP-Dateien ohne Drittanbieter stapelweise verschlüsseln Plug-in

Was soll ich tun, wenn das Vue-Referenz-Datepicker-Plugin den Wert des Datepicker-Eingabefelds nicht überwachen kann

Das obige ist der detaillierte Inhalt vonVue kapselt Plug-Ins von Drittanbietern und veröffentlicht sie auf npm-Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!