Alat Dan Praktik Untuk Mempercepat Proses Pengembangan Vue.js

Sepanjang tutorial ini, kita akan melihat praktik yang harus diadopsi, hal-hal yang harus dihindari, dan melihat lebih dekat beberapa alat yang berguna untuk membuat penulisan Vue.js lebih mudah. Saya akan lebih fokus pada Vue 2 karena kebanyakan orang dan organisasi masih menggunakan versi yang lebih lama. Tidak ada alasan untuk khawatir, karena sebagian besar hal yang disebutkan di sini masih berlaku untuk Vue 3 karena ini hanya versi supercharged dan lebih cepat. Namun, jika Anda sudah mengetahui Vue 2 dan hanya ingin mempelajari apa yang baru di Vue 3, Anda dapat melihat panduan migrasi untuk mempelajari lebih lanjut.

Catatan: Artikel ini ditujukan untuk pemula dan pengembang berpengalaman yang ingin meningkatkan keterampilan Vue.js mereka. Pengetahuan dasar tentang JavaScript dan Vue.js akan sangat bermanfaat saat Anda menyelesaikan tutorial ini.

Penataan Proyek Berbasis Modul vs Berbasis File

Mari kita mulai dengan melihat cara menyusun file berdasarkan modul, bagaimana penataan berbasis file mungkin bukan ide yang baik dalam hal membangun proyek skala besar, dan bagaimana menyusun modul agar sesuai dengan kebutuhan bisnis.

Karena kami baru membuat proyek dengan Vue.js CLI, kami mendapatkan struktur file default yang telah dipetakan oleh tim Vue.js. Menggunakan struktur file yang diusulkan bukanlah cara yang buruk untuk menyusun proyek Anda sendiri, tetapi seiring pertumbuhan proyek Anda, Anda akan membutuhkan struktur yang lebih baik karena kode Anda menjadi terkelompok dan lebih sulit untuk dinavigasi dan mengakses file.

Di sinilah metode berbasis modul untuk menyusun proyek Anda berperan.

Cara yang buruk untuk menyusun proyek Anda akan melibatkan penyimpanan data berbeda yang tidak terkait dengan folder yang sama, seperti komponen notifikasi dan komponen autentikasi di folder komponen root:

 +-- src/ | +-- assets/ | +-- logo.png | +-- userprofile.png | +-- components | +-- NotificationBar.vue | +-- LoginForm.vue | +-- DashboardInfo.vue | +-- AuthenticationModal.vue | +-- main.js

Jadi yang ingin kami lakukan adalah memisahkan proyek berdasarkan logika dan masalah bisnis sehingga kami memiliki sesuatu seperti modul otentikasi, modul produk, modul layanan, dan sebagainya. Dengan cara ini kita dapat memastikan bahwa apa pun yang berkaitan dengan fitur tertentu telah dimasukkan ke dalam modul, membuat kode kita lebih rapi dan navigasi tidak terlalu sulit.

 +-- modules/ | +-- AuthModule/ | +-- assets/ | +-- userprofile.png | +-- Components/ | +-- Authentication.vue | +-- login.vue | +-- NotificationModule | +-- assets/ | +-- Alert.png | +-- Components/ | +-- NotificationBar.vue | +-- ProductModule/

Modul Pengorganisasian

Ada dua cara Anda dapat mengatur modul Anda:

1. modul inti Vue.js,
2. Modul fitur aplikasi.

Modul inti Vue.js hadir untuk memfasilitasi pengembangan Vue.js Anda. Modul seperti modul layanan yang berisi semua permintaan jaringan yang dibutuhkan oleh perusahaan disimpan dalam modul inti ini dan semua permintaan jaringan yang sesuai dibuat dari sini.

Memodulasi aplikasi Anda menurut fitur adalah cara yang bagus untuk membuat struktur file yang lebih baik di aplikasi Anda. Ini akan memungkinkan pemisahan kekhawatiran Anda dan memastikan bahwa Anda hanya mengerjakan fitur yang ditugaskan kepada Anda atau tim Anda. Keuntungan lain dari modularisasi menurut fitur adalah rawatan dan kemampuannya untuk menghindari hutang teknis dalam jangka panjang di mana mungkin perlu ada pengerjaan ulang pada aplikasi.

Sekarang setiap kali ada kebutuhan untuk menambah, menghapus, atau mengubah status fitur tertentu, yang perlu kita lakukan hanyalah menavigasi ke fitur itu dan membuat perubahan tanpa merusak aplikasi. Metode modularisasi ini memungkinkan pengembangan program yang efisien serta debugging dan modifikasi yang mudah dalam aplikasi kita.

Misalnya, fitur pembayaran yang diberikan kepada Anda dan tim Anda adalah saat yang tepat untuk menerapkan modul payout yang merangkum semua fungsi dan data untuk fitur tersebut.

 +-- modules/ | +-- payout/ | +-- index.js | +-- assets/ | +-- Components/ | +-- PayOut.vue | +-- UserInfo.vue | +-- store/ | +-- index.js | +-- actions.js | +-- mutations.js | +-- Test/

Berdasarkan fitur pembayaran kami di atas, kami memiliki file index.js untuk mengimpor dan menggunakan plugin yang hanya terkait dengan modul pembayaran. Folder aset menampung semua aset (gambar dan gaya) untuk modul. Folder komponen kami berisi komponen yang terkait dengan fitur pembayaran. Folder toko berisi tindakan, mutasi, dan getter kami yang digunakan untuk mengelola status fitur ini. Ada juga folder tes untuk melakukan pengujian fitur ini.

Menggunakan Arahan Kustom

Arahan di Vue.js adalah cara bagi kita untuk memberi tahu Vue.js untuk melakukan sesuatu atau menunjukkan perilaku tertentu untuk kita. Contoh direktif adalah v-if , v-model , v-for , dll. Dalam aplikasi Vue.js kami, ketika kami menggunakan sesuatu seperti v-model untuk mengikat data ke input dalam formulir, kami memberikan Vue.js mengkodekan beberapa instruksi tertentu yang khas untuk Vue.js. Tetapi bagaimana jika kita menginginkan tindakan atau perilaku tertentu yang tidak diizinkan oleh arahan yang diberikan Vue.js kita, lalu apa yang harus kita lakukan? Kami dapat membuat apa yang kami sebut arahan khusus.

Mendaftarkan Arahan Kustom dan Kait Arahan

Kita dapat melakukan pendaftaran arahan dengan dua cara:

1. Secara global
   Dalam file main.js kami.
2. Secara lokal
   Dalam komponen kami.

Kait dalam arahan seperti metode yang menyala ketika tindakan tertentu terjadi dalam arahan kami. Seperti kait siklus hidup kait yang dibuat dan dipasang , kami dilengkapi dengan kait untuk digunakan dalam arahan kami.

Katakanlah kita sedang membangun aplikasi dan di salah satu halaman kita, kita ingin warna latar belakang selalu berubah setiap kali kita menavigasi ke sana. Kami akan memberi nama direktif ini colorChange . Kita dapat mencapainya dengan bantuan arahan.

Template kami terlihat seperti ini:

 <template> <div v-color-change> <HelloWorld msg="Hello Vue in CodeSandbox!"/> </div> </template>

Kita bisa melihat custom directive di atas, tapi untuk membuatnya bekerja, di file main.js kita tambahkan:

 // custom directive Vue.directive("color-change", { bind: function (el) { const random = Math.floor(Math.random() * 900000) + 100000; el.style.backgroundColor = `#${random}` } })

Direktif Vue.js di atas menggunakan nama direktif sebagai argumen pertama kemudian Object sebagai argumen kedua yang mengontrol perilaku direktif. bind adalah salah satu kait yang kita bicarakan dan akan dipanggil setelah arahan terikat ke elemen. Ia menerima argumen berikut:

• el
  Ini adalah simpul elemen yang telah kami lampirkan direktif.
• binding
  Ini berisi properti bermanfaat yang mengubah perilaku direktif.
• vnode
  Ini adalah simpul virtual Vue.js.

Kami telah membuat serangkaian angka 6 digit acak sehingga kami dapat menggunakannya dalam mengubah kode hex gaya warna latar belakang kami.

Praktik Terbaik Saat Menulis Arahan Kustom

Kami telah membuat arahan khusus untuk hal di atas, tetapi kami perlu memperhatikan beberapa hal. Selain el , jangan pernah memodifikasi argumen hook dan pastikan argumen tersebut bersifat read-only karena argumen hook adalah objek dengan metode asli yang dapat menimbulkan efek samping jika dimodifikasi. Jika perlu, gunakan dataset Vue.js untuk berbagi informasi antar hook.

Jika kita menggunakan CLI build dari Vue.js, arahan khusus harus ada di file main.js sehingga semua file .vue dapat mengaksesnya. Nama direktif Anda harus menjadi sesuatu yang sesuai dengan apa yang dilakukan direktif tertentu, sangat deskriptif tentang fungsi direktif.

Anda dapat melihat dan bermain lebih banyak dengan kode di kode dan kotak yang telah saya buat ini. Anda juga dapat membaca lebih lanjut tentang ini di dokumen Vue.

Mengontrol Pembaruan

Sistem reaktivitas Vue.js sangat kuat dengan cara mendeteksi hal-hal yang perlu diperbarui dan memperbaruinya tanpa Anda sebagai pengembang melakukan apa pun. Misalnya, merender ulang halaman setiap kali kita membukanya. Kadang-kadang kasusnya bisa berbeda karena kita mungkin menemukan diri kita menulis kode yang mengharuskan kita untuk memaksa pembaruan.

Catatan: Jika Anda merasa perlu memaksakan pembaruan, yang merupakan kejadian langka, maka Anda mungkin perlu benar-benar memahami Reaktivitas Vue dan cara menggunakan props dengan benar dalam mengomunikasikan data dinamis.

Memaksa Pembaruan Terjadi

Dalam kebanyakan kasus, ketika nilai dalam objek data vue berubah, tampilan secara otomatis dirender ulang, tetapi tidak selalu seperti ini. kasus klasik dari pandangan kami, tidak merender ulang adalah ketika kami menggunakan v-for dalam template kami untuk mengulang beberapa data dalam objek data, dan kami tidak menambahkan nilai :key dalam loop v-for .

 <div v-for="item in itemsArray" :key="item">

Ini memberi Vue.js cara untuk melacak identitas setiap node dan merender ulang tampilan untuk setiap perubahan.

Situasi langka yang dapat menyebabkan kami memaksa pembaruan adalah jika kami sengaja atau tidak sengaja mengatur item array dengan indeks.

 var app = new Vue({ data: { items: ['1', '2'] } }) app.items[1] = '7' //vue does not notice any change

Ada berbagai cara untuk memaksa pembaruan atau rendering ulang. Beberapa adalah praktik yang sangat buruk seperti penggunaan v-if untuk merender ulang halaman saat true , dan saat false, komponen menghilang dan tidak ada lagi. Ini adalah praktik yang buruk karena template tidak pernah dihancurkan tetapi hanya disembunyikan sampai dapat digunakan kembali.

 <template> <div v-if="show"> <button @click="rerender">re-render</button> </div> </template>

 <script> export default { data() { return { show: true, }; }, methods: { rerender() { this.show= false; this.$nextTick(() => { this.show = true; }); } } }; </script>

Dalam kode di atas, status show awalnya disetel ke true, artinya komponen kita awalnya dirender. Kemudian, ketika kita mengklik tombol, fungsi rerender( ) dipanggil dan status show disetel ke false , dan komponen tidak lagi dirender. Pada centang berikutnya, yang merupakan siklus pembaruan DOM tunggal, show disetel ke true dan komponen kita dirender lagi. Ini adalah cara rendering ulang yang sangat hacky.

Saya ingin berbicara tentang dua cara yang sah ini dapat dilakukan:

1. $forceUpdate dari Vue.
2. Pola perubahan kunci.

$forceUpdate Vue : Dalam penggunaan $forceUpdate , komponen turunan tidak dirender, hanya instance Vue.js, instance, dan komponen turunan dengan slot.

Secara global kami dapat memaksa pembaruan:

 import Vue from 'vue'; Vue.forceUpdate();

Dan secara lokal juga:

 export default { methods: { methodThatForcesUpdate() { this.$forceUpdate(); } } }

Menggunakan pola perubahan kunci yang jauh lebih baik daripada metode $forceUpdate adalah cara lain untuk melakukannya. Alasan di balik pola perubahan kunci menjadi lebih baik adalah memungkinkan Vue.js untuk mengetahui komponen mana yang terkait dengan data tertentu dan ketika kunci berubah, itu menghancurkan komponen lama untuk membuat yang baru, menurut matthiasg pada masalah Github ini Aku berlari ke. Anda dapat menggunakan atribut :key untuk memberi tahu Vue.js komponen mana yang dilampirkan ke bagian data tertentu. Ketika kunci berubah, itu menyebabkan Vue.js menghancurkan komponen lama dan yang baru dibuat.

 <template> <Child :key="key" /> </template> <script> export default { data() { return { key: 0, }; }, methods: { forceRerender() { this.key += 1; } } } </script>

Perpustakaan dan Pengoptimalan Pihak Ketiga

Hampir tidak dapat dihindari bahwa kami tidak menggunakan perpustakaan pihak ketiga di aplikasi kami. Pustaka pihak ketiga dapat mulai menjadi masalah jika kita menutup mata terhadapnya, meningkatkan ukuran bundel dan memperlambat aplikasi kita.

Saya baru-baru ini menggunakan pustaka komponen Vuetify dalam sebuah proyek dan memeriksa untuk melihat bahwa ukuran bundel keseluruhan adalah 500kb yang diperkecil. Hal seperti ini bisa menjadi bottleneck dalam aplikasi kita. Anda dapat memeriksa ukuran bundel aplikasi Anda dengan menggunakan webpack-bundle-analyzer . Anda dapat menginstalnya dengan menjalankan:

 npm install --save-dev webpack-bundle-analyzer

dan sertakan dalam file konfigurasi webpack Anda:

 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }

Praktik Baik Untuk Mengoptimalkan Aplikasi Vue Anda

• Bundel utama kami hanya boleh berisi dependensi yang penting untuk aplikasi kami, seperti vue , vuex . Kita harus menghindari menempatkan perpustakaan yang digunakan dalam rute tertentu di aplikasi kita di bundel utama.
• Saat menggunakan pustaka komponen, Anda dapat mengimpor komponen individual dari pustaka, alih-alih mengimpor semuanya. Misalnya, vuetifikasi:

 <template> <v-app> <v-navigation-drawer app> <!-- --> </v-navigation-drawer> <v-app-bar app> <!-- --> </v-app-bar> </v-app> </template> <script> import { VApp, VNavigationDrawer, VAppBar } from 'vuetify/lib' export default { components: { VApp, VNavigationDrawer, VAppBar, } } </script>

Dengan melakukan hal di atas kami telah mengurangi ukuran bundel dan kode yang berlebihan, hanya menggunakan komponen yang ingin kami gunakan dalam rute tertentu.

Membuat Keputusan Awal untuk Menggunakan Vuex

Seringkali saya bertanya-tanya apakah saya harus memulai proyek dengan Vuex. Terkadang saya hanya ingin memulai proyek sampingan kecil dan saya memulainya tanpa Vuex untuk mengelola status saya dan komunikasi menggunakan alat peraga mulai berantakan.

Jadi kapan kita harus menggunakan Vuex? Untuk menjawabnya, kita perlu mempertimbangkan:

• Ukuran proyek,
• Kesederhanaan kode,
• Rute,
• Kumpulan data yang terlibat,
• Komponen bersarang.

Jika aplikasi Anda mulai berkembang, sebaiknya sertakan Vuex untuk mengelola status dalam aplikasi Anda. Jika Anda ragu apakah Anda harus menggunakan state manager saat memulai proyek Anda, gunakan saja. Namun, ada pembicaraan bahwa API komposisi Vue3 baru menjadi pengganti vuex.

Bagaimana Vuex Harus Diatur untuk Aplikasi Besar

Kami memiliki empat komponen di toko vuex:

• Negara : Menyimpan data di toko kami.
• Getter : Mengambil data status.
• Mutations : Digunakan untuk mengubah data state.
• Tindakan : Digunakan untuk melakukan mutasi.

Ketika kita menggunakan hal di atas di Vuex, kita harus ingat bahwa tindakan harus selalu melakukan mutasi apa pun yang terjadi. Ini memungkinkan devtools kami untuk dapat melacak perubahan dan kembali ke periode tertentu di negara kami dan operasi asinkron atau logika bisnis harus dilakukan dalam tindakan.

Anda dapat membuat file terpisah untuk setiap komponen Vuex agar terlihat seperti ini:

 ├── services ├── main.js └── store ├── index.js ├── actions.js ├── mutations.js └── Getters.js ├── components

Modulasi Menurut Fitur

Jika proyek kami adalah proyek yang sangat besar dengan tim, kami dapat memodulasi toko kami sesuai dengan fitur aplikasi. Ini dilakukan terutama ketika ada proyek yang kompleks dan besar dengan banyak file dan folder dan kami hanya ingin cara yang terorganisir untuk menangani penataan aplikasi kami. Kita harus berhati-hati dengan cara kita melakukan ini, jika tidak kita dapat melakukan lebih banyak kerugian daripada kebaikan. Toko sederhana yang dimodulasi sesuai dengan fitur terlihat seperti ini:

 store/ ├── index.js └── modules/ ├── cart ├── index.js ├── actions.js ├── mutations.js ├── product.js ├── login.js

Praktik Baik Saat Menggunakan Modul Vuex

Karena modul yang kami buat menjadi lebih rumit, menjadi lebih sulit untuk mengimpor dan mengatur secara manual. Disarankan agar modul Anda memiliki file index.js di root modul Anda, sehingga file-file tersebut menjadi satu kesatuan.

Pastikan Anda memiliki pola penamaan standar di toko Anda karena ini akan meningkatkan pemeliharaan. Anda dapat menggunakan camelCase untuk memberi nama modul kemudian ekstensi .store.js . Contoh: CartData.store.js .

 modules/ ├── cart.js ├── index.js -> auto export module ├── userProduct.store.js ├── userData.store.js

Kode yang terkait dengan logika bisnis atau kode asinkron tidak boleh berjalan di dalam mutasi karena perilaku pemblokirannya, sebaliknya, tindakan harus digunakan. Ini dianggap sebagai praktik terbaik untuk tidak mengakses objek status secara langsung. Sebagai gantinya, gunakan fungsi getter karena dapat dipetakan ke komponen vue apa pun menggunakan mapGetters yang berperilaku seperti properti yang dihitung dengan hasil getter di-cache berdasarkan dependensinya. Juga, pastikan setiap modul diberi namespace dan tidak mengaksesnya menggunakan cakupan status global.

Menggunakan Metode Sediakan / Suntikkan Untuk Melewati Data Di Sekitar

Pikirkan aplikasi yang memiliki komponen berbeda. Kami memiliki komponen induk dan komponen induk memiliki banyak komponen anak. Dari gambar di bawah, kita melihat komponen Anak A, B, dan D sebagai komponen teratas, lalu kita melihat Komponen E bersarang di komponen D dan komponen F bersarang di komponen E. Bagaimana jika kita memiliki data aplikasi (seperti Alamat Pengguna), itu kami ingin menggunakan di Komponen anak A, C, dan F, dan data alamat Pengguna ini ada di komponen induk kami.

Untuk melakukan ini, kita perlu:

• Memberikan nilai dalam komponen induk (Penyedia dependensi).
• Suntikkan nilai dalam komponen F (ketergantungan konsumen).

Dalam komponen induk kami, kami menyediakan data:

 app.component('parent-component', { data() { return { user: {name:"Uma Victor", address:"No 33 Rumukwurushi"} } }, provide() { return { userAddress: this.user.address } }, template: ` ... ` })

Kami menggunakan provide sebagai fungsi dengan mengembalikan objek untuk mengakses properti instance komponen.

Dalam komponen child-f kami, kami memiliki yang berikut:

 app.component('child-f', { inject: ['userAddress'], template: ` <h2>Injected property: {{ this.userAddress }}</h2> ` })

Namun, kami memperhatikan bahwa jika kami mengubah alamat pengguna kami ke alamat lain, perubahan itu tidak akan tercermin dalam nilai yang kami user.address , ini karena data yang diberikan ke penyedia/injeksi awalnya tidak reaktif. Kami dapat memperbaikinya dengan melewatkan objek reactive untuk provide . Kita harus menetapkan properti yang dihitung ke objek pengguna kita.

 app.component('parent-component', { data() { return { user: {name:"Uma Victor", address:"No 33 Rumukwurushi"} } }, provide() { return { userAddress: Vue.computed(() => this.user) } }, template: ` ... ` })

Pola ini bisa sangat berguna dan lebih sederhana daripada menggunakan Vuex.

Namun, dengan Vue3, dan peningkatan terbaru, kami sekarang dapat menggunakan penyedia konteks, memungkinkan kami untuk berbagi data antara beberapa komponen seperti vuex.

Penggunaan Props yang Tepat untuk Komponen Formulir

Membuat formulir di web adalah salah satu hal yang tidak disukai semua orang. Vue.js membuat pembuatan formulir yang sangat baik menjadi mudah. Untuk mencapai ini, kita perlu mengetahui cara menggunakan props dengan benar di komponen form kita. Dalam aplikasi tradisional tempat kami memiliki halaman pendaftaran, login, atau produk, kami ingin memiliki perilaku dan desain yang konsisten. Misalnya, halaman masuk di bawah ini.

Dengan kode:

 <template> <div class="form-group"> <form> <label for="email">Your Name</label> <input type="text" class="form-control" placeholder="name" v-model="userData.name" /> <label for="email">Your Email Address</label> <input type="text" class="form-control" placeholder="Email" v-model="userData.email" /> <label for="email">Your Password</label> <input type="text" class="form-control" placeholder="password" v-model="userData.password" /> </form> </div> </template> <script> export default { data() { return { userData: { name: '', email: '', password: '' } } }, } </script>

Kami ingin memiliki komponen BaseInput yang dapat kami gunakan untuk tiga input form di atas. BaseInput kami terlihat seperti ini:

 <template> <div> <label v-if="label">{{ label }}</label> <input type="email" @value="value" @input="updateInput" v-bind="$attrs"> </div> </template> <script> export default { props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } } </script>

Kami ingin BaseInput kami menerima prop label yang selalu berupa string, dan jika Input memiliki label, kami menampilkannya di template kami seperti yang dapat kita lihat di atas.

Saat kami mengisi formulir, metode updateInput dipicu. Metode updateInput mengambil event input sebagai argumen dan mengeluarkan event dengan nama Input, bersama dengan event.target.value payload yang merupakan nama (John Doe) dalam bentuk:

 <BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/>

v-model akan mendengarkan acara input dan kemudian ketika mendapatkannya, itu menetapkan nama pengguna kami ke userData.name yang didapatnya.

Jika kita ingin mengatur placeholder untuk sebuah input, kita mungkin akan mengalami error, hal ini karena di vue2 atribut selalu melampirkan dirinya ke parent, jadi untuk memperbaikinya kita set inheritAttrs menjadi false dan bind attrs .

 <script> export default { inheritAttrs: false, props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } } </script>

Ke tempat yang kita inginkan untuk atribut placeholder. Kode halaman formulir kami terlihat seperti ini sekarang:

 <template> <div class="form-group"> <form> <BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/> <BaseInput label="Your Email Address" v-model="userData.email" placeholder="Email"/> <BaseInput label="Your Password" v-model="userData.password" placeholder="Password"/> </form> </div> </template>

Kami akhirnya memiliki komponen formulir mandiri yang dapat digunakan kembali. Anda dapat bermain dengan kode di kode dan kotak yang saya buat.

Catatan: $Attrs di Vue3 sekarang menyertakan semua pendengar, ikatan gaya, dan kelas Anda.

Mengenal Vue Devtools

Vue.js Devtools adalah alat yang sangat kuat karena membantu kami secara efektif men-debug aplikasi kami secara real-time. Ini paling kuat ketika kami menggunakan Vuex dan kami harus mengelola mutasi dan melacak perubahan di aplikasi kami. Sebagian besar pengembang Vue.js menggunakan devtools sebagai ekstensi, tetapi kami juga dapat menginstalnya sebagai aplikasi mandiri.

Catatan: Devtools Vue.js hanya berfungsi dalam mode pengembangan build Anda dan tidak akan berfungsi dalam produksi sehingga orang lain tidak dapat menggunakannya untuk memeriksa aplikasi Anda.

Memasang Devtools Sebagai Aplikasi Mandiri

Anda mungkin bertanya-tanya mengapa kami ingin menginstal aplikasi mandiri untuk devtools ketika kami dapat menggunakan ekstensi browser untuk itu? Itu karena ketika Anda menginstalnya sebagai aplikasi mandiri secara lokal, Anda dapat menggunakannya dari browser apa pun.

Kami menginstalnya:

 // Globally npm install -g @vue/devtools // or locally npm install --save-dev @vue/devtools

Setelah selesai menginstal, jalankan:

 vue-devtools

Kemudian di file index.html kami, terletak di folder publik di root aplikasi Vue.js kami, kami menambahkan:

 <script src="https://localhost:8098"></script>

Setelah aplikasi Anda dimuat ulang, itu akan terhubung secara otomatis.

Beberapa Operasi yang Dapat Kami Lakukan Dengan Vue Devtools

Berikut adalah beberapa operasi bermanfaat yang dapat Anda lakukan di Vue.js DevTools.

• Tema gelap
  Di DevTools baru, sekarang ada opsi untuk mengatur antara tema terang, gelap, atau kontras. Anda dapat melakukan ini dengan masuk ke pengaturan global Anda dan memilihnya.

• Linimasa
  Garis waktu baru di devtools menampilkan informasi tentang peristiwa yang terjadi dan diatur dalam urutan kronologis. Itu terletak di sebelah tampilan inspektur dan pengaturan.

• Format nama komponen
  Anda dapat memilih untuk menampilkan nama komponen Anda dalam camelCase atau kebab-case.

Ada banyak operasi lain yang dapat Anda manfaatkan di vue devtools. Anda dapat memeriksa changelog mereka.

Alat untuk Membuat Pekerjaan Di Vue Lebih Mudah

Saat bekerja dengan Vuejs, kami mungkin menemukan beberapa fitur yang ingin kami terapkan, tetapi mungkin perlu banyak waktu untuk membuat kode keras atau hanya sedikit sulit untuk diterapkan. Sebagai pengembang profesional, kami menambahkan alat dan pustaka pembantu tertentu untuk mempermudah dan kami akan melihat beberapa di antaranya.

Perpustakaan pengujian

Pengujian dapat memainkan peran penting saat membangun aplikasi skala besar. Ini membantu kami menghindari bug yang tidak perlu selama pengembangan saat bekerja dengan tim. Mari kita lihat tiga jenis pengujian yang dapat kita lakukan dalam aplikasi Vue dan kerangka kerjanya.

• Pengujian Komponen
  Pustaka Pengujian Vue, Utilitas Uji Vue.
• Pengujian unit
  Gila, Moka.
• Tes ujung ke ujung
  Nightwatch.js, Cypress.

Pustaka Komponen

Pustaka komponen adalah kumpulan komponen yang dapat digunakan kembali yang dapat kita gunakan dalam aplikasi kita untuk membuat pengembangan UI lebih cepat dan lebih konsisten dalam aplikasi kita. Seperti React dan Angular, Vue memiliki kumpulan library komponennya sendiri. Beberapa di antaranya adalah:

• Paket Bahan Vue
  Kit UI Vue.js “Badas” yang dibuat berdasarkan desain material. Ini berisi lebih dari 60+ komponen buatan tangan.
• Buefy
  Pustaka komponen ringan berdasarkan kerangka kerja Bulma CSS. Jika Anda merasa nyaman dengan SASS, Anda tidak akan kesulitan menggunakannya.
• Vuetifikasi
  Ini juga merupakan kerangka kerja komponen desain material dengan ketersediaan perancah yang sudah dibuat untuk kode, dengan komunitas besar dan pembaruan rutin
• Quasar
  Favorit pribadi saya, ketika datang ke kerangka komponen. Quasar dengan tumpukan frontend berkinerja tinggi memungkinkan Anda membangun aplikasi lintas platform untuk Web, Seluler, dan Desktop.
  

Perpustakaan Menarik Lainnya

Perpustakaan lain yang layak dicatat adalah:

• FilePond
  Pustaka Vue.js ini mengunggah gambar apa pun yang Anda berikan dan mengoptimalkan gambar tersebut dengan pengalaman yang sangat halus.
• Vuelidat
  Pustaka ini sangat penting saat bekerja dengan formulir dan Anda memerlukan cara untuk memvalidasi input pengguna di frontend. Ini adalah validasi berbasis Model yang sederhana dan ringan.
• vue-Clickaway
  Vue tidak memiliki pendengar acara asli untuk mengetahui kapan pengguna mengklik di luar elemen, misalnya, dropdown, itu sebabnya vue-clickaway ada untuk mendeteksi kejadian klik.

Ada lebih banyak perpustakaan di luar sana. Anda dapat melihat banyak dari mereka di madewithvuejs.com dan vuejsexamples.com .

Ekstensi Bermanfaat Untuk Membantu Anda Dalam Menulis Vue

Ekstensi adalah alat yang sangat membantu, yang dapat membuat perbedaan besar dalam produktivitas harian Anda saat menulis vuejs. Selama waktu yang saya habiskan untuk menulis kode Vuejs, saya menemukan ekstensi berikut Sangat membantu:

• Vetur
  Ini adalah ekstensi nomor satu di daftar saya. Menghemat waktu saya saat menulis Vuejs. Ini memberikan penyorotan khusus, cuplikan, Intellisense, debugging, dan banyak lagi untuk Vue.js.
• Bookmark
  Ekstensi ini sangat berguna saat mengerjakan proyek besar karena Anda dapat menandai dan mengatur bookmark di tempat-tempat dalam kode Anda dan melompat ke tempat tertentu saat Anda mau.
• Eslint
  Eslint membantu kita menemukan kesalahan pengkodean dengan mudah dengan memberikan peringatan jika kita melakukan kesalahan dalam kode. Disarankan untuk menggunakannya dalam format yang lebih cantik.
• Paket Ekstensi Vue.js
  Paket ekstensi ini berisi kumpulan ekstensi lain yang akan membantu dalam pengembangan Vue.js Anda seperti Prettier, Vetur, Night Owl, Dll.

Kesimpulan

Dalam tutorial ini, kita telah melihat beberapa tip dan alat untuk membantu Anda menjadi pengembang Vue yang lebih baik. Kami memulai dengan beberapa wawasan bermanfaat tentang mengatur proyek kami untuk skala dan poin bagus lainnya yang perlu diperhatikan dan kami melengkapinya dengan Alat dan ekstensi yang membuat penulisan Vuejs jauh lebih mudah.

Ingatlah bahwa sebagian besar dari apa yang dipelajari dalam artikel ini berpusat pada Vue.js 2, untuk menghindari kesalahpahaman.

Sumber Daya Lebih Lanjut

Berikut adalah beberapa tautan berguna yang dapat Anda periksa jika Anda ingin menyelami lebih dalam beberapa hal yang telah kami diskusikan di atas.

• “Petunjuk Kustom,” Dokumen Resmi
• “Reaktivitas Vue,” Dokumen Resmi
• “Vue Devtools,” situs web
• Bicara tentang API Komposisi vs Vuex
• Alat yang berguna untuk pengembangan javascript oleh Timi Omoyeni