Bagaimana untuk membina pemalam JS dan perpustakaan komponen menggunakan Vue?

Vue.js ialah rangka kerja JavaScript popular yang fleksibiliti dan kemudahan penggunaannya menjadikannya pilihan pertama untuk membina aplikasi bahagian hadapan. Selain membina aplikasi, Vue.js juga boleh digunakan untuk membina pemalam JavaScript dan perpustakaan komponen, yang boleh digunakan sebagai pakej kendiri dalam aplikasi Vue lain. Artikel ini akan memperkenalkan secara terperinci cara menggunakan Vue.js untuk membina pemalam JavaScript dan perpustakaan komponen.

Apakah pemalam Vue dan perpustakaan komponen?

Pemalam Vue ialah kod JavaScript boleh guna semula yang dikapsulkan ke dalam pemalam Vue dan boleh dipasang dan digunakan dengan mudah dalam aplikasi Vue. Pemalam Vue boleh menambah fungsi baharu pada aplikasi Vue, seperti berinteraksi dengan API bahagian belakang, mengendalikan pengesahan borang, mengendalikan kebenaran, mengendalikan penghalaan, mengendalikan pengurusan keadaan, dsb. Pustaka Komponen Vue ialah koleksi komponen UI yang telah ditetapkan yang boleh digunakan semula dengan mudah dalam aplikasi Vue.

Bagaimana untuk membina pemalam Vue?

Pemalam Vue ialah kod JavaScript boleh guna semula yang mengandungi komponen Vue yang boleh dipasang dan digunakan dalam berbilang aplikasi Vue. Berikut ialah langkah tentang cara membina pemalam Vue:

Langkah 1: Pasang dependencies

Mula-mula anda perlu memastikan bahawa Vue.js dan dependenciesnya dipasang. Apabila membina pemalam Vue, kita perlu memasang perkhidmatan vue-cli, rollup dan pemalam yang sepadan.

npm install --save-dev vue-cli-service rollup rollup-plugin-babel rollup-plugin-uglify

Langkah Kedua: Cipta Projek

Langkah seterusnya dalam membina pemalam Vue ialah mencipta projek baharu pada komputer tempatan anda. Kita boleh menggunakan Vue CLI untuk mencipta projek baharu. Dalam baris arahan, laksanakan arahan berikut:

vue create my-plugin

Langkah 3: Bina pemalam

Kita perlu menulis komponen Vue di dalam pemalam dan mengeksport pemalam Vue. Untuk melakukan ini, cipta folder baharu dalam direktori /src untuk menyimpan semua kod pemalam Vue. Anda boleh menamakan pemalam folder ini. Dalam folder ini kita perlu mencipta fail plugin plugin.js. Di dalamnya, kami akan mengeksport kaedah pemasangan dan komponen Vue.

// 导出 install 方法
export function install(Vue) {
  Vue.component('my-component', {
    // ... 组件详情
  })
}

// 导出组件
export MyComponent from './components/MyComponent.vue'

Kemudian, kita perlu mencipta fail entri supaya pengguna boleh menggunakan pemalam tersebut. Dalam fail kemasukan, kami perlu mengimport komponen dan kod Vue yang diperlukan, dan kemudian gunakan kaedah Vue.use() untuk memasang pemalam Vue.

import { MyComponent, install } from './plugin'

// 在 Vue.use() 之前，安装插件
install(Vue)

// 注册组件
Vue.component(MyComponent.name, MyComponent)

Akhir sekali, kami perlu mencipta fail konfigurasi rollup untuk pemalam, yang boleh membungkus semua kod JavaScript ke dalam fail JavaScript dan mengeksportnya ke folder dist.

import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';

export default {
  input: './src/plugin/plugin.js',
  output: {
    name: 'MyPlugin',
    file: './dist/my-plugin.min.js',
    format: 'umd'
  },
  plugins: [
    babel(),
    uglify()
  ]
}

Langkah terakhir untuk membungkus pemalam ialah melaksanakan arahan berikut dalam baris arahan:

rollup -c

Langkah 4: Terbitkan pemalam

Pemalam Vue yang dibungkus boleh diterbitkan terus ke pendaftaran npm . Sebelum menerbitkan pemalam, anda mesti mencipta dan mendaftar akaun npm mengikut dokumentasi npm rasmi. Anda perlu log masuk ke npm dalam baris arahan dan laksanakan arahan berikut:

npm publish

Bagaimana untuk membina perpustakaan komponen Vue?

Membina pustaka komponen Vue memerlukan langkah yang sama untuk membina pemalam Vue. Pustaka komponen ialah koleksi komponen UI yang telah ditetapkan yang boleh digunakan semula dengan mudah. Berikut ialah langkah untuk membina pustaka komponen Vue:

Langkah 1: Pasang kebergantungan

Mula-mula, anda perlu memastikan bahawa Vue.js dan kebergantungannya telah dipasang. Apabila membina perpustakaan komponen Vue, kami perlu memasang perkhidmatan vue-cli, rollup dan pemalam yang sepadan.

npm install --save-dev vue-cli-service rollup rollup-plugin-babel rollup-plugin-uglify

Langkah 2: Cipta projek

Kita boleh menggunakan Vue CLI untuk mencipta projek baharu. Dalam baris arahan, laksanakan arahan berikut:

vue create my-component-library

Dalam projek perpustakaan komponen, kami akan mencipta direktori /src yang berasingan untuk menyimpan semua kod komponen. Dalam direktori /src, kami boleh mencipta folder src/komponen baharu dan menambah fail komponen kami di sana.

Langkah 3: Bina komponen

Kita perlu menulis komponen Vue dalam /src/komponen dan mengeksport setiap komponen Vue. Semua komponen boleh dikumpulkan dalam satu index.js untuk kegunaan bersatu dalam fail main.js.

import MyComponent from './MyComponent.vue'
import MyOtherComponent from './MyOtherComponent.vue'

export default {
  MyComponent,
  MyOtherComponent
}

Selepas komponen ditulis dan diperkenalkan ke dalam fail /index.js, kita boleh menggunakan rollup untuk membungkus kod perpustakaan komponen.

Langkah 4: Membungkus pustaka komponen

Sama seperti membungkus pemalam Vue, kita perlu mencipta fail konfigurasi rollup untuk pustaka komponen untuk membungkus semua kod JavaScript dan mengeksportnya ke direktori dist.

import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';

export default {
  input: './src/index.js',
  output: {
    name: 'MyComponentLibrary',
    file: './dist/my-component-library.min.js',
    format: 'umd'
  },
  plugins: [
    babel(),
    uglify()
  ]
}

Langkah terakhir untuk membungkus kod perpustakaan komponen ialah melaksanakan arahan berikut pada baris arahan:

rollup -c

Langkah 5: Terbitkan perpustakaan komponen

Pustaka komponen Vue yang dibungkus boleh diterbitkan terus ke pendaftaran npm. Sebelum menerbitkan perpustakaan komponen, anda mesti mencipta dan mendaftar akaun npm mengikut dokumentasi npm rasmi. Anda perlu log masuk ke npm dalam baris arahan dan laksanakan arahan berikut:

npm publish

Conclusion

Vue.js ialah rangka kerja bahagian hadapan yang sangat fleksibel yang boleh digunakan dalam pelbagai cara. Membangunkan pemalam Vue dan perpustakaan komponen ialah dua daripadanya. Proses mencipta pemalam Vue dan perpustakaan komponen pada asasnya adalah sama, kerana kedua-duanya dihasilkan daripada komponen Vue. Pemalam Vue boleh menambah fungsi Vue baharu, manakala perpustakaan komponen Vue menyediakan koleksi komponen yang boleh digunakan semula dengan mudah. Dengan mengikut langkah yang disenaraikan di atas, anda boleh membina perpustakaan pemalam dan komponen JavaScript anda sendiri menggunakan Vue.js, menjadikan penggunaan semula kod lebih mudah dan automatik.

Atas ialah kandungan terperinci Bagaimana untuk membina pemalam JS dan perpustakaan komponen menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!