{"id":21112,"date":"2024-05-17T11:48:00","date_gmt":"2024-05-17T04:48:00","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=21112"},"modified":"2024-05-31T09:43:02","modified_gmt":"2024-05-31T02:43:02","slug":"belajar-singkat-memahami-dasar-dasar-vue-js-bagi-pemula","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/belajar-singkat-memahami-dasar-dasar-vue-js-bagi-pemula\/","title":{"rendered":"Belajar Singkat Memahami Dasar-Dasar Vue JS Bagi Pemula"},"content":{"rendered":"

Belajar Singkat Memahami Dasar-Dasar Vue JS Bagi Pemula<\/h1><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Salah satu kerangka kerja JavaScript paling populer dan mudah dipelajari yang tersedia saat ini adalah Vue JS. Vue JS memberikan pengembang cara yang mudah digunakan, serbaguna dan intuitif untuk membuat aplikasi online yang dinamis dan interaktif. Kami akan membahas dasar-dasar Vue.js dan cara memulai kerangka kerja ini dalam tutorial ini.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Apa Itu Vue JS<\/h2><\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"vue<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Vue.js adalah sebuah framework Javascript untuk membuat user interface dan single-page application (SPA). Vue.js dikenal juga dengan Vue saja dan dieja seperti membaca kata view (\/vju:\/). Tidak seperti beberapa kerangka kerja monolitik lain, framework satu ini dirancang dari dasar sekali agar dapat diadopsi secara bertahap.\u00a0\u00a0<\/span><\/p>\n

Selain itu, kerangka kerja ini menyediakan sejumlah fitur seperti arsitektur berbasis komponen, pengikatan data reaktif, dan alat untuk membuat aplikasi yang skalabel. Karena rendering dan komposisi elemen adalah kemampuan utama, pengguna memerlukan perutean, pengelolaan status, templat, alat pembangunan, dan alat lainnya untuk merancang aplikasi yang lebih rumit. Oleh karena itu, pengembang web yang mencari solusi ringan dan ramah pengguna untuk membuat aplikasi online berkualitas tinggi tertarik pada Vue.js.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Cara Install Vue JS<\/h3><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t
    \n
  1. Hal pertama yang harus Anda lakukan sebelum belajar Vue.js adalah menginstal Node.js. Untuk mengunduh file installer Node JS Anda bisa <\/span>klik disini<\/span><\/a>. Sesuaikan tipe sistem operasi Windows Anda apakah menggunakan 64bit atau 32bit. Klik salah satu dan tunggu hingga proses download selesai.<\/span><\/li>\n
  2. Selanjutnya, cek apakah instalasi Node JS Anda berhasil atau tidak. Caranya dengan menggunakan cmd. Buka cmd dengan cara klik tombol windows lalu ketik cmd pada menu pencarian. Klik kanan pada aplikasi Command Prompt lalu pilih Run as Administrator. Kemudian, masukkan perintah berikut untuk memastikan proses instalasi Node JS Anda berhasil: <\/span>node -v<\/span><\/li>\n
  3. Untuk menghindari terjadinya error saat proses instalasi <\/span>Vue.js<\/span>, bersihkan cache pada cmd menggunakan perintah berikut: <\/span>npm cache clean –force<\/span><\/li>\n
  4. Selanjutnya install <\/span>Vue.js<\/span> menggunakan perintah berikut: <\/span>npm install -g @vue\/cli
    \nPastikan saat proses install Anda terhubung ke dalam jaringan internet. Karena, proses install membutuhkan download file dari resource Vue.js yang ada di Node JS. Tunggu hingga proses instalasi selesai, seperti contoh gambar di bawah ini:
    \n<\/span><\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t\n\t\t
    \n\t\t\t
    \"install<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    Buat Project Vue JS<\/h4><\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t
    \n\t\t\t
      \n
    1. Setelah selesai melakukan instalasi <\/span>Vue.js<\/span>, tidak lengkap rasanya apabila tidak langsung mencoba langsung untuk membuat project menggunakan <\/span>Vue.js. Pertama, masuk ke direktori tempat Anda nanti akan menyimpan project Vue.js. Pada panduan ini menggunakan direktori Local Disk: D.<\/span><\/li>\n
    2. Selanjutnya, untuk membuat project baru Vue.js Anda cukup jalankan perintah berikut ke dalam Command Prompt Anda. myproject adalah nama folder tempat menyimpan project Vue.js, Anda juga bisa menggunakan nama lain: <\/span>vue create myproject<\/span><\/li>\n
    3. Kemudian, Anda akan diminta untuk memilih opsi instalasi pada Vue CLI. Terdapat dua pilihan yaitu default dan manually. Pada panduan ini kami menggunakan pilihan default. Karena untuk menyesuaikan pengaturan project sesuai dengan <\/span>Vue.js<\/span>. Lalu tekan ENTER.<\/span><\/li>\n
    4. Setelah itu proses pembuatan project akan berjalan. Anda perlu tunggu hingga proses ini selesai. Apabila proses pembuatan project berhasil akan muncul pesan <\/span>Successfully created project \u201cmyproject\u201d.<\/b><\/li>\n
    5. Selanjutnya Anda perlu masuk ke dalam direktori project. Gunakan perintah yang telah diberikan saat proses instalasi selesai. Pada panduan ini menggunakan perintah: <\/span>cd myprojects<\/span><\/li>\n
    6. Setelah Anda masuk ke dalam direktori project, jalankan <\/span>Vue.js<\/span> menggunakan perintah berikut: <\/span>npm run serve<\/span><\/li>\n
    7. Yang terakhir buka browser Anda dan akses salah satu dari IP \/ localhost yang ada pada gambar di atas. Maka Anda akan mendapatkan tampilan halaman dari Vue.js.<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
      \n\t
      \n\t\t\n\t\t
      \n\t\t\t
      \"vue<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
      \n\t
      \n\t\t
      \n\t\t\t

      Setelah itu Anda bisa melakukan proses develop front-end dari website atau aplikasi.<\/span><\/p>\n

      Baca juga: Angular JS, Framework JavaScript yang Memiliki Banyak Peminat<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Belajar Singkat Memahami Dasar-Dasar Vue JS Bagi Pemula Salah satu kerangka kerja JavaScript paling populer dan mudah dipelajari yang tersedia saat ini adalah Vue JS. Vue JS memberikan pengembang cara yang mudah digunakan, serbaguna dan intuitif untuk membuat aplikasi online yang dinamis dan interaktif. Kami akan membahas dasar-dasar Vue.js dan cara memulai kerangka kerja ini [...]","protected":false},"author":32,"featured_media":21115,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":300,"footnotes":""},"categories":[300],"tags":[427,426,425],"class_list":["post-21112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-definisi-vue-js","tag-install-vue-js","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/21112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=21112"}],"version-history":[{"count":0,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/21112\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/21115"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=21112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=21112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=21112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}