Mengenal VueJS: Menginstall vue-cli dan Membuat Project dengan vue-cli di Linux Mint 18.1/Ubuntu 16.04.x

Vue (diucapkan / vjuː /, seperti view) adalah suatu framework yang progresif untuk membangun antarmuka pengguna. Tidak seperti kerangka monolitik lainnya, Vue dirancang dari bawah ke atas untuk menjadi bertahap adoptable. Perpustakaan inti difokuskan pada lapisan tampilan saja, dan sangat mudah untuk mengambil dan mengintegrasikan dengan perpustakaan lain atau proyek yang ada. Di sisi lain, Vue juga sangat mampu powering canggih Aplikasi Single-Halaman bila digunakan dalam kombinasi dengan

perkakas modern dan mendukung perpustakaan.

Web Resmi/Sumber : https://vuejs.org/

Vue-cli : https://github.com/vuejs/vue-cli

Sebelum menginstall vue dan vue-cli anda harus terlebih dahulu menginstall nodejs dan npm disini : https://ajikamaludin.blogspot.co.id/2017/03/menginstall-nodejs-v774-dan-npm-412-di.html

Berikut ini Langkah-langkah cara menginstall vue-cli dan create project vue dengan vue-cli di linux mint 18.1/ubuntu 16.04 :

1. Untuk menginstall vuejs anda direkomendasikan untuk menggunakan vuecli, maka anda harus tahu cara untuk menginstall vuecli, untuk memulai menginstall vuecli pertama saya membuat directori untuk project saya nanti seperti gambar dibawah ini, langsung saja masukan perintah dibawah ini untuk membuat directori kita dengan perintah 

$mkdir vuejs

setelah anda membuat direkcori masuk/berpindah ke directory tersebut dengan perintah dibawah ini atau seprti gambar dibawah

$cd vuejs

2. selanjutnya untuk menginstall vuecli sendiri masukan perintah dibawah ini

$sudo npm install -g vue-cli

tunggu installasi sampai selesai seperti gambar dibawah ini

3. untuk mencoba membuat project baru dengan vuecli anda dapat menggunakan perintah vue melalui terminal anda dangan perintah dibawah ini

$vue init webpack vueapp

untuk penjelasan perintah diatas silahkan anda baca di github vue-cli

tunggu proses pembuatan project sampai selesai

4. Berpindah directori ke vueapp project yang telah saya buat seperti gambar dibawah ini, ini merupakan template project standart dari vuejs

isi dari template project vue

5. Setelah anda create project anda selanjutnya anda harus menginstall project dengan perintah dibawah ini

$npm install

tunggu proses installasi sampai selesai seperti gambar dibawah ini

6. setelah anda menginstall nya anda dapat mencoba untuk menjalankan template ini dengan perintah

$npm run dev

menjalankan dengan versi development

seperti gambar dibawah ini vuejs template telah berjalan

secara otomatis web browser default anda akan running vuejs template ini

jika ada pertanyaan dan lain sebafai nta anda bisa tanyakan pada kolom komentar dibawah ini


Referensi : https://yessika21289.github.io/presentation/#/2 , MeetUp PHPJoglo Raya ke 12 (eventbrite.com/e/php-jogloraya-meetup-12-modern-user-interface-with-vuejs-tickets-32559419099)