Setup Vue Project

⏱️2 min read

Installasi Vue js

Pertama yang dibutukan adalah node js Node js

Kemudian install Vue CLI Dokumentasi Vue v3

Bisa pakai npm atau yarn

yarn global add @vue/cli
# OR
npm install -g @vue/cli

setelah terinstal check apakah vue benar-benar terinstal dengan perintah vue --version

Installasi Project Versi 1

Kita gunakan Vite Vite is a web development build tool that allows for lightning fast serving of code due to its native ES Module import approach. Vue projects can quickly be set up with Vite by running the following commands in your terminal.

With npm:

# npm 6.x
$ npm init vite@latest <project-name> --template vue

# npm 7+, extra double-dash is needed:
$ npm init vite@latest <project-name> -- --template vue

$ cd <project-name>
$ npm install
$ npm run dev

Or with Yarn:

$ yarn create vite <project-name> --template vue
$ cd <project-name>
$ yarn
$ yarn dev

Install Bootstrap 5

Via npm: $ npm install bootstrap

const bootstrap = require('bootstrap') or import bootstrap from 'bootstrap' will load all of Bootstrap’s plugins onto a bootstrap object. The bootstrap module itself exports all of our plugins. You can manually load Bootstrap’s plugins individually by loading the /js/dist/*.js files under the package’s top-level directory.

Install Library Popper.js

Kemudian install library popper.js Popper adalah elemen pada layar yang “muncul” dari aliran alami aplikasi Anda. Contoh umum popper adalah tooltips, popovers dan drop-down.

via npm: npm i [email protected]

Install dependencies vue-router dan axios

vue-router untuk route content pada vue axios untuk fetch data restAPI

via npm:

npm install vue-router
npm install axios

# atau sekaligus

npm install vue-router axios

Import Bootstrap pada Project

Pada folder src->main.js tambahkan kode berikut:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

Installasi Project Versi 2

Ketikkan

vue create <NAMA-PROJECT>

kemudian pilih manual

1

Kemudian non aktifkan Linter dan Aktifkan Router

2

Kemudian Vue versi 3 3

Kemudian Enter sampai selesai

Setelah project terinstal, pindah ke folder project kemudian install dependencies yang diperlukan