Asas pembangunan VUE3: bangun menggunakan pemalam tersuai Vue.js

Memandangkan Vue.js semakin menjadi salah satu rangka kerja pilihan untuk pembangunan bahagian hadapan, semakin ramai pembangun mula terlibat dalam pembangunan pemalam Vue.js. Pemalam Vue.js ialah komponen berfungsi yang boleh dipasang dan digunakan semula secara global Ia boleh meningkatkan fungsi Vue.js itu sendiri dan menambah fungsi baharu pada rangka kerja Vue.js. Dalam Vue.js versi 3.0, pembangunan pemalam adalah lebih mudah dan lebih mudah Artikel ini akan memperkenalkan cara menggunakan pembangunan pemalam tersuai Vue.js.

1. Apakah pemalam Vue.js?

Pemalam Vue.js ialah komponen bebas yang digunakan untuk meningkatkan kefungsian rangka kerja Vue.js arahan dan penapis baharu untuk Vue.js Peranti, komponen dan fungsi lain. Pertama sekali, kita perlu menjelaskannya: Pemalam Vue.js bukanlah komponen yang dimuatkan sebagai sebahagian daripada aplikasi Vue.js, tetapi komponen yang dimuatkan dan dimulakan sebagai sebahagian daripada Vue.js itu sendiri. Pemalam Vue.js boleh diperkenalkan dan digunakan dengan mudah oleh pembangun lain, menjadikannya lebih mudah untuk kami melaksanakan aplikasi Vue.js.

2. Penggunaan pemalam Vue.js

Menggunakan pemalam Vue.js dibahagikan kepada dua langkah. Mula-mula, kami perlu memasang pemalam ke dalam Vue.js sebelum kami boleh menggunakannya dalam aplikasi kami.

1. Memasang pemalam

Dalam aplikasi Vue.js, kita perlu menggunakan kaedah Vue.use() untuk memasang pemalam. Kaedah ini menerima objek pemalam sebagai parameter dan memasang objek pemalam ke dalam aplikasi Vue.js.

Sebagai contoh, kami menulis objek pemalam bernama MyPlugin:

const MyPlugin = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;
    // 在此处注册新的指令、过滤器、组件等。
  }
}

Dalam objek pemalam ini, kami mentakrifkan kaedah pemasangan(), di mana permulaan pemalam ini boleh dilakukan beroperasi. Dalam kaedah install(), kita boleh mendaftarkan arahan global, penapis, komponen, dsb. Pada masa yang sama, kami juga perlu mengekalkan atribut yang dipasang dalam objek pemalam untuk menentukan sama ada pemalam semasa telah dipasang dan mengelakkan pemasangan berulang.

Seterusnya, kami menggunakan kaedah Vue.use() dalam aplikasi Vue.js untuk memasang pemalam:

import Vue from 'vue';
import MyPlugin from './my-plugin';

Vue.use(MyPlugin, { someOption: true });

Di sini, kami memperkenalkan objek pemalam MyPlugin menggunakan sintaks import ES6, dan gunakan objek sebagai parameter kaedah Vue.use(). Selain itu, kita boleh menghantar objek pilihan kepada kaedah Vue.use() untuk mengkonfigurasi pemalam apabila ia dimulakan. Dalam kaedah install() objek pemalam MyPlugin, kami boleh mengakses pilihan konfigurasi ini melalui parameter pilihan.

2. Menggunakan Pemalam

Sekarang kami telah memasang pemalam ke dalam aplikasi Vue.js kami, kami boleh menggunakan fungsi yang disediakan oleh pemalam itu. Fungsi pemalam Vue.js boleh digunakan secara global atau tempatan.

Dalam aplikasi Vue.js, kita boleh menggunakan kaedah Vue.directive() untuk mendaftarkan arahan global, kaedah Vue.filter() untuk mendaftarkan penapis global, kaedah Vue.component() untuk mendaftar global komponen, dsb. Sebagai contoh, kami mendaftarkan komponen bernama my-component dalam kaedah install() bagi objek pemalam MyPlugin:

const MyPlugin = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;

    Vue.component('my-component', {
      /* 组件选项 */
    })
  }
}

Seterusnya, dalam aplikasi Vue.js kami, kami boleh menggunakan Vue.js seperti Gunakan ini komponen sama seperti komponen terbina dalam.

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  // 组件选项
}
</script>

Perhatikan bahawa semasa mendaftarkan komponen global, nama komponen perlu bermula dengan huruf kecil dan tanda sempang hendaklah digunakan untuk menyambungkan berbilang perkataan dalam templat.

Jika kami hanya mahu menggunakan fungsi pemalam dalam halaman atau komponen tertentu, kami juga boleh mendaftarkan pemalam secara setempat dalam halaman atau komponen:

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyPlugin from '@/my-plugin';

export default {
  components: {
    'my-component': MyPlugin.myComponent
  }
}
</script>

Di sini, kami menggunakan import ES6 Sintaks memperkenalkan objek pemalam MyPlugin dan mendaftarkan objek sebagai objek komponen yang perlu digunakan dalam komponen tempatan.

3. Contoh penggunaan pemalam

Seterusnya, mari lihat contoh membangunkan pemalam tersuai menggunakan Vue.js. Katakan kita perlu membangunkan penunjuk pemuatan global yang akan dipaparkan dan disembunyikan secara automatik apabila aplikasi melakukan operasi tak segerak. Kami boleh menulis pemalam bernama LoadingIndicator untuk melaksanakan fungsi ini:

const LoadingIndicator = {
  installed: false,
  install(Vue, options) {
    if (this.installed) return;
    this.installed = true;

    const indicator = new Vue({
      template: `
        <div v-if="loading" class="loading-indicator">
          <div class="loading-spinner"></div>
        </div>
      `,
      data() {
        return {
          loading: false
        }
      }
    })

    const mountIndicator = () => {
      const component = indicator.$mount();
      document.body.appendChild(component.$el);
    }

    Vue.prototype.$loading = {
      show() {
        indicator.loading = true;
        mountIndicator();
      },
      hide() {
        indicator.loading = false;
        document.body.removeChild(indicator.$el);
      }
    };

    Vue.mixin({
      beforeCreate() {
        this.$loading = Vue.prototype.$loading;
      }
    });
  }
}

export default LoadingIndicator;

Dalam kaedah pemasangan() objek pemalam LoadingIndicator, kami mula-mula mentakrifkan contoh Vue sebagai templat penunjuk. Selepas itu, kami memasang contoh Vue pada elemen badan dan menentukan API global $loading untuk mengawal paparan dan penyembunyian penunjuk secara global. Pada masa yang sama, kami menentukan campuran global dalam kaedah Vue.mixin() supaya setiap komponen boleh mengakses $loading API.

Kini, kami telah menulis pemalam LoadingIndicator yang boleh digunakan secara global. Menggunakan pemalam dalam aplikasi Vue.js adalah sangat mudah:

import Vue from 'vue';
import LoadingIndicator from '@/loading-indicator';

Vue.use(LoadingIndicator);

// 在异步操作开始时显示加载指示器
this.$loading.show();

// 在异步操作完成后隐藏加载指示器
this.$loading.hide();

Di sini, kami mula-mula memasang pemalam LoadingIndicator ke dalam aplikasi Vue.js menggunakan kaedah Vue.use(). Seterusnya, kami memanggil kaedah ini.$loading.show() dalam blok kod yang memerlukan operasi tak segerak untuk memaparkan penunjuk pemuatan, dan kemudian panggil kaedah ini.$loading.hide() untuk menyembunyikan penunjuk pemuatan selepas operasi tak segerak selesai .

Ringkasan

Pemalam Vue.js ialah fungsi berkuasa yang boleh memanjangkan fungsi rangka kerja Vue.js dengan mudah. Dengan keluaran Vue.js 3.0, pembangunan dan penggunaan pemalam menjadi lebih mudah dan fleksibel. Dalam artikel ini, kami memperkenalkan cara memasang pemalam melalui kaedah Vue.use(), cara mendaftar arahan global, penapis dan komponen serta cara menggunakan pemalam secara setempat dalam halaman atau komponen. Akhir sekali, kami juga menggunakan contoh pemalam penunjuk pemuatan global untuk menunjukkan aplikasi praktikal pembangunan pemalam Vue.js.

Atas ialah kandungan terperinci Asas pembangunan VUE3: bangun menggunakan pemalam tersuai Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!