Pada kesempatan kali ini saya akan menjelaskan cara install template vue-cli dengan npm. Perlu teman-teman ketahui sebelumnya, vue.js menyediakan cli (command line interface) untuk menggenerate project yang ingin dibuat yang berjalan disisi NPM. Untuk teman-teman yang belum mengetahui apa itu NPM disini akan saya jelaskan terlebih dahulu, NPM adalah Node Project Manager yang bertugas sebagai manager paket untuk bahasa pemrograman JavaScript yang menjadi manager default untuk lingkungan runtime Node.js. Npm terdiri dari command line client yang biasa disebut npm, bukan cuma itu saja untuk framework lainnya seperti vue.js bisa berjalan disisi NPM, sama halnya seperti package manager punya php yaitu Compozer.Langsung saja untuk menginstal template bawaan vue-cli, pastikan kalian sudah menginstal paket node.js beserta dengan NPM bawaannya (saya sarankan menggunakan node.js versi yang terbaru). Jika sudah untuk memastikan terlebih dahulu bahwa node dan npm sudah terinstal di komputer kalian, bisa langsung buka CMD (Command Prompt) dan ketikan lokasi yang ingin dijadikan root directory tempat tersimpannya project vue.js nantinya. Namun pada contoh disini saya menyimpan didalam directory D <maka ketikan cd d: >, jika sudah selanjutnya ketikan node -v -> ENTER (jika node sudah terinstal maka akan menampilkan informasi versi dari node yang sudah diinstal) Selanjutnya ketikan lagi npm -v -> ENTER (jika NPM sudah terinstal maka akan menampilkan informasi versi dari NPM yang terinstall). Sampai disini kalian sudah memenuhi persyaratan sebelum melakukan instalasi atau generate project vue-cli dan CMD (command prompt) nya jangan ditutup dulu karena akan berlanjut ke tahapan selanjutnya. Langsung saja untuk tahapannya selanjutnya seperti dibawah ini.

Berikut Tahapannya :

  • Selanjutnya install vue-cli terlebih dahulu dengan mengetikanperintah seperti berikut :

  • Selanjutnya, untuk menginstal paket template bawaan vue-cli, kalian bisa ketikan lagi perintah seperti berikut :

Keterangan :

1. vue init adalah untuk menggenerate atau membuat project vue-cli

2. webpack adalah salah satu nama template yang disediakan oleh vue-cli dan yang ingin saya gunakan nantinya

3. brian adalah nama folder project yang ingin dibuat yang tersimpan di root folder yang sebelumnya sudah ditentukan

  • Jika sudah tekan ENTER dan selanjutnya kalian akan mendapatkan pertanyaan-pertanyaan guna untuk kepentingan konfigurasi dan identitas dari project yang akan dibuat terserah kalian, Seperti Contoh Berikut :

  • Tunggu hingga proses generate project beserta dengan template vue-cli selesai.
  • Jika sudah akan ada instruksi yang kalian dapati untuk memasuki root folder project yang berhasil dibuat dengan mengetikan perintah cd nama-project dilanjutkan dengan menjalankan project untuk bisa diakses dibrowser dengan mengetikan npm run dev
  • Jika sudah selanjutnya buka browser kalian dan ketikan http://localhost:8080

Sampai disini penjelasan saya mengenai cara install template vue-cli dengan npm, semoga bermanfaat.