Catatan Belajar Vue : Vue CLI

Sebelum memulai vue-cli harus ada pra kondisi yang wajib dipenuhi : Install node.js . Jadi mari berkunjung dulu ke situs node.js untuk memasangnya. Silahkan ikuti tahapan-tahapan install di webnya.

Kenapa harus menggunakan vue-cli padahal pakai cdn sudah bisa memenuhi beberapa interaksi yang cukup reaktif ? ~~jawabnya ada di ujung langit~~ Paling sederhana dengan vue-cli dibantu untuk membuat scafolding aplikasi vue. Keuntungan lainnya bisa diikuti dari catatan-catatan setelah ini.

Saya asumsikan node.js sudah terpasang untuk mengeceknya bisa gunakan perintah seperti berikut

$ node -v
v7.10.1
$ npm -v
4.2.0

Di mesin saya telah terpasang node.js versi 7.10.1 dengan npm versi 4.2.0. Apa bedanya ? node.js merupakan server side javascript engine sedangkan npm meupakan paket manager untuk node.

Untuk memasang vue-cli ( yang merupakan paket node ) secara global gunakan skrip berikut

$ sudo npm install -g vue-cli

Setelah usai memamsang vue-cli saya ( atau kita ? ) mulai bisa menggunakan vue-cli alias command line untuk vue.

Seperti tadi yang saya sebutkan, paling sederhana vue-cli membantu untuk membuat scafolding aplikasi vue, untuk tahu struktur awal atau istilahnya template bisa tengok di link vue-cli, di tulisan ini saya mau pakai yang sederhana saja yaitu template webpack-simple.

Di dalam root folder ketikan perintah berikut

$ vue init webpack-simple test-cli

Penjelasan sederhananya dari skrip di atas : vue init ini perintah utamanya, webpack-simple merupakan template yang dipilih, test-cli folder yang dibuat untuk menampung template yang dipilih.

Setelah mengeksekusi perintah tersebut akan ada dialog di terminal untuk mengisi beberapa identitas “projek” yang akan dibuat seperti di bawah ini.

$ vue init webpack-simple test-cli

? Project name test-cli
? Project description A Vue.js project
? Author ariesm
? Use sass? No

   vue-cli · Generated "test-cli".

   To get started:
   
     cd test-cli
     npm install
     npm run dev.

Itu Project name, Project description dan sejenisnya nanti input sendiri aja sesuaikan dengan selera, setelah selesai memberi identitas masuk ke folder nya dengan perintah cd test-cli. Setelah masuk ke dalam folder utamanya jalankan perintah npm install, perintah ini akan memasang paket-paket yang dibutuhkan bagi template webpack-simple.

Struktur Folder

Struktur folder yang dihasilkan dari proses tadi akan seperti berikut :

Saya jelaskan beberapa saja yah, saya juga masih meraba-raba soalnya.

package.json : Isi dalam berkas ini adalah identitas projek dan dependencies untuk projek yang dibuat. Saat menjalankan perintah npm install sebenarnya itu memasang semua paket yang didaftarkan dalam berkas ini dan disimpan di folder node_modules.

Isi dari package.json

{
  "name": "test-cli",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "ariesm",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.3.3"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-server": "^2.4.5"
  }
}

index.html : Ini html biasa yang bertugas untuk menampilkan halaman yang nanti bakal diakses.

Isi dari index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>test-cli</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

src/main.js : Merupakan js utama yang akan dipakai di website.

Isi dari main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

src/App.vue : Merupakan berkas jenis baru yang digunakan untuk memasang component.

isi dari App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1></h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Sekarang kalau mencoba akses localhost/vue2/catatan-vue/test-cli/ akan menghasilkan blank page.

Kenapa blank ? Ya wajar coba lihat kembali isi dari index.html cuma tag-tag html doang tanpa konten dan ada satu js yang dipanggil yaitu dist/build.js, pertanyaanya emang ada di struktur folder yang sekarang ? Gak ada kan.

Untuk memunculkan aplikasi vue ada dua cara, pertama mode dev adn build. Mode devdigunakan dalam masa pengembangan dan mode build kalau sudah siap produksi. Untuk menjalankan mode dev gunakan perintah berikut npm run dev perintah ini akan mengaktifkan node server di port 8080, jadi saat mengakses localhost:8080 browser akan memunculkan.

Kalau udah normal barulah di-build agar bisa dipsang di webserver pada umumnya, untuk melakukan hal tersebut gunakan perintah npm run build. Sebelumnya matiin dulu server node nya dengan menekan ctrl+c.

<script src="/dist/build.js"></script>

menjadi

<script src="dist/build.js"></script>

dan di App.vue ubah bagian

<img src="./assets/logo.png">

menjadi

<img src="src/assets/logo.png">

Lalu akses kembali di locahost:8080 dan hasilnya sukses.

Mode dev berhasil sekarang mode build coba lagi, dengan skrip yang sama tentunya npm run build, dan hasilnya

Oh iya saat mode build dilakukan otomatis si node akan membuatkan folder dist beserta konten di dalamnya.

Selamat mencoba lah.

Referensi :

https://www.youtube.com/watch?v=6noJ0dlG7jM&index=8&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07
https://www.tutorialspoint.com/nodejs/nodejs_introduction.htm
https://vuejs.org/2015/12/28/vue-cli/
https://github.com/vuejs/vue-cli