Tutorial Vue.js untuk Pengembang Pemula: Pelajari Dasar-Dasar dan Gunakan Struktur Vue Pemula ini

Tutorial Vue.js untuk Pengembang Pemula


Setiap kali Anda mulai menggunakan teknologi baru dalam arus pengembangan Anda, Anda mungkin merasa setidaknya sedikit terintimidasi. Terutama ketika ada banyak paket npm di luar sana di alam liar. Mencampur dan mencocokkan sesuatu terkadang membutuhkan banyak waktu dan usaha, dan biasanya membuat frustrasi. Di sinilah tutorial Vue.js berikut untuk pengembang pemula mulai berlaku.

Apa itu Vue.js? Kenapa kamu harus peduli?

Vue.js atau Vue adalah kerangka kerja JavaScript untuk membangun antarmuka pengguna. Dibandingkan dengan kerangka kerja lain, seperti Angular atau Bereaksi, Vue lebih mudah didekati dan belum memiliki kurva belajar yang curam.

Vue juga modular, dan akan memungkinkan Anda untuk membagi kode Anda menjadi komponen yang dapat digunakan kembali. Masing-masing dari mereka memiliki markup HTML, CSS dan kode JavaScript mereka sendiri.

Apa ruang lingkup tutorial Vue.js ini?

Tujuan tutorial singkat Vue.js ini adalah untuk memberi Anda beberapa perancah yang dapat Anda bangun dan bereksperimen dengan Vue. Kami akan melihat pengaturan dasar aplikasi Vue di dalam dasbor WordPress.

(Catatan; Kami tidak akan mengajari Anda Vue per se dalam panduan ini, tetapi Anda dapat melanjutkan dan mempelajari lebih lanjut tentang kerangka kerja dari panduan resmi setelah Anda menyiapkan proyek di sini – di mana Anda dapat terus bereksperimen setelah kami selesai. Kami juga merekomendasikan beberapa pustaka komponen UI Vue yang paling menarik yang membuat proses pengembangan lebih efisien.)

Apa yang akan kita lakukan adalah menggunakan templat yang telah ditentukan sebelumnya untuk plugin WordPress menggunakan Vue. Anda dapat menemukannya di repositori GitHub berikut jika Anda ingin melihat lebih dalam: https://github.com/abaicus/vue-wp-bootstrap.

Tutorial Vue.js: Prasyarat

Ada beberapa hal yang seharusnya sudah Anda siapkan di komputer Anda untuk terus mengikuti panduan ini:

Pertama, Anda akan memerlukan tumpukan LAMP – Anda dapat menggunakan XAMPP pada Windows atau Mac, atau Local by Flywheel pada Mac, dan kemudian buat sendiri instalasi WordPress lokal baru.

Pastikan Anda memiliki Manajer paket NodeJS (NPM) diinstal pada mesin Anda. Anda juga perlu menginstal dua paket lagi melalui terminal – Vue CLI dan alat inisialisasi template Vue. Seperti itu:

instal $ npm -g @ vue / cli
instal $ npm -g @ vue / cli-init

Setelah Anda menginstal kedua dependensi ini, Anda perlu mengubah direktori aktif ke direktori wp-content / plugins instance WordPress lokal Anda dan kemudian jalankan perintah berikut di sana:

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

Selanjutnya, Anda akan diminta untuk menjawab beberapa pertanyaan tentang pengaturan proyek Anda.

Untuk prompt Build, langsung saja dan pilih opsi pertama untuk saat ini "Runtime + Compiler: direkomendasikan untuk sebagian besar pengguna".

Anda dapat mengaktifkan linter ESLint jika Anda mau. Ini akan mendeteksi kesalahan linting dalam proyek Anda, tetapi Anda tidak perlu khawatir tentang ini sekarang.

Komit Lint dan Pra-Komit Kait dimaksudkan untuk memeriksa pesan komit Anda dan kode sebelum mengirim komit ke GitHub – untuk menjaga semuanya rapi dan diformat dengan baik.

Anda akan berakhir dengan terminal yang terlihat kurang lebih seperti ini setelah selesai:

Anda dapat melanjutkan dan ikuti instruksi di layar. Ubah direktori ke direktori plugin yang baru dibuat dan jalankan perintah yang ditunjukkan di terminal prompt. Ini akan mengaktifkan dan menjalankan aplikasi Anda, menunggu perubahan di dalam kode Anda dan itu akan mengubah kode Vue ke JavaScript.

Apa fungsinya?

Tidak banyak. Ini hanya aplikasi dasar yang menampilkan beberapa data dari backend. Tidak banyak Vue di bawah tenda. Anda dapat melanjutkan ke halaman Dashboard Plugins dan mengaktifkannya. Ini akan menambahkan halaman baru di Menu Admin Anda. Setelah menavigasi ke sana, Anda akan menemukan halaman dasbor dengan dua string:

Struktur perancah plugin

Mari kita lihat struktur file untuk plugin yang baru dibuat. Kami akan mengabaikan sebagian besar file konfigurasi dalam tutorial Vue.js ini sehingga kami dapat fokus pada struktur aplikasi:

Pertama, kami mendapatkan file plugin.php, yang merupakan titik masuk untuk plugin yang sebenarnya. Di sini, kita memiliki yang utama Plugin kelas. Di sinilah komponen utama aplikasi dimasukkan dan dijalankan.

Selanjutnya, ada file package.json di mana semua dependensi dan sekelompok info proyek lainnya ditentukan. Bagian di mana Anda mungkin tertarik tinggal di bawah "skrip" bidang. Di sana, Anda memiliki semua perintah yang dapat Anda jalankan dengan awalan npm run. Yang penting, untuk saat ini, haruslah npm run dev (yang membangun aplikasi untuk pengembangan) dan npm run build (yang harus Anda jalankan setelah Anda siap untuk menggunakan aplikasi Anda untuk produksi). Perintah lain berdekatan dengan dua ini atau melakukan hal-hal lain yang tidak perlu Anda khawatirkan saat ini.

Di dalam direktori include, ada tiga file:

  • Kelas rest.php tidak melakukan apa pun saat ini, tetapi Anda sudah memiliki struktur untuk menambahkan rute RestAPI Anda
  • Kelas aset.php menangani enqueueing gaya dan skrip. Di sini, file JavaScript dilokalkan untuk meneruskan data awal dari PHP ke aplikasi Vue kami. Saat ini, hanya ada dua teks yang dikirim, tetapi Anda dapat memasukkan apa pun yang Anda inginkan.
  • File admin.php adalah file yang bertugas menambahkan halaman baru di dasbor dan merender halaman plugin yang sebenarnya. Anda akan melihat aplikasi itu sendiri dibuat seperti dua tag kosong di dalam fungsi plugin_page (). Itu karena JavaScript akan menangani render aplikasi yang sebenarnya setelah dimuat.

Di dalam direktori aset, Anda akan menemukan empat direktori lagi:

  • Direktori src – file sumber untuk aplikasi Vue kami, yang akan kami bicarakan nanti.
  • Direktori scss – file gaya SCSS dari mana kita menghasilkan stylesheet CSS.
  • Direktori js – kode yang diubah yang dihasilkan dari file kami di direktori src.
  • Direktori css – gaya yang dikompilasi dari file SCSS.

Direktori src dan file template Vue

Di dalam direktori ini, ada dua file: main.js dan App.vue. File main.js adalah titik masuk untuk aplikasi. Itu menempel komponen aplikasi Vue ke elemen DOM dengan id yang sesuai.

/ * jshint esversion: 6 * /
mengimpor Vue dari ‘vue’
impor Aplikasi dari ‘./App.vue’

window.addEventListener (‘load’, function () {
Vue baru ({// eslint-disable-line no-new
el: ‘# mvdp-app’,
komponen: {Aplikasi},
render: (h) => h (Aplikasi)
})
})

Markup aplikasi aktual ada di dalam templat App.vue:

/ * jshint esversion: 6 * /

{{this.strings.title}}

{{this.strings.description}}

/ * MVDP global * /
ekspor standar {
data () {
kembali {
string: MVDP.strings
}
},
nama: ‘App.vue’
}

Anda dapat melihat di dalam cuplikan di atas bahwa kami menggunakan string yang kami pelokalkan di kelas Aset. Salah satu fitur hebat Vue adalah bahwa kode komponen ditata dengan rapi ke dalam templat, skrip, dan gaya sehingga mudah untuk memahami strukturnya..

Itu saja, Anda sekarang memiliki titik awal yang kuat untuk apa pun yang ingin Anda kembangkan lebih lanjut dengan Vue.js! Saya harap tutorial Vue.js ini bermanfaat.

Jangan lupa untuk bergabung dengan kursus kilat kami tentang mempercepat situs WordPress Anda. Dengan beberapa perbaikan sederhana, Anda dapat mengurangi waktu loading hingga 50-80%:

Layout, presentasi, dan pengeditan oleh Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map