Asalamualikum Wr. Wb. Seharian ini saya sudah berhasil menuliskan 7 artikel sekaligus dan ini merupakan sebuah rekor baru bagi saya yang biasanya menulis 2 artikel seminggu. Nah pada kesempatan kali ini saya akan menuliskan artikel tentang Penggunaan Vue.Js dengan Gabungan Node.Js dan Express.Js . Dulu saya pernah menulis artikel mengenai penginstalan dan contoh dari penggunaan NodeJs, jadi jika nda ingin belajar terlebih dahulu mengenai node js silahkan kunjungi Cara Menginstal NodeJs dan Framework Express di Windows .
Baiklah, Langkah awal yang harus diperhatikan jika ingin mengkolaborasikan noed js dengan vue js adalah pastikan node js sudah terinstal dikomputer. Untuk instalasi silahkan ikuti panduan di vido ini : https://www.youtube.com/watch?v=9qN3VioUedk atau link berikut : http://zenhuzaini.blogspot.co.id/2015/11/cara-menginstal-nodejs-dan-framework.html .
Baiklah, Langkah awal yang harus diperhatikan jika ingin mengkolaborasikan noed js dengan vue js adalah pastikan node js sudah terinstal dikomputer. Untuk instalasi silahkan ikuti panduan di vido ini : https://www.youtube.com/watch?v=9qN3VioUedk atau link berikut : http://zenhuzaini.blogspot.co.id/2015/11/cara-menginstal-nodejs-dan-framework.html .
Penginstalan Express & membuat projectnya
- Buat sebuah folder (letakkan terserah, bias di htdocs atau bukan) dan beri nama sembarang seperti:
- Buka command promt, pastikan anda masuk cmd dengan mde administrator
- Masuk ke folder di atas melalaui command promt
- Masukkan “npm install –g express-generator” tanpa tanda petik., proses ini adalah proses penginstalan atau pemasangan framework express
- Langkah selanjtnya yaitu membuat folder project express baru dengan cara memasukkan “ express namafolder –e” , nama folder terserah.
- Setelah itu unutk mengintsla bebrapa dependency atau modul dari node pada project maka masukkan : “ cd namafolder && npm install” karena nama folder saya adalah p_vne maka menjadi “cd p_vne && npm install”.
- Jika sudah, silahkan anda coba dengan memasukkan “npm start “ tanpa tanda petik kemudian coba cek di browser dengan alamat : https://localhost:3000 jika tampil seperti di bawha ni berarti anda berhasil menginstall framework express dan projectnya benar.
Mengkonfigurasi Project
Setelah berhasil menginstall express js ,langkah selanjutnya adalah dengan menginstall modeule vue .js. dengan cara :
- Matikan terlebih dulu sambungan nodenya pada command promt dengan menekan tombol ctrl+c secara bersamaan.
- Setelah itu masukkan “npm install –g vue” unutk menginstall modeule vue. Namun, jangan di close dulu cmdnya karena nati akan digunakan lagi unutk mengaktifkan projek node dan express.
- Setelah itu buka project express yang sudah di buat tadi, kemudian buka file app.js dengan text editor. Disini saya akna menggunakan sublime.
- Setelah itu ubah dir pathnya , ubah dari ‘public’ menjadi ‘node_modules’ . dimana fungsi dir ini akan berguna bagi kita unutk mengakses modul yang telah kita install.
menjadi 
- Setelah di ubah kemudian masuk ke folder Routes, dan bukalah file index.js
- Pastikan sisi file tersebut sama seperti di bawah ini
- Kemudian buka folder public dan masuklah di folder view kemudian buka file index.js dengan text editor
- Setelah itu ubah isi dari file apps tersebut menjadi seperti di bawah ini
<!DOCTYPE html>
<html>
<head>
<title><% title %></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di viewmodel -->
<div id="demo">
<input v-model="message" placeholder="ini">
<!-- variable yang berisi nilai,
dimana variable ini juga di set di instansi vue -->
<h2>{{message}}</h2>
<h5>pretag</h5>
<pre>
{{ $data | json}}
<!--fungsi json untuk
mengirim data yang di ubah
dan menampilkannya dengan variable $data-->
</pre>
</div>
<!-- meload vue js yang berada di satu folder-->
<script type="text/javascript" src="/../vue/dist/vue.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script> -->
<script>
//viewmodel
var demo = new Vue({
el: '#demo',
data: { message: 'Hello Zen!!!' } });
</script>
</body>
</html> - Kemudian jika sudah selesai, buka cmd kembali dan ketikkan “npm start”.
- Kemudian masuk ke browser masukkan alamat http://localhost:3000/ di serach bar seperti di bawah ini
Nah, itu merupakan contoh dasar penggunaan Vue Js, Node Js dan Express Js dan penggunaan vue js sebagai framework front end untuk node js bisa lebih di tingkatkan.Semoga dapat bermanfaat ya, ingat jika memeiliki pertanyaan silahkan tulislah di komentar insyaAllah saya akan coba membantu sebisa saya Terimkasih. Wassalamaualaikum wr. wb.
Share this
1 komentar:
Write komentarIjin nyimak dulu gan.
ReplyMasih gagal paham nih.
EmoticonEmoticon