close

Templat Blog Asas Nuxt 3 – Bfotool Blog Asas Nuxtjs(Vue 3 + TypeScript + Tailwind)

Jika anda sedang mencari templat pemula blog Nuxt 3 moden, Blog Asas Bfotool Nuxtjs ialah penyelesaian yang sangat baik. Ia merupakan aplikasi blog berfungsi sepenuhnya yang dibina dengan Nuxt 3, Vue 3, TypeScript dan Tailwind CSS, yang direka untuk membantu pembangun membina blog profesional dengan cepat tanpa memerlukan backend semasa pembangunan.

Projek ini merangkumi lapisan API palsu yang dikuasakan oleh pemintas Axios, yang mensimulasikan API REST sebenar. Ini menjadikannya sesuai untuk mempelajari seni bina Nuxt, membuat prototaip aplikasi atau membina platform blog yang sedia untuk pengeluaran.

Anda boleh meneroka repositori di sini: 👉 https://github.com/bfotool/nuxtjs-base-blog

Apakah Blog Asas Bfotool Nuxtjs?

Bfotool Nuxtjs Base Blog ialah templat aplikasi blog moden yang dibina menggunakan teknologi frontend terkini. Ia menyediakan antara muka blog yang lengkap dengan catatan, kategori, fungsi carian dan halaman hubungan.

Projek ini direka bentuk dengan seni bina Nuxt 3 yang bersih, menjadikannya mudah difahami dan dikembangkan.

Sorotan utama termasuk:

  • UI blog penuh dengan reka bentuk responsif

  • API REST olok-olok untuk pembangunan tanpa bahagian belakang

  • Dibina dengan API Komposisi Vue 3 moden

  • Pembangunan selamat jenis dengan TypeScript

  • Konfigurasi meta sedia SEO

  • Sokongan tema gelap dan terang

Repositori tersebut boleh didapati di sini:

👉 https://github.com/bfotool/nuxtjs-base-blog

Templat ini sesuai untuk:

  • Blog peribadi

  • Blog syarikat

  • Portfolio pembangun

  • Pembelajaran seni bina Nuxt 3

  • Prototaip pantas laman web kandungan

Ciri-ciri Utama

Halaman Blog lengkap C class="ac-h3"

Templat ini merangkumi satu set halaman yang dilaksanakan sepenuhnya yang biasanya diperlukan dalam platform blog.

Halaman utama termasuk:

  • Laman Utama – Memaparkan siaran wira pilihan, penapis kategori dan siaran berhalaman

  • Halaman Catatan Blog – Paparan artikel penuh dengan jadual kandungan dan catatan berkaitan

  • Halaman Kategori – Layari siaran yang ditapis mengikut kategori

  • Halaman Carian – Carian masa nyata dengan fungsi penyahbauan

  • Halaman Perihal – Perkenalkan pasukan, misi atau jenama anda

  • Halaman Hubungan – Borang hubungan dengan pengesahan dan maklum balas

  • Halaman Ralat – UI pengendalian ralat tersuai

Struktur ini menyediakan pengalaman blog yang sedia untuk digunakan oleh pengguna.

Lapisan API Palsu untuk Pembangunan

Salah satu ciri paling berkuasa dalam projek ini ialah sistem API olok-olok .

Daripada menyambung ke bahagian belakang sebenar, projek ini mensimulasikan respons API menggunakan pemintas Axios .

Pendekatan ini membolehkan pembangun untuk:

  • Bina ciri bahagian hadapan tanpa kebergantungan bahagian belakang

  • Uji penomboran, penapisan dan pengisihan

  • Simulasikan kelewatan tindak balas API sebenar

  • Beralih ke backend sebenar dengan mudah kemudian

API olok-olok merangkumi titik akhir seperti:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Oleh kerana API diabstrakkan melalui useApi composable, beralih ke backend sebenar memerlukan konfigurasi yang minimum.

Seni Bina Nuxt 3 Moden

Projek ini mengikuti corak pembangunan Nuxt 3 yang disyorkan, menjadikannya rujukan yang bagus untuk pembangun yang mempelajari rangka kerja tersebut.

Ciri-ciri seni bina penting termasuk:

  • Komponen dan bahan komposit yang diimport secara automatik

  • Pembangunan TypeScript dahulu

  • Lapisan perkhidmatan API boleh ubah

  • Struktur folder modular

  • Konfigurasi meta SEO

  • Peralihan halaman

Aplikasi ini juga menggunakan:

  • useSeoMeta()untuk tag SEO

  • useColorMode()untuk pertukaran tema

  • useRoute()dan komposit Nuxt terbina dalam yang lain

Mod Gelap dan Reka Bentuk Responsif

UI menyokong tema gelap dan terang menggunakan @nuxtjs/color-mode.

Ciri-ciri termasuk:

  • Pengesanan tema sistem automatik

  • Togol tema manual

  • Penggayaan CSS Tailwind

  • Susun atur responsif mudah alih pertama

Ini memastikan blog berfungsi dengan lancar merentasi:

  • Komputer Riba

  • Tablet

  • Peranti mudah alih

Ciri-ciri Blog P class="ac-h3" yang hebat

Templat blog ini merangkumi beberapa ciri lanjutan yang biasanya terdapat dalam platform blog produksi.

Ini termasuk:

  • Isi kandungan yang dijana daripada tajuk penurunan harga

  • Cadangan siaran berkaitan

  • Anggaran masa membaca

  • Penapisan kategori

  • Carian teks penuh yang dinyahbatalkan

  • Penomboran pintar

  • Pemberitahuan roti bakar

  • Memuatkan komponen rangka

  • Peralihan halaman animasi

Ciri-ciri ini mewujudkan pengalaman membaca moden untuk pelawat blog.

Tumpukan Teknologi

Projek ini dibina menggunakan tindanan frontend moden.

Lapisan Teknologi
Kerangka Kerja Nuxt 3.15
Perpustakaan UI Vue 3.5
Bahasa TypeScript 5.7
Penggayaan CSS Tailwind 3.4
Pengurusan Negeri Pinia
Klien HTTP Axios
Ikon Ikonkan melalui @nuxt/ikon
Tema @nuxtjs/mod-warna
Lapisan ESLint
Pemformatan Lebih cantik

Tumpukan ini menyediakan prestasi, kebolehskalaan dan kebolehpelan .

Gambaran Keseluruhan Struktur Projek

Repositori ini mempunyai struktur yang bersih dan teratur.

Direktori penting termasuk:

Halaman

Direktori tersebut pagesmentakrifkan laluan utama:

  • index.vue– Laman Utama

  • about.vue– Halaman Perihal

  • contact.vue– Borang hubungan

  • search.vue– Antara muka carian

  • blog/[slug].vue– Halaman catatan blog

  • blog/category/[slug].vue– Halaman kategori

Com class="ac-h3" komponen

Komponen UI yang boleh diguna semula dikumpulkan ke dalam kategori logik:

  • layout– Pengepala dan pengaki

  • common– Penomboran halaman, pemuat rangka, pemberitahuan roti bakar

  • blog– Komponen khusus blog seperti poskad dan senarai kandungan

Kelas Komp="ac-h3"boleh digunakan

Direktori composables mengandungi logik yang boleh diguna semula.

Bahan komposit penting termasuk:

  • useApi()– Lapisan perkhidmatan API yang ditaip

  • useDebounce()– Nyahpasang nilai reaktif

Lapisan API Olok-olok

Sistem olok-olok terletak di dalam mocksdirektori.

Ia mengandungi:

  • handlers.ts– Pemintas permintaan API

  • posts.ts– Contoh catatan blog

  • authors.ts– Data pengarang

  • categories.ts– Data kategori

Struktur ini memudahkan projek untuk diubah suai dan dilanjutkan .

Cara Memasang dan Menjalankan Projek

Ikuti langkah-langkah ini untuk menjalankan projek secara setempat.

Laman web kelas="ac-h3" prasyarat

Anda perlukan:

  • Node.js 18.17 atau lebih baharu

  • npm, benang atau pnpm

Klon Repositori

git clone https://github.com/bfotool/nuxtjs-base-blog.git 
cd nuxtjs-base-blog

class="ac-h3"Kebergantungan Pemasangan

npm install

Mulakan Pelayan Pembangunan

npm run dev

Kemudian buka pelayar anda di:

http://localhost:3000

Pelayan pembangunan Nuxt akan dimuat semula secara automatik apabila fail berubah.

Beralih daripada API Mock kepada API Nyata

Salah satu keputusan reka bentuk terbaik dalam projek ini ialah suis API yang mudah .

Untuk menyambungkan backend sebenar:

  1. Tetapkan pembolehubah persekitaran:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Konfigurasikan URL asas API anda:

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

  1. Pastikan respons backend anda sepadan dengan jenis yang ditakrifkan dalam:

types/index.ts

Tiada perubahan kod tambahan diperlukan.

Menyesuaikan Blog

Pembangun boleh menyesuaikan templat dengan mudah.

Tukar Tema atau Gaya

Edit konfigurasi Tailwind:

tailwind.config.ts

Gaya global terletak di:

assets/css/main.css

Ubah Suai Kandungan Blog

Kandungan olok-olok boleh dikemas kini dalam:

mocks/posts.ts 
mocks/categories.ts 
mocks/authors.ts

Ini membolehkan anda membuat prototaip set data blog yang berbeza dengan cepat.

Kemas Kini Tetapan Apl

Pemalar aplikasi seperti navigasi, penjenamaan dan pautan sosial disimpan dalam:

utils/constants.ts

Mengapa Perlu Menggunakan Templat Blog Nuxt Ini?

Projek ini merupakan pilihan yang tepat untuk pembangun kerana ia menyediakan:

  • Seni bina Nuxt 3 yang bersih

  • Struktur kod peringkat pengeluaran

  • API olok-olok untuk pembangunan bahagian hadapan

  • UI Moden dengan CSS Tailwind

  • Halaman sedia SEO

  • Integrasi mudah dengan API sebenar

Ia berfungsi sebagai projek pembelajaran dan sebagai asas blog yang sedia untuk pengeluaran .

Repositori GitHub

Anda boleh meneroka kod sumber penuh di sini: 👉 https://github.com/bfotool/nuxtjs-base-blog

Jika anda mendapati projek ini berguna, pertimbangkan untuk membintangi repositori dan menyumbang penambahbaikan.