{"id":1341,"date":"2022-05-20T15:53:32","date_gmt":"2022-05-20T08:53:32","guid":{"rendered":"https:\/\/duniacoding.info\/?p=1341"},"modified":"2022-05-20T15:53:36","modified_gmt":"2022-05-20T08:53:36","slug":"belajar-vue-js-cara-install-vue-js","status":"publish","type":"post","link":"https:\/\/duniacoding.id\/blog\/belajar-vue-js-cara-install-vue-js\/","title":{"rendered":"Belajar Vue js #3 : Cara install Vue js"},"content":{"rendered":"\n
\"cara-install-vue-js\"<\/figure>\n\n\n\n

Setelah di artikel sebelumnya kita belajar mengenai Vue Directive.<\/a> Disini kita akan belajar Cara install Vue js dengan sebenar-benarnya, jadi gapakai Script dari Luar lagi ya. Tapi kita akan mulai bertemu dengan File berekstensi .vue<\/code>.<\/p>\n\n\n\n

Kebutuhan sebelum belajar Cara install Vue js<\/h2>\n\n\n\n

Sebelum teman-teman mulai Install Vue js. Pastikan terlebih dahulu kalian sudah menginstall Node <\/code>di Komputer\/Laptop kalian. Node \/ Node js<\/code> ini akan digunakan untuk Men-Download Package <\/em>Vue Js kita. Cara Cek nya mudah sekali, buka saja terminal\/Cmd lalu ketik node -v<\/code>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nah disini punya Mimin sudah terinstall Node versi 16.14.0<\/code> ya. Kalau kalian belum ada, bisa download disini https:\/\/nodejs.org\/en\/download\/<\/a>. Silahkan pilih sesuai Versi dan Sistem Operasi kalian ya.<\/p>\n\n\n\n

Mulai Instalasi Vue Js.<\/h2>\n\n\n\n

Untuk memulai instalasi Vue Js. pertama silahkan kalian buat Folder tersendiri. Lalu buka Terminal\/Cmd <\/code>untuk diarahkan ke Folder tersebut.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Nah kalau Mimin. Mimin arahkan ke Folder E:\/Belajar. Nah Folder Belajar<\/code> ini Mimin akan praktekan Cara install Vue js.<\/p>\n\n\n\n

1. Ketik Syntax untuk Instalasi<\/h3>\n\n\n\n

Nah untuk instalasi ini kalian bisa memilih untuk memakai yarn <\/code>atau npm<\/code>. Kalau di Tutorial ini Mimin akan memilih menggunakan npm <\/code>saja.<\/p>\n\n\n

\nnpm init vue@latest\n<\/pre><\/div>\n\n\n
atau<\/p>\n\n\n
\nyarn global vue@latest\n<\/pre><\/div>\n\n\n
Nah setelah selesai. Kalian akan diminta untuk Melakukan beberapa Setting untuk Web Apps kalian. Kurang lebih isinya seperti dibawah ini<\/p>\n\n\n\n
  1. Project name: \u2026<\/li>
  2. Add TypeScript? \u2026 No \/ Yes<\/li>
  3. Add JSX Support? \u2026 No \/ Yes<\/li>
  4. Add Vue Router for Single Page Application development? \u2026 No \/ Yes<\/li>
  5. Add Pinia for state management? \u2026 No \/ Yes<\/li>
  6. Add Vitest for Unit testing? \u2026 No \/ Yes<\/li>
  7. Add Cypress for both Unit and End-to-End testing? \u2026 No \/ Yes<\/li>
  8. Add ESLint for code quality? \u2026 No \/ Yes<\/li>
  9. Add Prettier for code formatting? \u2026 No \/ Yes<\/li><\/ol>\n\n\n\n
    2. Setting Vue Js<\/h3>\n\n\n\n
    Nah sekarang kita akan mulai setting Vue Js kita. Di Artikel Cara install vue js ini kita akan Install secara basic saja. Sambil aku jelaskan sedikit mengenai masing-masing Settingan dari Vue js ini.<\/p>\n\n\n\n
    1. Pertama adalah Project Name<\/code>. Jelas ya ini adalah nama Project kalian. Ada beberapa larangan disini seperti tidak boleh pakai huruf Kapital, tidak boleh ada Spasi, dll. Nah nama Project yang kalian input ini nanti akan jadi Nama Folder Vue Js kalian<\/li>
    2. Berikutnya adalah Add Typescript?<\/code>. Nah Typescript<\/code> ini adalah Bahasa Javascript yang lebih ‘aman’ dan lebih banyak peraturannya. Jadi untuk sekarang kita No <\/code>saja<\/li>
    3. Selanjutnya untuk Add JSX Support<\/code> kita juga No <\/code>saja.<\/li>
    4. Berikutnya kita diminta untuk memilih Add Vue Router for Single Page Application development?<\/code>. Nah ini maksudnya apakah kita mau membuat sebuah sistem Routing<\/code> untuk Web kita? disini kita pilih Yes <\/code>saja. Akan aku jelaskan Sistem Routing di Artikel selanjutnya.<\/li>
    5. Berikutnya adalah pertanyaan apakah kita mau menambahkan Pinia<\/code> untuk State Management? nah ini kita No <\/code>saja.<\/li>
    6. Lalu pilih No juga untuk Vitest for Unit Testing<\/li>
    7. Berikutnya No juga untuk Add Cypres<\/code><\/li>
    8. Lalu pilih No untuk Eslint. Eslint ini sebenarnya adalah alat untuk mendeteksi apakah ada Error di Codingan Javascript kalian<\/li>
    9. Dan Selesai, kalian sudah selesi install Vue Js kalain dengan settingan Miminalis<\/li><\/ol>\n\n\n\n
      \"\"<\/figure>\n\n\n\n
      3. Menjalankan Vue Js<\/h3>\n\n\n\n
      Berikutnya kita tinggal menjalankan 3 Syntax dibawah itu untuk menjalankan Vue Js kita. <\/p>\n\n\n\n
      1. cd belajar-vue<\/code> untuk membuka Folder tempat instalasi kita<\/li>
      2. npm install<\/code> untuk menambahkan Package NPM di Web Apps kita<\/li>
      3. lalu npm run dev <\/code>untuk menjalankan Website kita<\/li><\/ol>\n\n\n\n
        Mari kita Praktekkan.<\/p>\n\n\n\n
        Saat kalian menjalankan Web Apps ini. kalian akan mendapatkan tampilan Terminal\/Cmd seperti ini<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        \n
        \n
        Nah ini tandanya Vue js kalian sudah berjalan. tinggal buka di web dengan Url sesuai di Local diatas. Misal disini berati http:\/\/localhost:3000.<\/p>\n\n\n\n
        \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
        Dan selesai. Kita sudah berhail belajar Cara install Vue js. <\/p>\n\n\n\n
        Kesimpulan<\/h2>\n\n\n\n
        Nah dari Artikel Cara install Vue Js ini bisa kita simpulkan kalau cara Instalasi Vue js sebenarnya sangat mudah ya. Memang saat instalai kita diberi beberapa pillihan tetapi justru pilihan tersebut yang membuat Vue Js sangat digemari, kita bisa memilih mau menambahkan sesuatu atau tidak sesuai keinginan kita. <\/p>\n\n\n\n
        Nah sampai disini saja artikel Cara install Vue Js kita. Kita ketemu lagi di Artikel selanjutnya<\/p>\n","protected":false},"excerpt":{"rendered":"
        Setelah di artikel sebelumnya kita belajar mengenai Vue Directive. Disini kita akan belajar Cara install Vue js dengan sebenar-benarnya, jadi gapakai Script dari Luar lagi ya. Tapi kita akan mulai bertemu...<\/p>\n","protected":false},"author":2,"featured_media":1279,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[49,190,189],"class_list":["post-1341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-tutorial","tag-tutorial-vue-js","tag-vue-js"],"_links":{"self":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/comments?post=1341"}],"version-history":[{"count":1,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1341\/revisions"}],"predecessor-version":[{"id":1355,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/posts\/1341\/revisions\/1355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media\/1279"}],"wp:attachment":[{"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/media?parent=1341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/categories?post=1341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/duniacoding.id\/blog\/wp-json\/wp\/v2\/tags?post=1341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}