X

Friday, September 30, 2022

Home » , » Instalasi Vue Js dan Membuat Project Baru

Instalasi Vue Js dan Membuat Project Baru


 

Vue Js merupakan salah satu framework atau kerangka kerja javascript yang bekerja di sisi front end. Framework ini bersifat open source yang dapat digunakan untuk mempermudah dalam membuat antar muka website

Instalasi

Hal pertama yang wajib di pelajari adalah cara Instalasi Vue.js untuk membuat project baru. Ada dua cara yang bisa digunakan dalam instalasi vue.js yaitu menggunakan CDN : 

    
    <html lang="en">
      <head>
        <meta charset="UTF-8"></meta>
        <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
        <title>Aplikasi Vue JS</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      </head>
      <body>
        <div id="app">
          <h1>{{pesan}}</h1>
        </div>
        <script>
          const App = new Vue({
            el: '#app',
            data: {
              pesan: 'Hello World!',
            }
          })
        </script>
      </body>
    </html>
Selain itu kita bisa menggunakan cara kedua Vue CLI, untuk caranya anda perlu menginstall node js terlebih dahulu kemudian menjalankan perintah berikut : 

    npm i -g @vue/cli @vue/cli-service-global
atau jika anda menggunakan yarn : 

    yarn global add @vue/cli @vue/cli-service-global

Membuat project baru

Membuat project baru dengan vue js sangatlah mudah, jika anda menggunakan CDN anda tinggal menambahkan code seperti di atas. Jika anda menggunakan CLI anda tinggal menjalankan perintah berikut : 

vue create new-app
new-app merupakan nama project yang akan dibuat. Setelah project berhasil di buat, gunakan perintah "npm run serve" untuk menjalankan project.

Bagikan artikel ke:

Facebook Google+ Twitter

1 comment: