Bagaimana untuk membina vue dalam vscode

Dengan pembangunan berterusan teknologi hadapan, semakin banyak syarikat dan pasukan mula mengguna pakai rangka kerja Vue untuk pembangunan. Reka bentuk yang sangat baik dan ekosistem yang berkuasa bagi rangka kerja Vue telah menjadi sebab mengapa semakin ramai pembangun memilih Vue. Dalam proses projek sebenar, persekitaran pembangunan yang cekap boleh meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan proses sebenar membina projek Vue dalam VSCode melalui demonstrasi demo.

Persediaan alam sekitar

Sebelum mula membina projek Vue, anda mesti memastikan perisian yang diperlukan seperti Node.js, Vue-CLI dan VSCode dipasang. Jika ia belum dipasang, sila rujuk langkah berikut untuk memasangnya.

Pasang Node.js

Node.js ialah persekitaran masa jalan JavaScript berdasarkan enjin Chrome V8, yang membenarkan JavaScript dijalankan pada bahagian pelayan. Artikel ini menggunakan Node.js versi 14.17.3 dan alamat muat turun ialah https://nodejs.org/en/download/.

Pasang Vue-CLI

Vue-CLI ialah alat perancah rasmi yang boleh membantu kami membina projek Vue dengan cepat. Masukkan arahan berikut dalam terminal atau baris arahan untuk memasang:

# 全局安装Vue-CLI
npm install -g @vue/cli

Pasang VSCode

VSCode ialah editor kod merentas platform yang ringan dan berkuasa yang menyokong pelbagai bahasa pengaturcaraan. Alamat muat turun ialah https://code.visualstudio.com/.

Membina projek

Selepas memasang perisian yang diperlukan, kami boleh mula membina projek Vue. Masukkan arahan berikut dalam terminal atau baris arahan untuk mencipta projek:

# 创建项目
vue create demo

Antaranya, demo ialah nama projek, yang boleh diubah suai mengikut situasi sebenar. Selepas mencipta projek, anda akan memasuki antara muka berikut:

Di sini kita boleh memilih untuk menggunakan tetapan lalai atau pilihan konfigurasi manual. Pilihan konfigurasi manual termasuk yang berikut:

• Pilih versi Vue, termasuk 2.x dan 3.x
• Sama ada hendak menggunakan Babel dan TypeScript
• Sama ada; untuk menggunakan alat penyeragaman kod seperti ESLint dan Prettier;
• Sama ada hendak menggunakan pemalam biasa seperti Vue Router dan Vuex.

Kita boleh menetapkannya mengikut keperluan sebenar, tekan Enter selepas selesai dan tunggu penciptaan projek selesai.

Selepas projek dibuat, kita boleh menggunakan VSCode untuk membuka direktori projek. Pilih "Fail" → "Buka Folder" dalam VSCode, cari folder demo yang baru kami buat dan bukanya.

Jalankan projek

Selepas membuka projek dalam VSCode, kita boleh memasuki direktori projek melalui terminal atau baris arahan dan menjalankan projek. Masukkan arahan berikut dalam terminal atau baris arahan:

# 进入项目目录
cd demo

# 运行项目
npm run serve

Selepas memasukkan item, pelayan pembangunan tempatan akan dimulakan dan maklumat berikut akan dikeluarkan:

 DONE  Compiled successfully in 4311ms                                                                        14:32:18

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.0.9:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Akses http dalam pelayar ://localhost:8080/ , kita boleh melihat halaman projek Vue yang baru kita buat.

Menyahpepijat projek

Apabila membangunkan projek Vue, nyahpepijat ialah pautan yang sangat penting. Sebagai editor kod yang sangat baik, VSCode menyediakan fungsi penyahpepijatan yang kaya untuk memudahkan penyahpepijatan semasa proses pembangunan. Seterusnya, kami akan memperkenalkan cara untuk menyahpepijat projek Vue dalam VSCode.

Pertama, buka panel "Nyahpepijat" dalam VSCode. Pilih pilihan "Launch.json file created" dalam senarai drop-down "Launch and debug".

Seterusnya, pilih projek Vue dalam tetingkap pop timbul:

Selepas memilih projek Vue, VSCode akan dibuat secara automatik Fail launch.json yang diisi dengan konfigurasi nyahpepijat lalai.

Kini kita boleh membuka fail .vue dalam VSCode dan memilih titik putus di sebelah kirinya. Kemudian, akses http://localhost:8080/ dalam penyemak imbas dan kendalikan fungsi pada halaman untuk mencetuskan titik putus.

Ringkasan

Artikel ini menggariskan proses projek sebenar membina Vue dalam VSCode. Kami memperkenalkan proses asas dalam pembangunan sebenar daripada penyediaan persekitaran, penciptaan projek, menjalankan projek hingga menyahpepijat projek, dan menggunakan tunjuk cara dan tangkapan skrin untuk membolehkan pembaca memahami dengan lebih baik proses membina projek Vue sebenar.

Untuk menjadi pakar pembangunan Vue, selain menguasai teknologi dan alatan, anda juga memerlukan pembelajaran dan latihan berterusan. Artikel ini hanyalah panduan pengenalan mudah saya harap pembaca dapat terus mempelajari dan meneroka lebih banyak ciri dan fungsi rangka kerja Vue berdasarkan ini.

Atas ialah kandungan terperinci Bagaimana untuk membina vue dalam vscode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!