Yow.
Vue punya Command Language Interface (CLI) yang keren banget. Di sini saya akan pakai Vue CLI dan Microsoft Visual Studio Code (VS Code) sebagai IDE. Project yang dibikin akan memanfaatkan progressive web app (pwa) dengan nama bookbuilding.
Di terminal
1. Bikin folder project bookbuilding lalu masuk ke folder itu
$ mkdir bookbuilding && cd bookbuilding
2. Inisiasi project dengan pwa
$ vue init pwa && npm install
Akan menghasilkan
? Generate project in current directory? Yes
? Project name bookbuilding
? Project short name: fewer than 12 characters to not be truncated on homescreen
s (default: same as name)
? Project description Bookbuilding by Liberika
? Author Mangkum <ipk4cumlaude@yahoo.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? Novue-cli · Generated “bookbuilding”.
3. Buka VS Code
$ code .
4. Jalankan server untuk development
$ npm run dev
Kita sekarang udah punya file project dengan webpack yang lengkap untuk digeboy.
Di VS Code
Secara default router akan menambahkan tanda pagar yang géngges di URL seperti ini:
Oleh karenanya, saya akan membunuh pagar ini dengan masuk ke direktori
src/router/index.js
Lalu tambahkan mode: ‘history’ sehingga seperti ini:
export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ], mode: 'history' })
Setup udah rébés. Mari kita gali lebih dalam…