Grundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um Erweiterungs- und Reduzierkomponenten zu kapseln

Bei der Frontend-Entwicklung ist es oft notwendig, die Funktion zum Erweitern und Reduzieren zu verwenden, um den Inhalt der Seite zu reduzieren und das Benutzererlebnis zu verbessern. Vue.js ist ein beliebtes Front-End-Framework, das uns dabei helfen kann, die Funktion zum Erweitern und Reduzieren einfach zu implementieren. In diesem Artikel wird erläutert, wie Sie das Vue.js-Plug-In verwenden, um die Erweiterungs- und Reduzierkomponenten zu kapseln.

1. Erstellen Sie ein Vue.js-Plugin. Der Prozess zum Erstellen eines Vue.js-Plugins ist in den folgenden Schritten abgeschlossen:

1 und definieren Sie die Komponente

In dieser Komponente verwenden wir geschriebenen HTML-Code und JavaScript-Code, um eine UI-Komponente mit zwei Zuständen zu implementieren: „erweitert“ und „reduziert“. Der Gesamtcode lautet wie folgt:

<template>
  <div>
    <div v-if="showContent">
      <slot></slot>
    </div>
    <div v-else>
      <slot name="less"></slot>
    </div>
    <button v-if="isButtonVisible" @click="toggleContent">
      {{ showContent ? buttonText.less : buttonText.more }}
    </button>
  </div>
</template>

<script>
export default {
  name: 'collapse-transition',
  props: {
    buttonText: {
      type: Object,
      default: () => ({ more: '展开', less: '收起' })
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showContent: this.visible,
    }
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent;
    }
  },
  computed: {
    isButtonVisible() {
      return this.$slots.less !== undefined;
    }
  }
}
</script>

2. Erstellen Sie eine index.js-Datei, um das Plug-in zu exportieren.

In dieser Datei müssen wir die .vue-Datei importieren und die Komponente im Konstruktor von Vue.js verwenden. Auf diese Weise wird unsere Komponente im globalen Bereich von Vue.js registriert.

import CollapseTransition from './CollapseTransition.vue'

const plugin = {
  install(Vue) {
    Vue.component('CollapseTransition', CollapseTransition)
  }
}

export default plugin

export { CollapseTransition }

3. Erstellen Sie die package.json-Datei

Wir erstellen eine leere package.json-Datei, die als Konfigurationsdatei unseres Plug-ins dient.

{
  "name": "vue-collapse-transition-plugin",
  "version": "1.0.0",
  "description": "A Vue.js plugin for creating collapse transitions",
  "main": "dist/index.js",
  "keywords": [
    "Vue.js",
    "plugin",
    "transition",
    "collapse"
  ],
  "dependencies": {
    "vue": "^3.0.0"
  }
}

4. Verwenden Sie rollup.js, um das Plug-in zu packen.

Wir verwenden das Tool rollup.js, um das Plug-in in eine Datei zu packen. Dieses Tool kann unsere .vue-Datei und index.js-Datei in eine .min.js-Datei packen.

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'

import pkg from './package.json'

export default {
  input: 'index.js',
  output: [
    {
      file: pkg.main,
      format: 'umd',
      name: 'VueCollapseTransition',
      plugins: [terser()]
    },
    {
      file: pkg.module,
      format: 'es'
    }
  ],
  external: ['vue'],
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'runtime' })
  ]
}

5. Veröffentlichen Sie das Plug-in im npm-Repository

Veröffentlichen Sie das Plug-in mit dem npm-Publish-Befehl im npm-Repository, um die Plug-in-Veröffentlichung abzuschließen.

2. So verwenden Sie Plug-Ins in Projekten

Nach den oben genannten Schritten wurde unser Plug-In gepackt und im npm-Warehouse veröffentlicht. Wir können dieses Plugin in jedem Vue.js-Projekt verwenden. Als nächstes zeigen wir, wie Sie dieses Plug-in im Projekt verwenden.

1. Installieren Sie das Plug-in

Wir können den Befehl npm install/vue-cli-plugin-cypress verwenden, um unser Plug-in zu installieren.

npm install vue-collapse-transition-plugin

2. Plug-Ins in das Vue.js-Projekt einführen

Wir führen unsere Plug-Ins in der Datei main.js ein.

import Vue from 'vue'
import App from './App.vue'
import plugin from 'vue-collapse-transition-plugin'

Vue.config.productionTip = false

Vue.use(plugin)

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

3. Komponenten verwenden und Parameter konfigurieren

Wir verwenden Komponenten in der App.vue-Datei und konfigurieren einige Parameter, um zu zeigen, wie diese Komponente in tatsächlichen Projekten verwendet wird.

<template>
  <CollapseTransition :buttonText="{ more: '展开一下', less: '收起一下' }">
    <template #less>
      更多信息
    </template>
    <div>
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
  </CollapseTransition>
</template>

<script>
import { CollapseTransition } from 'vue-collapse-transition-plugin'

export default {
  name: 'App',
  data() {
    return {
      list: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']
    }
  },
  components: {
    CollapseTransition
  }
}
</script>

Anhand dieses einfachen Beispiels einer UI-Komponente können wir sehen, dass die Verwendung von Plug-Ins sehr praktisch ist. In unserem eigentlichen Projekt können wir diese funktionsreiche UI-Komponente in nur wenigen einfachen Schritten schnell nutzen.

3. Zusammenfassung

In diesem Artikel haben wir gelernt, wie man das Vue.js-Plug-in verwendet, um die UI-Komponenten zum Erweitern und Reduzieren zu kapseln. Indem wir ein Vue.js-Plug-in erstellen und es im npm-Repository veröffentlichen, können wir diese funktionsreiche UI-Komponente schnell in jedem Vue.js-Projekt verwenden. Die Plugin-Entwicklung ist eine sehr wichtige Fähigkeit in Vue.js. Wir hoffen, dass dieser Artikel für Sie hilfreich war.

Das obige ist der detaillierte Inhalt vonGrundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um Erweiterungs- und Reduzierkomponenten zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!