Panduan Pemula ke Vue CLI-tutorial js-php.cn

Panduan Pemula ke Vue CLI

Lisa Kudrow

Lepaskan： 2025-02-14 09:16:10

asal

632 orang telah melayarinya

Vue CLI: Panduan Komprehensif untuk Pembangunan Vue.js Rapid

A Beginner’s Guide to Vue CLI

Artikel ini memberikan gambaran menyeluruh tentang Vue CLI, antara muka baris arahan yang kuat untuk menyelaraskan pembangunan Vue.js. Kami akan meneroka ciri utama, proses pemasangan, penciptaan projek, seni bina plugin, dan antara muka pengguna grafik yang mudah.

Kelebihan Utama Vue CLI:

Persediaan Projek Rapid: Vue CLI menghapuskan keperluan untuk konfigurasi manual, menyediakan templat projek pra-konfigurasi untuk melompat pembangunan.
Memperluas fungsi dengan pelbagai plugin, termasuk tawaran rasmi untuk TypeScript, PWA, VUEX, VUE Router, Eslint, dan Rangka Ujian. Web UI moden:
abstraksi webpack:

Prasyarat:

Node.js Versi 8.9 (8.11.0 disyorkan) diperlukan. Pasang Node.js dari laman web rasmi atau menggunakan pengurus pakej sistem anda. Pengurus versi disyorkan untuk pengurusan lebih mudah pelbagai versi Node.js.

Pemasangan:

Sebelum memasang, keluarkan sebarang versi CLI sebelumnya (mis., ). Kemudian, pasang Vue CLI 3 menggunakan:

npm uninstall vue-cli -g Sahkan pemasangan dengan:

npm install -g @vue/cli

Salin selepas log masuk

Mewujudkan Projek Vue:

vue --version

Salin selepas log masuk

menghasilkan projek baru menggunakan:

Pilih pratetap (lalai, manual, atau pratetap jauh) untuk memilih ciri yang anda inginkan (Babel, TypeScript, Vue Router, Vuex, dll.). CLI akan membimbing anda melalui proses.

vue create my-vue-project

Salin selepas log masuk

Struktur Projek:

Projek Vue CLI yang tipikal termasuk:

: aset statik (index.html, favicon.ico).

public/: kod sumber.
src/: Komponen Vue.
src/components/: komponen aplikasi utama.
src/App.vue: titik entri aplikasi.
src/main.js: kebergantungan projek dan konfigurasi.
package.json: Pakej NPM yang dipasang.
node_modules/

Pembangunan dan Pengeluaran Membina:

berkhidmat: npm run serve Mulakan pelayan pembangunan tempatan dengan tambah semula modul panas.

binaan: npm run build Mewujudkan binaan pengeluaran yang dioptimumkan dalam folder dist.

Memeriksa Webpack Config: vue inspect Memaparkan konfigurasi Webpack.

Vue CLI plugin:

Plugin Memanjangkan fungsi Vue CLI. Pasang plugin menggunakan:

npm install -g @vue/cli
Salin selepas log masuk
Salin selepas log masuk

Contoh: vue add vuex menambah VUEX ke projek anda.

vue cli ui:

Lancarkan antara muka pengguna grafik dengan:

vue --version
Salin selepas log masuk
Salin selepas log masuk

UI (boleh diakses di http://localhost:8000) menyediakan cara visual untuk membuat projek, menguruskan plugin, mengkonfigurasi tetapan, dan menjalankan tugas.

Soalan -soalan yang sering ditanya:

vue cli vs vue.js: vue cli adalah alat untuk membina projek vue.js; Vue.js adalah rangka kerja itu sendiri.

Mengemas kini Vue CLI: Gunakan untuk mengemas kini ke versi terkini. npm update -g @vue/cli

Panduan Komprehensif ini menyediakan asas yang kukuh untuk memanfaatkan keupayaan Vue CLI untuk mempercepat aliran kerja pembangunan Vue.js anda. Ingatlah untuk berunding dengan dokumentasi Vue CLI rasmi untuk maklumat yang paling terkini dan ciri-ciri canggih.
Atas ialah kandungan terperinci Panduan Pemula ke Vue CLI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!