Di manakah vue selepas pembungkusan?

Vue.js kini merupakan rangka kerja pembangunan bahagian hadapan yang paling popular Kecekapan dan fleksibilitinya membuatkan ramai pembangun bahagian hadapan memilih untuk menggunakannya untuk membangunkan aplikasi web. Walau bagaimanapun, selepas pembangunan selesai, kita perlu membungkus kod supaya ia boleh dijalankan pada pelayan. Jadi, di manakah vue selepas pembungkusan?

Selepas Vue.js dibungkus, folder dist akan dihasilkan, yang mengandungi semua kod HTML, CSS dan JavaScript dalam projek. Folder ini ialah apa yang kami panggil "di mana Vue dibungkus".

Untuk pemahaman yang lebih baik, di sini, saya akan memperkenalkan secara terperinci proses pembungkusan Vue.js dan kandungan folder dist.

Proses pembungkusan Vue.js

Vue.js menyediakan alat binaan terbina dalam yang dipanggil Vue CLI, yang boleh membantu kami mencipta, membina dan mengurus projek Vue. Selepas projek dibuat, kita perlu menggunakan Vue CLI untuk pembungkusan. Dalam proses ini, Webpack memainkan peranan yang lebih penting.

Webpack ialah alat pembungkusan modul yang boleh membungkus berbilang fail JavaScript ke dalam satu fail, dengan itu mengurangkan saiz fail dan meningkatkan kelajuan pemuatan halaman. Dalam Vue CLI, Webpack digunakan untuk membungkus kod projek Vue ke dalam fail JavaScript yang boleh digunakan untuk penerbitan.

Berikut ialah proses asas pembungkusan Vue.js:

• Pasang pakej pergantungan: Dalam direktori akar projek, laksanakan perintah npm install untuk pasang semua pakej Ketergantungan, termasuk Vue CLI dan Webpack.
• Tulis kod: Tulis kod dalam direktori src.
• Laksanakan arahan binaan: Jalankan perintah npm run build untuk melaksanakan operasi binaan. Operasi ini akan menghasilkan direktori dist yang mengandungi semua kod yang dibungkus.
• Terbitkan kod ke pelayan: Muat naik fail dalam direktori dist ke pelayan dan projek Vue kami boleh dijalankan dalam penyemak imbas.

Kandungan folder dist Folder

dist ialah hasil pembungkusan projek Vue.js dan ia mengandungi semua kod keseluruhan projek. Lebih khusus lagi, ia mengandungi perkara berikut:

index.html

Ini ialah halaman utama aplikasi dan mengandungi rujukan JavaScript yang diperlukan untuk aplikasi satu halaman Vue.js dijalankan.

direktori statik

Direktori ini mengandungi semua sumber statik, seperti imej, fon dan semua skrip.

*.js files

Ini adalah fail JavaScript yang dibungkus dan nama fail biasanya mengandungi nilai cincang atau cap waktu supaya penyemak imbas boleh mengawal cache. Fail JavaScript ini adalah teras projek Vue, dan ia mengandungi kod untuk komponen, pemalam, dsb.

*.fail peta

Fail ini ialah fail pemetaan kod sumber yang dijana oleh Webpack semasa membungkus dan digunakan untuk menyahpepijat kod.

*.fail css

Fail ini ialah helaian gaya CSS yang digunakan dalam projek Vue, ia dibungkus secara berasingan daripada fail JavaScript, yang boleh meningkatkan kelajuan pemuatan halaman.

Ringkasan

Dalam Vue.js, pembungkusan ialah proses yang diperlukan, yang boleh membungkus kod yang kami tulis ke dalam versi yang boleh dikeluarkan. Dalam artikel ini, kami memperkenalkan proses pembungkusan Vue.js dan kandungan folder dist. Sila ambil perhatian bahawa folder dist mengandungi semua kod untuk aplikasi kami, jadi anda perlu berhati-hati semasa menerbitkan aplikasi anda.

Atas ialah kandungan terperinci Di manakah vue selepas pembungkusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!