Semua yang Anda butuhkan untuk memulai dengan Vue.js

Kemungkinan besar, saat membaca baris-baris ini, Anda telah mendengar tentang kerangka kerja JavaScript yang disebut Vue . Jika Anda akan mencobanya, tetapi Anda tidak benar-benar membayangkan apa yang harus Anda mulai dengan, maka materi ini ditulis khusus untuk Anda. Penulisnya mengatakan dia ingin berbicara tentang mengapa dia sangat menyukai Vue. Selain itu, ia akan memperkenalkan kepada semua orang 4 cara untuk menulis aplikasi pertama di Vue.

Tinjauan Material

Biasanya saya mencoba untuk tidak membicarakan terlalu banyak cara untuk menyelesaikan masalah yang sama bagi mereka yang baru mulai mempelajari kerangka kerja tertentu. Tetapi dalam kasus ini, saya percaya bahwa menunjukkan beberapa cara untuk mengembangkan aplikasi Vue pertama sangat penting. Mungkin Anda suka bekerja dengan baris perintah, atau mungkin dengan alat yang dilengkapi dengan antarmuka grafis. Keduanya cocok untuk pengembangan Vue. Selain itu, aplikasi Vue dapat ditulis tanpa beralih ke baris perintah. Untuk melakukan ini, cukup tambahkan tag ke halaman HTML untuk memuat skrip yang sesuai. Dan akhirnya, Anda mungkin tidak ingin khawatir tentang pengaturan lingkungan pengembangan Anda. Sebaliknya, Anda berusaha untuk mencoba Vue sesegera mungkin, tanpa gerakan yang tidak perlu. Faktanya, apa pun strategi yang Anda ikuti, di sini Anda akan menemukan sesuatu untuk membantu Anda memulai dengan Vue.

Dalam proses membaca materi ini Anda akan menemukan tautan ke sumber daya yang bermanfaat. Dan ketika Anda membaca seluruh artikel ini, saya akan memberi tahu Anda apa yang harus Anda perhatikan untuk studi lebih lanjut tentang Vue. Perlu dicatat bahwa di sini kita tidak akan masuk ke seluk-beluk Vue, kita tidak akan mempertimbangkan semua mekanisme yang mungkin dari kerangka kerja ini. Kita akan membahas dasar-dasarnya dan menuju aplikasi pertama yang berfungsi.

Pertama, mari kita bicara tentang beberapa fitur menarik Vue.

Kekuatan Vue

Kekuatan Vue, menurut saya, adalah betapa ramahnya kerangka ini bagi para pemula. Tim pengembang Vue telah melakukan pekerjaan yang luar biasa, berusaha memastikan bahwa pengembang dari berbagai kualifikasi dapat dengan cepat mulai bekerja secara produktif dengan kerangka kerja. Jika Anda tahu HTML, CSS, dan JavaScript - ini berarti Anda benar-benar selangkah lagi mengembangkan aplikasi yang cukup kuat di Vue.

Saya juga percaya bahwa Vue, di antara tiga alat pengembangan front-end terkemuka (Angular, React, dan Vue), memiliki hambatan masuk terendah. Ini benar karena beberapa alasan, tetapi bagi saya itu datang ke tiga fitur utama Vue:

• Dokumentasi hebat.
• Komunitas yang luar biasa.
• Ini adalah kerangka kerja progresif.

▍ Dokumentasi

Jika Anda berbicara dengan pengembang yang menyukai Vue, maka saya pikir banyak dari mereka pertama-tama akan berbicara tentang kualitas dokumentasi untuk kerangka kerja ini. Jika Anda mengunjungi Vue.js, Anda mungkin menemukan bahwa dokumentasi dibagi menjadi beberapa bagian:

• Kepemimpinan . Di sini Anda dapat menemukan semua yang Anda butuhkan untuk memulai dengan Vue.js. Bagian ini dibagi menjadi subbagian yang mudah dipahami yang memperkenalkan pembaca pada konsep yang diperlukan untuk mulai mengembangkan aplikasi berbasis komponen.
• API Bagian ini memberikan deskripsi rinci tentang Vue API. Misalnya, jika Anda menemukan beberapa metode yang tidak Anda yakini, kunjungan ke bagian ini akan membantu memperjelas situasi.
• Rekomendasi Di sini Anda dapat menemukan rekomendasi yang bagus, mengikuti yang Anda dapat menghindari munculnya kesalahan. Rekomendasi ini dapat memperingatkan pengembang terhadap penggunaan pola-anti. Yang penting adalah bahwa itu kemungkinan besar bukan aturan yang sulit, tetapi sesuatu seperti panduan. Setelah Anda merasa nyaman dengan Vue, menulis beberapa aplikasi, saya sarankan Anda membaca materi di bagian ini. Saya percaya ini adalah sumber pengetahuan yang sangat berharga tentang Vue.
• Contohnya . Di sini Anda dapat menemukan contoh aplikasi yang dikembangkan oleh Vue. Di tempat Anda, saya tidak akan melihat di sini sampai saya terbiasa sedikit dengan pengembangan komponen. Tetapi sedikit kemudian, ketika Anda siap untuk belajar tentang bagaimana aplikasi Vue lengkap diatur, Anda harus mempelajari bagian ini.
• Buku resep Bagian ini berisi jawaban untuk pertanyaan umum tentang Vue. Misalnya, untuk pertanyaan seperti: "Bagaimana melakukan validasi formulir?", "Bagaimana melakukan pengujian unit komponen?". Ini, sekali lagi, adalah sumber daya yang berharga, tetapi pengembangan bahan-bahannya harus ditunda sampai saat Anda memiliki pertanyaan yang mirip dengan yang tercantum di atas.
• Alat dan pustaka inti. Vue memiliki alat dan pustaka inti yang sangat baik. Kami tidak akan membahas detail khusus tentang ini, karena kami harus segera mulai menulis kode. Di sini saya akan memberikan beberapa tautan ke materi, yang keberadaannya bermanfaat untuk diketahui. Jadi, di antara alat Vue, saya akan perhatikan yang berikut: alat pengembang , Vue CLI , Vue Loader . Berikut ini tautan ke materi di perpustakaan resmi: Vue Router , Vuex , Vue Server Renderer .

▍ Komunitas

Sebagai seorang programmer, saya merasa terlibat dalam beberapa komunitas besar. Salah satunya adalah komunitas Vue. Anggotanya ramah, ramah, mereka lebih dari bersedia untuk membantu mereka yang membutuhkannya. Saya sarankan mengikuti anggota komunitas Vue berikut di Twitter. Jadi akan lebih mudah bagi Anda untuk memahami apa yang mereka lakukan dan mencari tahu apa yang mereka jalani. Inilah tautannya:

• Evan kamu
• Chris fritz
• Sarah drasner
• Damian sulisz
• Divya sasidharan
• Guillaume chau
• Ben hong
• Sebastien chopin
• Natalia Tepluhina
• Edd yerburgh

UeVue adalah kerangka kerja progresif

Jika Anda mengunjungi beranda Vue.js, Anda dapat melihatnya di sana: "Kerangka JavaScript progresif." Pada pandangan pertama, ini mungkin tampak seperti taktik pemasaran biasa, tetapi memiliki sedikit pemahaman tentang esensi Vue, Anda dapat memahami bahwa ini tidak benar. Pertama, mari kita tentukan arti kata "progresif." Ini adalah sesuatu yang terjadi atau berkembang secara bertahap atau bertahap; itu adalah sesuatu yang dilakukan langkah demi langkah.

Segera Anda akan melihat bahwa ketika mengembangkan aplikasi Vue, Anda dapat bekerja dengan secara bertahap memperkenalkan kemampuan kerangka kerja ini ke dalamnya. Misalnya, jika Anda sudah memiliki proyek tertentu, maka Anda dapat melengkapinya dengan dukungan Vue tanpa masalah. Anda dapat mulai dengan memuat skrip Vue dan menulis beberapa baris kode.

Jika Anda ingin menggunakan Vue CLI, alat baris perintah Vue, untuk menggunakan proyek baru dengan kemampuan yang Anda butuhkan, maka ini juga bukan masalah. Ketika aplikasi Anda tumbuh, dan Anda memerlukan beberapa fitur yang cukup canggih, seperti perutean atau manajemen negara, aplikasi tidak akan sulit untuk dilengkapi dengan fitur-fitur ini.

Seperti yang telah disebutkan, Vue adalah kerangka kerja yang terjangkau. Jika Anda sudah tahu HTML, CSS, dan JavaScript, itu artinya Anda siap untuk memulai dengan Vue. Sebagai soal fakta, jika Anda benar-benar ingin mulai menulis aplikasi Vue, maka saya mengusulkan untuk melakukan ini.

Opsi # 1: Skrip Vue terhubung ke halaman

Cara pertama untuk menggunakan Vue yang sedang kami jelajahi adalah dengan menghubungkan skrip Vue ke halaman menggunakan <script> . Jika Anda sudah bekerja dengan JavaScript, maka tidak ada yang baru untuk Anda. Yaitu, kita berbicara tentang fakta bahwa ada halaman HTML yang perlu dilengkapi dengan beberapa fungsionalitas yang diterapkan di beberapa perpustakaan JS. Untuk ini, pustaka terhubung ke halaman menggunakan <script> . Perlu dicatat bahwa metode penggunaan Vue yang dipertimbangkan di sini tidak hanya cocok untuk mengembangkan aplikasi pelatihan. Ia menemukan aplikasi dalam proyek nyata.

Biasanya cukup sulit untuk memperkenalkan alat, perpustakaan, atau kerangka kerja baru ke dalam proyek nyata, misalnya, dalam organisasi tempat programmer bekerja. Misalnya, Anda sangat menikmati bekerja dengan Vue. Anda pergi ke pihak berwenang dan bertanya apakah Anda dapat menulis ulang seluruh proyek ke Vue. Menanggapi pertanyaan seperti itu, hampir tidak ada opsi yang akan segera ditolak. Jika Anda menawarkan untuk menggunakan Vue pada halaman tertentu, pengembangan yang saat ini Anda lakukan, maka penawaran semacam itu mungkin dapat diterima.

Dalam contoh berikut, kami akan mengembangkan aplikasi yang sangat primitif, yang bagus karena akan sangat nyaman untuk mempertimbangkan beberapa konsep Vue di dalamnya.

▍ "Halo, Vue!"

Dalam aplikasi ini kita akan menampilkan teks "Halo, Vue!", Dan di bawah teks - waktu dan tanggal saat ini. Kemudian kita akan menulis kode yang membuat tanggal dan waktu selalu terbarui. Akibatnya, pengguna aplikasi akan dapat menggunakannya sebagai jam tangan biasa, mengamati berlalunya waktu. Buat folder baru, buat file index.html di dalamnya, dan tambahkan kode berikut ke file ini:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Hello, Vue.js</title> </head> <body> </body> </html> 

Sekarang kita memiliki bingkai halaman, fondasi aplikasi masa depan. Oleh karena itu, langkah kami selanjutnya adalah menghubungkan skrip Vue.js. ke halaman ini. Tambahkan ke kode halaman, tepat di atas tag </body> penutup, yang berikut:

 <!--             --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> </script> 

Perhatikan komentarnya. Dia menunjuk ke satu hal penting. Yaitu, sekarang kami telah menghubungkan versi Vue yang dimaksudkan untuk pengembangan ke halaman. Jika halaman tertentu dimaksudkan untuk penggunaan nyata, maka Anda harus menghubungkan versi produksi skrip dengan itu. Detail tentang ini dapat ditemukan di sini .

Sekarang, setelah menghubungkan skrip, pertama-tama, kita perlu menambahkan elemen root ke halaman yang terhubung dengan instance Vue:

 <div id="app"> </div> 

Setelah itu, buat instance Vue baru dan beri tahu dia elemen root mana yang perlu disambungkan:

 <script>  const app = new Vue({    el: '#app'  }) </script> 

Sekarang buat beberapa variabel. Mereka akan menyimpan nilai-nilai yang kami gunakan untuk menampilkan informasi pada halaman. Ini dilakukan dengan mendeklarasikan properti dari objek data :

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello, Vue!',      now: new Date()     }) </script> 

Sekarang setelah data siap, kami siap menggunakan kemampuan Vue untuk menampilkannya di halaman. Ini dilakukan dengan menggunakan konstruksi sederhana dan mudah dibaca:

 <div id="app">  <h1>{{ message }}</h1>  <p>{{ now }}</p> </div> 

Sekarang Anda dapat memberi selamat kepada diri sendiri karena baru saja membuat aplikasi Vue.js pertama Anda. Jika Anda membuka index.html di browser, maka itu akan menampilkan halaman di mana "Halo, Vue!" Ditulis dalam huruf besar. Di bawah tulisan ini harus berupa garis yang menampilkan tanggal dan waktu saat ini. Selama pengembangan dan penelitian versi contoh saya, saya menggunakan Visual Studio Code dan ekstensi Server Live .

Apa yang kami lakukan di sini tidak terlihat seperti proyek yang sangat maju. Tetapi di dalam perut Vue, banyak hal terjadi yang memungkinkan proyek ini bekerja seperti yang kita butuhkan. Kerangka kerja menetapkan hubungan antara DOM dan data, setelah itu aplikasi menjadi reaktif. Bagaimana kita memeriksanya? Sangat sederhana - cukup buka konsol JS (tepat di halaman aplikasi) dan tulis sesuatu di app.message . Ini harus mengarah pada perubahan pada label yang ditampilkan pada halaman. Di bawah ini terlihat seperti apa.


Penelitian aplikasi

Vue juga memberi pengembang kemampuan untuk membuat penangan untuk acara siklus hidup komponen. Ini berarti bahwa kita dapat mendengarkan acara seperti created , mounted dan destroyed . Ketika suatu peristiwa terjadi, Anda dapat mengatur pelaksanaan beberapa kode. Saya tidak akan membahas secara rinci, karena tujuan utama dari materi ini adalah untuk menunjukkan berbagai metode untuk membuat aplikasi Vue, dan tidak untuk membongkar semua seluk-beluk kerangka kerja. Namun, sekarang kami masih melihat bagaimana pemrosesan peristiwa siklus hidup komponen terlihat dan akan selesai bekerja pada aplikasi pertama kami.

Berkat kode berikut, nilai variabel now akan diperbarui setiap detik. Saat memasang Vue, kami menggunakan setInterval untuk mengatur panggilan fungsi setiap detik untuk memperbarui tanggal dan waktu. Anda dapat membuat penangan acara siklus hidup dengan menambahkan metode yang sesuai ke objek methods . Ini sangat mirip dengan bagaimana kami bekerja dengan objek data . Ini kodenya:

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello Vue!',      now: new Date()    },    methods: {      updateDate() {        this.now = new Date();      }    },    mounted() {      setInterval(() => {        this.updateDate();      }, 1000);    }  }) </script> 

Jika Anda membuka halaman ini di browser, maka tampilannya tidak akan berubah, tetapi waktu yang ditampilkan di sana akan diperbarui setiap detik. Dalam hal ini, kita tidak perlu memperbarui DOM secara manual. Vue menautkan data ke DOM. Ketika data berubah, apa yang ditampilkan pada halaman juga berubah.

Opsi # 2: Vue CLI

Meskipun kami membuat aplikasi hanya dengan menghubungkan skrip Vue ke halaman, pendekatan ini tidak terlalu skalabel. Jika Anda perlu mengembangkan aplikasi satu halaman penuh (Aplikasi Halaman Tunggal, SPA) dan pada saat yang sama Anda ingin menggunakan alat bantu Vue, maka yang terbaik adalah menggunakan Vue CLI.

Jika Anda salah satu dari mereka yang tidak terlalu suka bekerja pada baris perintah, maka Anda dapat menggunakan alat dengan fitur serupa yang memiliki antarmuka grafis (UI Vue).

▍Menginstal Vue CLI

Pertama, kita perlu menginstal Vue CLI. Sebelum Anda melakukan ini, Anda harus mendapatkan Node.js dan npm. Jika Anda belum pernah bekerja dengan Node.js dan npm sebelumnya, luangkan waktu untuk mengenal mereka dan memahaminya sedikit. Berikut adalah perintah untuk memasang Vue CLI:

 npm install -g @vue/cli 

Untuk membuat aplikasi baru, Anda dapat menggunakan perintah vue create . Anda dapat mengetahui daftar perintah yang didukung oleh vue dengan menggunakan perintah vue -h .


Daftar perintah yang didukung oleh vue

Perintah create menerima nama aplikasi. Buat aplikasi Vue baru dengan menjalankan perintah berikut:

 vue create hello-vue 

Selama perintah ini, folder hello-vue akan dibuat di direktori saat ini. Deskripsi terperinci tentang proses membuat aplikasi menggunakan vue create layak untuk artikel terpisah.

Untuk saat ini, cukup bagi kami untuk menyetujui pengaturan default. Ini akan mengarah pada pembuatan aplikasi baru.


Membuat aplikasi baru menggunakan Vue CLI

Sekarang buka folder hello-vue , buka file yang terletak di src/components/HelloWorld.vue , dan ganti semua kontennya dengan kode berikut:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

Harap dicatat bahwa nilai teks yang muncul di msg diatur dalam file src/App.vue .

Sekarang, di baris perintah atau di terminal yang dibangun ke editor Anda, jalankan perintah berikut:

 npm run serve 

Ini akan memulai server, setelah itu akan memberikan informasi tentang cara membuka halaman awal aplikasi. Yaitu, ini http: // localhost: 8080 / .


Aplikasi Vue di browser

Di sini kami memeriksa penggunaan Vue CLI hanya sangat dangkal. Namun, saya berharap contoh ini menunjukkan kepada Anda betapa mudahnya menggunakan Vue CLI untuk membuat aplikasi baru yang dilengkapi dengan infrastruktur yang andal dan dapat menskalakan sesuai dengan kebutuhan yang berkembang dari proyek yang sedang berkembang.

Opsi # 3: UI Vue

Bersama dengan Vue CLI, dengan alat baris perintah, alat UI Vue juga diinstal. Untuk memulainya, gunakan perintah berikut:

 vue ui 

Selama eksekusi, halaman aplikasi baru akan dibuka, terletak di http: // localhost: 8000 / dashboard .


Halaman UI Vue

Menggunakan Vue UI, Anda dapat membuat proyek baru yang akan memiliki kemampuan yang sama dengan proyek yang dibuat menggunakan alat baris perintah.


Membuat proyek baru di UI Vue

Setelah pengaturan proyek selesai, Anda dapat memulainya langsung dari Vue UI dengan masuk ke bagian Project tasks dan mengklik tombol yang sesuai.


Menjalankan aplikasi di Vue UI

Opsi # 4: CodeSandbox

Meskipun opsi di atas untuk membuat aplikasi Vue pertama memungkinkan kami untuk mencapai tujuan kami, mereka memerlukan beberapa konfigurasi lingkungan pengembangan. Mungkin ini tidak cocok untuk Anda dan Anda masih belum membuat aplikasi Vue pertama Anda. Jika demikian, maka sekarang kita akan melihat cara lain untuk bekerja dengan Vue. Ini terdiri dari menggunakan lingkungan pengembangan online, salah satunya adalah CodeSandbox .

Sebelum membuat proyek di CodeSandbox, Anda harus mendaftar di situs atau masuk menggunakan akun GitHub. Setelah itu, Anda perlu membuat "kotak pasir" baru (dalam kerangka proyek ini disebut "kotak pasir") dan menemukan Vue di antara templat yang tersedia (pada tab Client templates Popular templates atau Client templates ).


Membuat proyek berbasis Vue baru di CodeSandbox

Setelah itu, aplikasi Vue baru akan siap membantu Anda. Pada gambar berikutnya, Anda dapat melihat bahwa di panel kiri Anda dapat bekerja dengan file proyek, di tengah adalah jendela editor, dan di sebelah kanan adalah area pratinjau di mana aplikasi yang berfungsi ditampilkan.


Bekerja pada aplikasi di CodeSandbox

Buka file src/components/HelloWorld.vue di editor dan ganti isinya dengan kode berikut:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

Setelah itu, Anda akan melihat aplikasi yang sama yang sudah kami kerjakan. Saat mengerjakan suatu proyek, mungkin perlu untuk menunjukkannya kepada seseorang. Misalnya, untuk berkonsultasi tentang sesuatu. CodeSandbox memungkinkan Anda melakukan ini menggunakan tautan khusus .


Bekerja pada aplikasi di CodeSandbox

Sumber daya yang bermanfaat

Berikut ini tautan ke beberapa sumber Vue favorit saya. Mereka akan membantu Anda bergerak maju dalam pengembangan kerangka kerja ini. Misalnya, di sini adalah halaman Awesome Vue , dengan mengunjungi yang Anda bisa mendapatkan gambaran tentang skala ekosistem Vue. Temukan repositori Vue di sini. Inilah blog proyek resmi. Berikut adalah situs komunitas pengembang Vue. Ini dia - Vue podcast. Berikut adalah halaman dari beberapa proyek berbasis Vue: VuePress , Nuxt , Gridsome .

Apa selanjutnya

Apa pun kerangka yang Anda gunakan untuk mengembangkan frontend, Anda harus menjaga pengetahuan JavaScript Anda dalam kondisi baik. Semakin banyak waktu yang Anda bisa curahkan untuk meningkatkan pengetahuan JS Anda, semakin baik. Jika Anda mengenal JavaScript dengan baik, itu berarti Anda dapat menangani kerangka kerja atau pustaka apa pun yang mungkin perlu Anda gunakan.

Saya sudah berbicara tentang manual Vue dari dokumentasi resmi. Tetapi perlu disebutkan lagi. Saya akan, jika saya adalah pengembang pemula, mencoba untuk berurusan dengan panduan ini selengkap mungkin, baca dan baca kembali. Tetapi pada saat yang sama, saya tidak akan lupa untuk mempraktikkan contoh kode yang ditemukan di sana. Tidak heran mereka mengatakan bahwa pengulangan adalah ibu dari pembelajaran. Pengulangan memainkan peran penting dalam proses mempelajari teknologi baru, dan Anda tidak bisa melakukannya tanpanya.

Saat bekerja dengan dokumentasi, Anda harus memberi perhatian khusus pada konsep Vue dasar berikut:

• Komponen-komponennya.
• Pengikatan data.
• Penanganan acara.
• Arahan.
• Metode
• Properti yang dihitung.
• Siklus hidup komponen.
• Properti diteruskan ke komponen.

Jangan berusaha membuat aplikasi besar untuk saat ini. Berfokuslah pada penguasaan hal-hal dasar, dan segala hal lainnya akan datang seiring waktu.

Ringkasan

Jika Anda mengikuti posting saya di Twitter, maka Anda tahu bahwa saya penggemar berat Vue. Saya suka membangun aplikasi berbasis komponen. Saya percaya bahwa menggunakan Vue tidak hanya menyederhanakan pekerjaan, tetapi juga membuat proses penulisan kode menjadi pengalaman yang menyenangkan dan menyenangkan.

Pembaca yang budiman! Jika Anda baru-baru ini mempelajari kerangka kerja klien pertama Anda, beri tahu kami bagaimana itu.