Mulakan Pembangunan Sambungan Penyemak Imbas Anda dengan Vite, Vue dan Manifest V3

Mulakan Pembangunan Sambungan Penyemak Imbas Anda dengan Vite, Vue 3 dan Manifest V3

Adakah anda mencari cara yang cepat dan cekap untuk mula membina sambungan penyemak imbas menggunakan teknologi web moden? MemperkenalkanTemplat Pemula WebExtension Vite kami! Templat ini direka bentuk untuk menyelaraskan proses pembangunan anda dengan menggabungkanVue 3,VitedanManifest V3, membolehkan anda mencipta sambungan yang berkuasa dan cekap untuk Chrome, Firefox , dan pelayar lain.

Mengapa Templat Ini?

Membina sambungan penyemak imbas dari awal boleh menjadi tugas yang sukar, terutamanya apabila anda ingin memanfaatkan teknologi terkini sepertiVue 3danVite. Templat kami telah siap sedia dengan ciri penting, memudahkan anda menumpukan pada membangunkan sambungan anda daripada menyediakan persekitaran.

Ciri-ciri Utama

• API Komposisi Vue 3: Manfaatkan kuasa penuh Vue 3 dengan API Komposisi dan .
• HMR (Penggantian Modul Panas): Dapatkan maklum balas segera dengan sokongan HMR untuk halaman sambungan dan skrip kandungan.
• Tailwind CSS & daisyUI: Gayakan sambungan anda dengan mudah dengan Tailwind CSS, dipertingkatkan oleh komponen daisyUI.
• TypeScript: Nikmati pengalaman pembangunan selamat jenis dengan sokongan TypeScript penuh.
• Proses Binaan Automatik: Bina dan lepaskan sambungan anda dengan mudah menggunakan Tindakan GitHub.
• Webext-Bridge: Permudahkan komunikasi antara konteks dengan Webext-Bridge.

Senarai Ciri Penuh

• Sokongan Vue DevTools: Nyahpepijat aplikasi Vue anda dalam halaman sambungan dan skrip kandungan.
• Penghala Vue: Pendaftaran laluan automatik dikuasakan oleh unplugin-vue-router.
• Komponen Auto-Diimport: Import komponen dan ikon secara automatik dengan unplugin-vue-components dan unplugin-icons.
• ESLint & Prettier prakonfigurasi: Kekalkan kualiti kod dengan ESLint dan Prettier prakonfigurasi untuk Vue, JavaScript dan TypeScript.
• Rangka Kerja UI: Gunakan pemalam CSS Tailwind untuk tipografi, borang dan banyak lagi.
• Sokongan Berbilang Penyemak Imbas: Bina untuk Chrome, Firefox dan penyemak imbas berasaskan Chromium lain dengan konfigurasi khusus.

Arahan Penggunaan

Klon dan Mulakan

Untuk bermula, klon templat:

pnpx degit mubaidr/vite-vue3-browser-extension-v3 my-webext cd my-webext pnpm i

Struktur Projek

Templat disusun untuk navigasi mudah:

• src: Direktori sumber utama.
• skrip kandungan: Skrip dan komponen untuk skrip kandungan.
• latar belakang: Skrip latar belakang.
• popup: Aplikasi Popup Vue.js.
• pilihan: Aplikasi Vue.js Pilihan.
• persediaan: Halaman untuk acara pemasangan dan kemas kini.
• luar skrin: Halaman luar skrin untuk fungsi lanjutan seperti audio atau rakaman skrin.
• komponen: Komponen Vue yang dikongsi.

Pembangunan dan Bina

Untuk memulakan pelayan pembangunan:

pnpm dev

Untuk membina sambungan untuk pengeluaran:

pnpm build

Konfigurasi Penyemak Imbas

• manifest.config.ts: Manifes sambungan asas.
• vite.config.ts: Konfigurasi Base Vite.

Sumbangkan dan Berikan Maklum Balas

Kami sentiasa berusaha untuk menambah baik templat ini dan maklum balas anda tidak ternilai. Sila luangkan sedikit masa untuk mengisi borang maklum balas kami dan beritahu kami ciri-ciri yang anda ingin lihat atau jika anda berminat untuk membeli templat setelah ia siap. Respons anda akan membentuk masa depan projek ini.

Fikiran Akhir

Templat Vite Vue 3 WebExtension ini direka untuk menjadikan pengalaman pembangunan anda lancar dan cekap. Sama ada anda membina utiliti ringkas atau sambungan yang kompleks, templat ini telah anda lindungi. Cubalah dan beritahu kami pendapat anda!

Selamat mengekod!

Atas ialah kandungan terperinci Mulakan Pembangunan Sambungan Penyemak Imbas Anda dengan Vite, Vue dan Manifest V3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!