Cara Mudah Instalasi dan Menjalankan Vue Admin Template

Share:

Halo semuanya, kembali lagi di sahretech. Kali ini saya akan berbagi tutorial kepada kalian semua cara melakukan instalasi template vue js dan cara menggunakannya. Untuk itu ayo ikuti turorialnya berikut ini!.


Ada banyak sekali template bootstrap yang dapat kita gunakan untuk mempercantik dan mempermudah pengembagan sebuah website. Dengan hadirnya template-template yang ada di internet, para developer tidak perlu pusing lagi memikirkan tampilan yang cantik dan responsive, karena semua itu sudah disediakan oleh template yang kita download. Kali ini kita akan menggunakan template gratis yang dibuat oleh https://www.creative-tim.com yaitu vue argon dashboard.

Oh iya, saya juga sudah mengulas cara menggunakan template bootstrap di php native, klik link berikut ini untuk melihat tutorialnya https://www.sahretech.com/2019/10/cara-pasang-template-bootstrap-di.html

Saya juga telah membuat artikel lainnya, yaitu cara menggunakan template bootstrap di laravel. Klik link berikut ini untuk melihat tutorialnya https://www.sahretech.com/2020/08/cara-mudah-memasang-template-bootstrap.html

Lalu saya juga membuat artiktel tentang template-template pilihan. Kalian bisa klik artikel nya pada link berikut ini. https://www.sahretech.com/2020/10/template-boostrap-admin-gratis-pilihan.html

Cara Install dan Menggunakan Vue Admin Template

1. Install Node.js

Pertama, kalian perlu menginstall node.js terlebih dahulu. Download node.js pada link berikut ini https://nodejs.org/en/download/. Setelah terdownload, install node.js seperti aplikasi pada umumnya dan tunggu instalasi hingga selesai.

Setelah instalasi selesai, jalankan perintah di bawah ini menggunakan cmd atau terminal untuk mengecek apakah node.js telah berhasil diinstall di komputer kalian. Perintah berikut ini  berfungi untuk mengecek versi node.js yang terinstall


node -v

Sebenarnya hal yang paling kita butuhkan dari node.js adalah NPM. NPM akan otomatis terinstall saat kita melakukan instalasi node.js. NPM memiliki fungsi yang sama dengan composer, NPM adalah singkatan dari node package manager, yang berfungsi untuk mendownload modul atau library beserta depedency tambahan dari internet. Untuk mengecek versi npm yang digunakan kalian bisa menjalankan perintah di bawah ini pada cmd atau terminal.


npm -v


2. Download Template

Setelah tahap pertama selesai dilakukan, selanjutnya download vue argon dashboard pada link berikut ini https://www.creative-tim.com/product/vue-argon-dashboard dan letakkan pada folder yang telah kalian tentukan sebelumnya. Sedikit informasi: vue argond dashboard adalah template yang dibuat oleh https://www.creative-tim.com disana juga terdapat template-template keren lainnya. Dan template ini juga sudah menggunakan bootstrap 4.

template vue js sahretech
Template Vue Js


3. Jalankan Template Vue

Setelah terdownload dan tersimpan pada folder yang telah kalian tentukan. Pertama masuk terlebih dahulu ke dalam folder template vue argon dashboard dengan menggunakan cmd atau terminal. Pada tutorial kali ini saya meletakkan folder template vue pada folder documents/latihan.

sahretech
Letak folder template

Setelah masuk ke dalam folder template, selanjutnya jalankan perintah di bawah ini dengan cmd atau terminal untuk mendownload depedency yang diperlukan.


npm install

Setelah proses download depedency selesai, selanjuntya jalankan perintah di bawah ini dengan cmd atau terminal untuk menjalankan server. Biasanya akan muncul http://localhost:8080, copy link tersebut untuk dijalankan di browser kalian.


npm run serve


vue argon sahretech
Template Vue Argon


Sekian tutorial cara mudah melakukan instalasi dan menggunakan vue admin template. Kurang lebihnya saya mohon maaf, semoga bermanfaat bagi para pembaca sekalaian. Bagi yang masih kebingunan silahkan tinggalkan komentar kalian di bawah ini. Sampai jumpa di tutorial keren lainnya. Happy Coding. :)


7 comments:

  1. saya ikutin langkah-langkah seperti tercatat di atas....

    C:\xampp\htdocs\vue-template>npm run dev
    npm ERR! missing script: dev

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\User\AppData\Roaming\npm-cache\_logs\2021-04-01T11_06_37_395Z-debug.log

    setelah di ketik npm run dev, kok error ya... kenapa..

    ReplyDelete
    Replies
    1. terima kasih kunjugannnya :), coba jalankan npm run serve

      Delete
  2. bang sudah ane terapin langkah nya tapi kok banyak tulisan error ya bang? mohon info

    kyk:

    unable to resolve depedency tree
    error
    error
    error

    ReplyDelete
    Replies
    1. Bisa coba jalanin npm install atau npm update.

      Klo masih error coba tanya saya langsung di facebook

      Delete
    2. atau bisa pakai sintax --force di ujung npm install nya : npm install --force

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi