Vue CLI adalah alat dasar standar untuk ekosistem Vue, yang menyediakan prototyping cepat tanpa konfigurasi dan pengalaman pengembangan berbasis runtime. `vue-cli-service` adalah ketergantungan pengembangan dalam proyek Vue CLI, yang dicirikan sebagai ketergantungan runtime untuk proyek tersebut. Itu dikemas ke dalam `@vue/cli-service` dan secara otomatis diinstal dengan setiap proyek Vue.js baru.
Untuk memberi Anda panduan langkah demi langkah tentang cara menggunakan `vue-cli-service`, kita akan melalui proses pembuatan aplikasi Vue.js sederhana menggunakan Vue CLI.
Pertama, mari kita bahas instalasi. Jika Vue CLI belum terinstal di mesin Anda, Anda dapat melakukannya dengan menjalankan perintah ini di terminal Anda:
npm install -g @vue/cli
Setelah Vue CLI terinstal, Anda dapat membuat aplikasi Vue.js baru menggunakan perintah di bawah ini:
vue create my-app
Perintah di atas membuat aplikasi Vue.js baru bernama `aplikasi saya`.
Menggunakan Layanan Vue-CLI
Proyek `aplikasi-saya` menyertakan file `package.json`. File ini berisi beberapa skrip yang menggunakan `vue-cli-service`. Contohnya:
- npm jalankan servis
- npm menjalankan build
- npm menjalankan serat
Mari kita bahas masing-masing:
npm jalankan servis
Perintah ini mengkompilasi dan memuat ulang aplikasi untuk pengembangan. Hal ini dilakukan dengan menjalankan perintah `serve` dari `vue-cli-service`.
"serve": "vue-cli-service serve",
npm menjalankan build
Perintah ini mengkompilasi dan mengecilkan aplikasi untuk produksi. Hal ini dicapai dengan perintah `build` dari `vue-cli-service`.
"build": "vue-cli-service build",
;
npm menjalankan serat
Perintah ini menyaring dan memperbaiki file di proyek Anda. Ia menggunakan perintah `lint` dari `vue-cli-service`.
"lint": "vue-cli-service lint",
Dengan perintah ini, Anda menggunakan `vue-cli-service` secara efisien untuk mengelola proyek Vue.js Anda.
Plugin Vue CLI
Bagian yang menarik dari Vue CLI adalah vue-cli-plugins. Plugin ini sering kali menambahkan fitur global ke proyek Anda, seperti Babel atau ESLint bawaan. Plugin dapat mengubah konfigurasi webpack internal dan memasukkan perintah ke `vue-cli-service`.
Berikut ini contoh cara menginstal dan memanggil plugin:
vue add @vue/cli-plugin-babel
Perintah di atas menginstal plugin babel ke dalam proyek Anda.
Kesimpulannya, Vue CLI dan `vue-cli-service` secara signifikan mengoptimalkan dan menyederhanakan proses pengembangan aplikasi Vue.js. Mereka memberikan titik awal yang kuat bagi pemula dan pengembang berpengalaman.
