Vue CLI ialah garis dasar perkakas standard untuk ekosistem Vue, menyediakan prototaip pantas konfigurasi sifar dan pengalaman pembangunan dipacu masa jalan. `vue-cli-service` ialah kebergantungan pembangunan dalam projek Vue CLI, dicirikan sebagai kebergantungan masa jalan untuk projek tersebut. Ia dimasukkan ke dalam `@vue/cli-service` dan dipasang secara automatik dengan setiap projek Vue.js baharu.
Untuk memberi anda panduan langkah demi langkah tentang cara menggunakan `vue-cli-service`, kami akan melalui proses mencipta aplikasi Vue.js mudah menggunakan Vue CLI.
Pertama, mari kita bincangkan pemasangan. Jika Vue CLI belum dipasang pada mesin anda, anda boleh melakukannya dengan menjalankan arahan ini dalam terminal anda:
npm install -g @vue/cli
Setelah Vue CLI dipasang, anda boleh membuat aplikasi Vue.js baharu menggunakan arahan di bawah:
vue create my-app
Perintah di atas mencipta aplikasi Vue.js baharu bernama `my-app`.
Menggunakan Vue-CLI-Service
Projek `my-app` termasuk fail `package.json`. Fail ini mengandungi beberapa skrip yang menggunakan `vue-cli-service`. Contohnya:
- npm run serve
- npm run build
- npm run lint
Mari kita bincangkan setiap satu:
npm run serve
Perintah ini menyusun dan memuat semula aplikasi untuk pembangunan. Ia melakukan ini dengan menjalankan arahan `serve` `vue-cli-service`.
"serve": "vue-cli-service serve",
npm run build
Perintah ini menyusun dan meminimumkan aplikasi untuk pengeluaran. Ia mencapai ini dengan arahan `build` `vue-cli-service`.
"build": "vue-cli-service build",
;
npm run lint
Perintah ini menyelaraskan dan membetulkan fail dalam projek anda. Ia menggunakan arahan `lint` `vue-cli-service`.
"lint": "vue-cli-service lint",
Dengan arahan ini, anda menggunakan `vue-cli-service` dengan cekap untuk mengurus projek Vue.js anda.
Vue CLI Plugin
Bahagian yang menarik dalam Vue CLI ialah vue-cli-plugins. Pemalam ini sering menambahkan ciri global pada projek anda, seperti Babel atau ESLint terbina dalam. Pemalam boleh mengubah suai konfigurasi webpack dalaman dan menyuntik arahan kepada `vue-cli-service`.
Berikut ialah contoh cara memasang dan menggunakan pemalam:
vue add @vue/cli-plugin-babel
Perintah di atas memasang pemalam babel ke dalam projek anda.
Kesimpulannya, Vue CLI dan `vue-cli-service` mengoptimumkan dan memudahkan proses pembangunan untuk aplikasi Vue.js dengan ketara. Mereka menyediakan titik permulaan yang kukuh untuk pemula dan pembangun berpengalaman.
