NUXT 3 Beta: Apa yang Baru dan Cara Bermula

nuxt 3: menyelam yang mendalam ke dalam ciri -ciri yang dipertingkatkan dan pelaksanaan praktikal

Artikel ini meneroka penambahbaikan utama NUXT 3 dan menunjukkan penggunaan praktikal. Kami akan meliputi keupayaan dan pelaksanaannya dalam projek anda.

Ciri -ciri Utama:

Enjin nitro

• : enjin pelayan berprestasi tinggi yang dibina di atas H3, membolehkan laluan API, penyebaran tanpa pelayan (vercel, netlify, AWS, azure), dan penempatan pada pelbagai persekitaran javascript (nod, deno, pelayan tanpa pelayan , Pekerja). Ia menghasilkan titik akhir API dari dan middleware dari server/api/, menawarkan pembangunan yang diselaraskan. Mengharapkan berkas yang lebih kecil (sehingga 75x lebih kecil) dan permulaan sejuk yang dioptimumkan. server/middleware/

• Nuxi CLI: CLI yang dirombak yang menyediakan perancah projek sifar-ketergantungan dan integrasi modul yang dipermudahkan.

• NUXT KIT & NUXT Bridge: NUXT KIT memudahkan pembangunan modul yang fleksibel dengan sokongan typescript. Jambatan NUXT memastikan peralihan yang lancar dari NUXT 2 dengan membenarkan penggunaan tambahan NUXT 3 ciri dalam projek sedia ada. Ini termasuk menggunakan Nitro, API Komposisi, CLI baru, dan peningkatan progresif.

• vue 3 Alignment: keserasian penuh dengan Vue 3, memanfaatkan ciri-ciri seperti API komposisi dan komposit terbina dalam seperti , useFetch(), dan useState(). useMeta()

• Sokongan Dx: Sokongan untuk Webpack 5 dan Vite, sokongan ESM asli, auto-import utiliti dan komposabel, dan integrasi typescript yang lebih baik untuk aliran kerja pembangunan yang diselaraskan.

NUXT 3 Struktur Projek:

Perubahan struktur utama dari NUXT 2 termasuk: fail

untuk komponen dan gaya global; Direktori pilihan

(menghasilkan lebih ringan membina jika ditinggalkan); direktori app.vue untuk komposit auto yang diimport; dan direktori pages/ untuk output binaan yang dioptimumkan. composables/ .output/

Membina blog yang minimum:

Bahagian ini menunjukkan fungsi NUXT 3 Core dengan membina blog mudah. Kami akan menggunakan css tailwind untuk gaya.

1. Mengintegrasikan CSS Tailwind:

Pasang tailwind dan konfigurasi

dan

. Kemas kini tailwind.config.js untuk memasukkan fail CSS anda. postcss.config.js nuxt.config.ts

2. Mewujudkan susun atur tersuai (

): layouts/blog.vue

<code class="language-vue"><template>
  <div>
    <header class="text-white bg-green-500 p-4">HEADER</header>
    <main><slot></slot>
    <footer class="text-white bg-green-500 p-4">FOOTER</footer>
  </main>
</div>
</template></code>

3. Mewujudkan halaman blog:

• pages/index.vue (halaman rumah): mengambil jawatan menggunakan useFetch() dan menjadikannya menggunakan NuxtLink.

• pages/post-[id].vue (halaman pos individu): Menggunakan useRoute() untuk mendapatkan ID pos, mengambil data pos, dan memaparkannya. Termasuk NuxtLink kembali ke halaman rumah. Komponen quote adat (lihat di bawah) ditambah.

4. Mewujudkan komponen tersuai (components/quote.vue):

mengambil sebut harga hari menggunakan useFetch() dan memaparkannya.

5. Membuat dan menggunakan komposit (): composables/useCounter.js Kaunter yang mudah dikompos dengan menunjukkan fungsi auto-import. Digunakan dalam halaman yang berasingan.

pages/counter.vue Kesimpulan:

NUXT 3 menawarkan peningkatan prestasi yang signifikan dan peningkatan pengalaman pemaju. Walaupun masih dalam beta, ia adalah rangka kerja yang kuat untuk membina aplikasi Vue.js. Ingat bahawa status beta menyiratkan ketidakstabilan yang berpotensi.

Soalan Lazim (Soalan Lazim):

Soalan Lazim yang disediakan sudah berstruktur dengan baik dan menjawab soalan umum mengenai ciri dan penggunaan NUXT 3. Tiada perubahan diperlukan.

Atas ialah kandungan terperinci NUXT 3 Beta: Apa yang Baru dan Cara Bermula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!