Saya menulis tutorial detail langkah demi langkah ini sehingga siapa pun dapat membuat aplikasi mereka sendiri menggunakan kerangka kerja Nuxt.js dari awal.
Pada artikel ini, kita akan membahas dasar-dasar, dasar-dasar pembuatan aplikasi Nuxt.js:
- pembuatan dan konfigurasi proyek,
- aset dan statis: gaya, font, gambar, posting,
- membuat komponen,
- membuat halaman dan tata letak,
- penerapan aplikasi (penerapan).
Lihat apa yang terjadi!
Sedikit tentang Nuxt.js
Nuxt adalah kerangka kerja Vue tingkat tinggi. Nuxt.js memungkinkan Anda mengembangkan aplikasi web isomorfik di luar kotak dengan mengabstraksi detail distribusi server dan kode klien. Berkat pendekatan ini, kami menghemat waktu dan dapat fokus pada pengembangan.
Keunggulan utama Nuxt:
- SPA, SSR dan prerender sudah dikonfigurasi; semua yang dibutuhkan dari kita adalah untuk menunjukkan. Dalam aplikasi ini, kami menggunakan prerender untuk mode produk, yaitu, kami akan membuat semua halaman situs terlebih dahulu, dan kemudian menerapkannya ke hosting untuk mendistribusikan statika.
- SEO yang hebat untuk semua mesin telusur adalah hasil dari penggunaan SSR atau pra-renderer.
- . js chunks, css styles API ( webpack 4, Nuxt).
- Google Lighthouse / Page Speed. 100/100 .
- CSS Modules, Babel, Postscc create-nuxt-app.
- .
- 50 Vue.js.
Kita bisa berbicara tentang manfaat Nuxt untuk waktu yang lama. Ini adalah kerangka kerja yang sangat saya sukai karena kemudahan penggunaan dan kemampuannya untuk membuat aplikasi yang fleksibel dan mudah diskalakan. Jadi, saya mengusulkan untuk mulai dan melihat semua manfaat dalam praktik.
Informasi lebih lanjut tentang Nuxt.js di situs resmi . Panduan lengkap juga tersedia di sini .
Rancangan
Desain yang dipikirkan dengan matang dan siap pakai, atau bahkan kit UI yang lebih baik, akan secara signifikan mempercepat dan menyederhanakan pengembangan aplikasi apa pun. Jika tidak ada desainer UI gratis di dekatnya, tidak apa-apa. Sebagai bagian dari instruksi kami, kami dapat menanganinya sendiri!
Khusus untuk artikel kali ini, saya menyiapkan desain blog bergaya modern minimalis dengan fungsionalitas sederhana, cukup untuk menunjukkan kemampuan Nuxt.
Untuk pengembangan, saya menggunakan layanan online Figma. Desain dan kit UI tersedia di sini . Anda dapat menyalin template ini dan menggunakannya dalam proyek Anda.
Pembuatan proyek
Untuk membuat proyek, kita akan menggunakan utilitas Nuxt create-nuxt-app dari pengembang Nuxt , yang memungkinkan kita untuk mengkonfigurasi template aplikasi melalui cli.
Kami menginisialisasi proyek dengan menentukan namanya:
npx create-nuxt-app nuxt-blog
Selanjutnya, dalam beberapa tahap, utilitas akan menawarkan kita untuk memilih satu set pustaka dan paket yang disukai, setelah itu akan secara mandiri mengunduh, mengkonfigurasi dan mengkonfigurasinya untuk proyek.
Anda dapat melihat daftar lengkap dari opsi yang dipilih di Github .
Untuk proyek ini konfigurasi dengan Typecript akan digunakan.
Saat mengembangkan di Vue dengan Typecript, Anda bisa menggunakan dua API: Options API atau Class API .
Mereka tidak berbeda secara fungsional satu sama lain, tetapi mereka memiliki sintaks yang berbeda. Secara pribadi, sintaks API Opsi lebih dekat dengan saya, jadi itu akan digunakan dalam proyek kami.
Setelah membuat proyek, kita dapat menjalankan aplikasi kita dengan menggunakan perintah: npm run dev. Sekarang akan tersedia di localhost: 3000.
Nuxt menggunakan webpack-dev-server dengan HMR diinstal dan dikonfigurasi sebagai server lokal , yang membuat pengembangan cepat dan nyaman.
Karena kami membuat versi demo aplikasi, saya tidak akan menulis tes untuk itu. Tetapi saya sangat menyarankan untuk tidak mengabaikan pengujian aplikasi dalam pengembangan komersial.
Jika Anda belum pernah menyentuh topik ini sebelumnya, maka saya menyarankan Anda untuk memperhatikan Jest - alat yang sangat sederhana, tetapi pada saat yang sama kuat yang mendukung bekerja dengan Nuxt dalam hubungannya dengan vue-test-utils .
Struktur proyek
Nuxt secara default membuat direktori dan struktur file yang cocok untuk memulai pengembangan dengan cepat. Untuk proyek kami, struktur seperti itu sangat cocok, jadi kami tidak akan mengubahnya. Anda dapat membaca lebih lanjut tentang tujuan berbagai direktori di situs web Nuxt .
-- Assets
-- Static
-- Pages
-- Middleware
-- Components
-- Layouts
-- Plugins
-- Store
-- nuxt.config.js
-- ...other files
Pembuatan aplikasi
Sebelum menulis kode, mari lakukan hal berikut:
1. Hapus komponen starter dan halaman yang dibuat oleh Nuxt.
2. Pasang pug dan scss untuk kenyamanan kita dan untuk menghemat waktu selama pengembangan. Mari jalankan perintah:
npm i --save-dev pug pug-plain-loader node-sass sass-loader fibers
Setelah itu, penggunaan atribut lang untuk template dan tag gaya akan tersedia:
<template lang="pug"></template>
<style lang="scss"></style>
3. Tambahkan dukungan untuk :: v-deep selector ke konfigurasi stylelint, yang akan memungkinkan penataan gaya ke komponen turunan, mengabaikan cakupan. Anda dapat membaca lebih lanjut tentang pemilih ini di sini.
{
rules: {
'at-rule-no-unknown': null,
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
},
}
Semua persiapan sudah selesai, lanjut ke tahap selanjutnya.
Posting
Posting akan disimpan di direktori konten / posting, yang akan kita buat di root proyek sebagai sekumpulan file penurunan harga.
Mari buat 5 file kecil agar kita dapat langsung mulai mengerjakannya. Untuk mempermudah, kita akan menggunakan nama 1.md, 2.md, dll.
Di direktori konten, buat file Posts.d.ts, di mana kita menentukan tipe untuk objek yang berisi semua informasi yang diperlukan tentang posting:
export type Post = {
id: number
title: string
desc: string
file: string
img: string
}
Menurut saya arti dari semua bidang harus jelas dari namanya.
Berpindah. Di direktori yang sama, buat file lain bernama posts.ts dengan konten berikut:
import { Post } from './Post'
export default [
{
id: 1,
title: 'Post 1',
desc:
'A short description of the post to keep the user interested.' +
' Description can be of different lengths, blocks are aligned' +
' to the height of the block with the longest description',
file: 'content/posts/1.md',
img: 'assets/images/1.svg',
},
...
{
id: 5,
title: 'Post 5',
desc:
'A short description of the post to keep the user interested.' +
' Description can be of different lengths, blocks are aligned' +
' to the height of the block with the longest description',
file: 'content/posts/5.md',
img: 'assets/images/5.svg',
},
] as Post[]
Di properti img, kita merujuk ke gambar di direktori assets / images, tapi kita belum membuat direktori ini, mari kita lakukan sekarang.
Sekarang mari tambahkan gambar dalam format .svg ke direktori yang dibuat dengan nama yang kami tentukan di atas.
Saya akan mengambil 5 gambar dari unDraw . Sumber daya yang luar biasa ini terus diperbarui dan berisi banyak gambar svg gratis.
Sekarang semuanya sudah siap, direktori konten akan terlihat seperti ini: Dan subdirektori images akan muncul di direktori aset dengan konten berikut:
content/
-- posts.ts
-- Posts.d.ts
-- posts/
---- 1.md
---- 2.md
---- 3.md
---- 4.md
---- 5.md
assets/
-- images/
---- 1.svg
---- 2.svg
---- 3.svg
---- 4.svg
---- 5.svg
...
Mengambil file secara dinamis
Karena kita akan menerima gambar dan file dengan teks posting secara dinamis, kita perlu mengimplementasikan mixin global, yang dapat kita gunakan lebih lanjut di semua komponen.
Untuk melakukan ini, buat subdirektori mixins di direktori plugin, dan di dalamnya file getDynamicFile.ts dengan konten berikut:
import Vue from 'vue'
export const methods = {
getDynamicFile(name: string) {
return require(`@/${name}`)
},
}
Vue.mixin({
methods,
})
Yang tersisa bagi kami adalah mengaktifkan mixin ini di file nuxt.config.js:
{
plugins: [
'~plugins/mixins/getDynamicFile.ts',
],
}
Font
Setelah tahap membuat postingan, sambungkan font. Cara termudah untuk melakukannya adalah pustaka Webfontloader yang luar biasa , yang memungkinkan Anda mendapatkan font apa pun dari Google Fonts . Namun, dalam pengembangan komersial, font khusus sering digunakan, jadi mari kita lihat kasus itu di sini.
Rubik dipilih sebagai font untuk aplikasi kami, yang didistribusikan di bawah Lisensi Font Terbuka . Anda dapat mengunduh semuanya dari Google Font yang sama .
Harap perhatikan bahwa dalam arsip yang diunduh, font akan berformat otf, tetapi karena kami bekerja dengan web, format woff dan woff2 akan menjadi pilihan terbaik bagi kami. Mereka lebih kecil daripada format lain, tetapi didukung sempurna di semua browser modern. Untuk mengonversi otf ke format yang kami butuhkan, Anda dapat menggunakan salah satu dari banyak layanan online gratis.
Jadi, kami memiliki font dalam format yang kami butuhkan, saatnya memasukkannya ke dalam proyek. Untuk melakukan ini, buat subdirektori font di direktori statis dan tambahkan font kami di sana. Mari buat file fonts.css di direktori yang sama, yang akan bertanggung jawab untuk menghubungkan font kita di aplikasi dengan konten berikut:
@font-face {
font-family: "Rubik-Regular";
font-weight: normal;
font-style: normal;
font-display: swap;
src:
local("Rubik"),
local("Rubik-Regular"),
local("Rubik Regular"),
url("/fonts/Rubik-Regular.woff2") format("woff2"),
url("/fonts/Rubik-Regular.woff") format("woff");
}
...
Isi lengkap dari file dapat dilihat di repositori .
Ada 2 hal yang perlu diperhatikan:
1. Kami menentukan font-display: swap ;, mendefinisikan bagaimana font yang terhubung melalui font-face akan ditampilkan tergantung pada apakah font tersebut dimuat dan siap digunakan.
Dalam hal ini, kami tidak menyetel periode pemblokiran dan menetapkan periode substitusi tak terbatas. Artinya, pemuatan font terjadi di latar belakang dan tidak menghalangi pemuatan halaman, dan font akan ditampilkan jika sudah siap.
2. Di src, kami menetapkan urutan boot berdasarkan prioritas. Pertama, kami memeriksa apakah font yang diinginkan diinstal pada perangkat pengguna dengan memeriksa kemungkinan varian nama font. Jika kami tidak menemukannya, maka kami memeriksa apakah browser mendukung format woff2 yang lebih modern, dan jika tidak, lanjutkan ke format woff berikutnya. Ada kemungkinan bahwa pengguna menggunakan browser yang sudah ketinggalan zaman (misalnya, IE <9), dalam hal ini, berikut ini, kami akan menunjukkan font yang terpasang di browser sebagai cadangan.
Setelah membuat file dengan aturan pemuatan font, Anda perlu menghubungkannya di aplikasi - di file nuxt.config.js di bagian head:
{
head: {
link: [
{
as: 'style',
rel: 'stylesheet preload prefetch',
href: '/fonts/fonts.css',
},
],
},
}
Perhatikan bahwa di sini, seperti sebelumnya, kami menggunakan properti preload dan prefetch, sehingga menyetel prioritas tinggi di browser untuk mendownload file ini dan tidak memblokir rendering halaman.
Mari segera tambahkan ke direktori favicon statis aplikasi kita, yang dapat dibuat menggunakan layanan online gratis apa pun.
Direktori statis sekarang terlihat seperti ini: Lanjutkan ke langkah berikutnya.
static/
-- fonts/
---- fonts.css
---- Rubik-Bold.woff2
---- Rubik-Bold.woff
---- Rubik-Medium.woff2
---- Rubik-Medium.woff
---- Rubik-Regular.woff2
---- Rubik-Regular.woff
-- favicon.ico
Gaya yang dapat digunakan kembali
Dalam proyek kita, semua gaya yang digunakan dijelaskan oleh satu set aturan, yang membuat pengembangan lebih mudah, jadi mari kita transfer gaya ini dari Figma ke file proyek.
Di direktori aset, buat subdirektori styles, di mana kita akan menyimpan semua gaya yang digunakan kembali dalam proyek. Pada gilirannya, direktori gaya akan berisi file variabel.scss dengan semua variabel scss kita.
Isi file dapat dilihat di repositori .
Sekarang kita perlu menghubungkan variabel ini ke proyek agar tersedia di salah satu komponen kita. Nuxt menggunakan modul @ nuxtjs / style-resources untuk tujuan ini .
Mari instal modul ini:
npm i @nuxtjs/style-resources
Dan tambahkan baris berikut ke nuxt.config.js:
{
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
scss: ['./assets/styles/variables.scss'],
},
}
Baik! Variabel dari file ini akan tersedia di semua komponen.
Langkah selanjutnya adalah membuat beberapa kelas helper dan gaya global yang akan digunakan di seluruh aplikasi. Pendekatan ini akan memungkinkan Anda untuk mengelola gaya umum secara terpusat dan dengan cepat menyesuaikan aplikasi jika tampilan tata letak diubah oleh perancang.
Mari buat subdirektori global di direktori assets / styles dengan file-file berikut:
1. typography.scss - file tersebut akan berisi semua kelas pembantu untuk teks, termasuk tautan.
Perhatikan bahwa kelas helper ini mengubah gaya bergantung pada resolusi perangkat pengguna: ponsel cerdas atau PC.
2. transitions.scss - file akan berisi gaya animasi global, baik untuk transisi antar halaman maupun untuk animasi di dalam komponen, jika kita membutuhkannya di masa mendatang.
3. other.scss - file akan berisi gaya global, yang belum dipilih ke dalam grup terpisah.
Kelas .page akan digunakan sebagai wadah umum untuk semua komponen pada halaman dan akan membentuk padding yang benar pada halaman.
Kelas .section akan digunakan untuk menandai batas-batas kotak logika, dan kelas .content akan digunakan untuk membatasi lebar konten dan memusatkannya pada halaman.
Kita akan melihat contoh bagaimana kelas ini digunakan nanti ketika kita mulai mengimplementasikan komponen dan halaman.
4. index.scss - file umum yang akan digunakan sebagai titik ekspor tunggal untuk semua gaya global.
Konten lengkap file dapat dilihat di Github .
Pada tahap ini, kami akan menyertakan gaya global ini agar tersedia di seluruh aplikasi. Untuk tugas ini, Nuxt memberi kita bagian css di file nuxt.config.js:
{
css: ['~assets/styles/global'],
}
Perlu dikatakan bahwa di masa mendatang, saat menugaskan kelas-css, logika berikut akan digunakan:
1. Jika sebuah tag memiliki kedua kelas pembantu dan kelas lokal, maka kelas lokal akan langsung ditambahkan ke tag, misalnya, p .some-local-class, dan class helper ditentukan dalam properti class, misalnya class = "body3 medium".
2. Jika tag hanya memiliki kelas pembantu atau hanya kelas lokal, mereka akan langsung ditambahkan ke tag.
Saya menggunakan teknik ini untuk kenyamanan saya, untuk langsung membedakan antara kelas global dan lokal secara visual.
Sebelum pengembangan, mari instal dan aktifkan reset.css agar tata letak kita terlihat sama di semua browser. Untuk melakukan ini, instal paket yang diperlukan:
npm i reset-css
Dan kami akan memasukkannya ke file nuxt.config.js di bagian css yang sudah dikenal, yang sekarang akan terlihat seperti ini:
{
css: [
'~assets/styles/global',
'reset-css/reset.css',
],
}
Terjadi? Jika demikian, kami siap untuk melanjutkan ke langkah berikutnya!
Tata Letak
Di Nuxt, Layout adalah pembungkus halaman yang memungkinkan Anda menggunakan kembali komponen umum di antara mereka dan mengimplementasikan logika umum yang diperlukan. Karena aplikasi kita sangat sederhana, kita cukup menggunakan layout default - default.vue.
Selain itu, Nuxt menggunakan tata letak terpisah untuk halaman kesalahan seperti 404, yang sebenarnya merupakan halaman sederhana.
Tata letak di repositori .
default.vue default.vue
kami tidak akan memiliki logika dan akan terlihat seperti ini:
<template lang="pug">
div
nuxt
db-footer
</template>
Di sini kami menggunakan 2 komponen:
1. nuxt - selama perakitan, itu akan diganti dengan halaman tertentu yang diminta oleh pengguna.
2. db-footer adalah komponen Footer kita sendiri (kita akan menulisnya nanti) yang akan secara otomatis ditambahkan ke setiap halaman aplikasi kita.
error.vue
Secara default, untuk setiap kesalahan yang dikembalikan dari server dalam status http, Nuxt dialihkan ke layout / error.vue dan meneruskan objek yang berisi deskripsi kesalahan yang diterima melalui parameter input yang disebut kesalahan.
Mari kita lihat seperti apa tampilan bagian skrip, yang akan membantu menyatukan pekerjaan dengan kesalahan yang diterima:
<script lang="ts">
import Vue from 'vue'
type Error = {
statusCode: number
message: string
}
type ErrorText = {
title: string
subtitle: string
}
type ErrorTexts = {
[key: number]: ErrorText
default: ErrorText
}
export default Vue.extend({
name: 'ErrorPage',
props: {
error: {
type: Object as () => Error,
required: true,
},
},
data: () => ({
texts: {
404: {
title: '404. Page not found',
subtitle: 'Something went wrong, no such address exists',
},
default: {
title: 'Unknown error',
subtitle: 'Something went wrong, but we`ll try to figure out what`s wrong',
},
} as ErrorTexts,
}),
computed: {
errorText(): ErrorText {
const { statusCode } = this.error
return this.texts[statusCode] || this.texts.default
},
},
})
</script>
Apa yang terjadi di sini:
1. Pertama, kita tentukan tipe yang akan digunakan dalam file ini.
2. Di objek data, kita membuat kamus yang akan berisi pesan untuk semua kesalahan yang ingin kita tampilkan pesan unik dan pesan default untuk semua yang lain.
3. Dalam errorText properti yang dihitung, kami memeriksa apakah kesalahan yang diterima ada dalam kamus. Jika ada kesalahan, maka kami mengembalikan pesan untuk itu. Jika tidak ada kesalahan, kembalikan pesan default.
Dalam kasus ini, template kita akan terlihat seperti ini:
<template lang="pug">
section.section
.content
.ep__container
section-header(
:title="errorText.title"
:subtitle="errorText.subtitle"
)
nuxt-link.ep__link(
class="primary"
to="/"
) Home page
</template>
Perhatikan bahwa di sini kita menggunakan kelas utilitas global .section dan .content yang telah kita buat sebelumnya di file assets / styles / global / other.scss. Mereka memungkinkan konten untuk ditampilkan di tengah halaman.
Ini menggunakan komponen bagian-header, yang belum dibuat, tetapi di masa mendatang akan menjadi komponen universal untuk menampilkan header. Kami akan menerapkannya ketika kami berbicara tentang komponen.
Direktori tata letak terlihat seperti ini: Mari mulai membuat komponen.
layouts/
-- default.vue
-- error.vue
Komponen
Komponen adalah blok bangunan aplikasi kita. Mari kita mulai dengan komponen yang telah kita lihat di atas.
Agar artikel tidak mengembang, saya tidak akan menjelaskan gaya komponen. Mereka dapat ditemukan di repositori aplikasi ini.
SectionHeader
Judul dalam aplikasi kita dibuat dengan gaya yang sama, jadi logis untuk menggunakan satu komponen untuk menampilkannya dan mengubah data yang ditampilkan melalui parameter masukan.
Mari kita lihat bagian skrip dari komponen ini:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'SectionHeader',
props: {
title: {
type: String,
required: true,
},
subtitle: {
type: String,
default: '',
},
},
})
</script>
Sekarang mari kita lihat bagaimana template itu akan terlihat:
<template lang="pug">
section.section
.content
h1.sh__title(
class="h1"
) {{ title }}
p.sh__subtitle(
v-if="subtitle"
class="body2 regular"
) {{ subtitle }}
</template>
Seperti yang bisa kita lihat, komponen ini adalah pembungkus sederhana untuk data yang ditampilkan dan tidak mengandung logika apa pun.
LinkToHome
Komponen paling sederhana dalam aplikasi kita adalah link di atas judul yang mengarah ke halaman rumah dari halaman posting yang dipilih.
Komponen ini sangat kecil, jadi saya akan memberikan semua kodenya sekaligus (tanpa gaya):
<template lang="pug">
section.section
.content
nuxt-link.lth__link(
to="/"
class="primary"
)
img.lth__link-icon(
src="~/assets/icons/home.svg"
alt="icon-home"
)
| Home
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'LinkToHome',
})
</script>
Perhatikan bahwa kami meminta ikon home.svg dari direktori assets / icons. Pertama, Anda perlu membuat direktori ini dan menambahkan ikon yang diinginkan di sana.
DbFooter
Komponen DbFooter sangat sederhana. Ini berisi hak cipta dan tautan untuk membuat surat.
Persyaratannya jelas, mari kita mulai penerapan dengan bagian skrip:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'DbFooter',
computed: {
copyright(): string {
const year = new Date().getUTCFullYear()
return ` ${year} · All rights reserved`
},
},
})
</script>
Di DbFooter, kami hanya memiliki satu properti komputasi yang mengembalikan tahun saat ini, digabungkan dengan string tertentu. Sekarang mari kita lihat templatnya:
<template lang="pug">
section.section
.content
.footer
a.secondary(
href="mailto:example@mail.com?subject=Nuxt blog"
) Contact us
p.footer__copyright(
class="body3 regular"
) {{ copyright }}
</template>
Ketika Anda mengklik tautan Hubungi kami, kami akan membuka klien surat asli dan segera mengatur subjek pesan. Solusi ini cocok untuk demo aplikasi kita, tetapi dalam kehidupan nyata, solusi yang lebih tepat adalah dengan menerapkan formulir umpan balik untuk mengirim pesan langsung dari situs.
KARTU POS
The kartu pos sederhana dan mudah.
<script lang="ts">
import Vue from 'vue'
import { Post } from '~/content/Post'
export default Vue.extend({
name: 'PostCard',
props: {
post: {
type: Object as () => Post,
required: true,
},
},
computed: {
pageUrl(): string {
return `/post/${this.post.id}`
},
},
})
</script>
Di bagian script, kita mendefinisikan satu parameter input, post, yang akan berisi semua informasi yang diperlukan tentang post.
Kami juga mengimplementasikan properti pageUrl yang dihitung untuk digunakan dalam template, yang akan mengembalikan kami tautan ke halaman yang diinginkan dengan kiriman.
Template akan terlihat seperti ini:
<template lang="pug">
nuxt-link.pc(:to="pageUrl")
img.pc__img(
:src="getDynamicFile(post.img)"
:alt="`post-image-${post.id}`"
)
p.pc__title(class="body1 medium") {{ post.title }}
p.pc__subtitle(class="body3 regular") {{ post.desc }}
</template>
Perhatikan bahwa elemen root dari template tersebut adalah nuxt-link. Ini dilakukan agar pengguna memiliki kesempatan untuk membuka postingan di jendela baru menggunakan mouse.
Ini adalah pertama kalinya mixin getDynamicFile global yang kami buat sebelumnya di artikel ini digunakan.
PostList
Komponen utama pada halaman utama akan terdiri dari penghitung posting di bagian atas dan daftar posting itu sendiri.
Bagian skrip untuk komponen ini:
<script lang="ts">
import Vue from 'vue'
import posts from '~/content/posts'
export default Vue.extend({
name: 'PostList',
data: () => ({
posts,
}),
})
</script>
Perhatikan bahwa setelah mengimpor array dengan tulisan, kami menambahkannya ke objek data sehingga templat memiliki akses ke data ini di masa mendatang.
Templatenya sendiri terlihat seperti ini:
<template lang="pug">
section.section
.content
p.pl__count(class="body2 regular")
img.pl__count-icon(
src="~/assets/icons/list.svg"
alt="icon-list"
)
| Total {{ posts.length }} posts
.pl__items
post-card(
v-for="post in posts"
:key="post.id"
:post="post"
)
</template>
Agar semuanya bekerja dengan benar, jangan lupa untuk menambahkan ikon list.svg ke direktori assets / icons.
PostFull
PostFull adalah komponen utama pada halaman posting terpisah yang akan bertanggung jawab untuk menampilkan teks posting.
Untuk komponen ini, kita membutuhkan modul @ nuxtjs / markdownit , yang akan bertanggung jawab untuk mengubah md menjadi html.
Mari instal:
npm i @nuxtjs/markdownit
Kemudian tambahkan @ nuxtjs / markdownit ke bagian modul dari file nuxt.config.js:
{
modules: [
'@nuxtjs/markdownit',
],
}
Baik! Mari mulai menerapkan komponen. Seperti biasa, dari bagian skrip:
<script lang="ts">
import Vue from 'vue'
import { Post } from '~/content/Post'
export default Vue.extend({
name: 'PostFull',
props: {
post: {
type: Object as () => Post,
required: true,
},
},
})
</script>
Di bagian skrip, kami mendefinisikan satu parameter masukan, pos, yang akan berisi semua informasi yang diperlukan tentang pos.
Pindah ke template:
<template lang="pug">
section.section
.content
img.pf__image(
:src="getDynamicFile(post.img)"
:alt="`post-image-${post.id}`"
)
.pf__md(v-html="getDynamicFile(post.file).default")
</template>
Seperti yang Anda lihat, kami secara dinamis mendapatkan dan merender gambar dan file .md menggunakan mixin getDynamicFile kami.
Saya pikir Anda memperhatikan bahwa kami menggunakan atribut v-html standar untuk merender file, karena @ nuxtjs / markdownit akan melakukan sisanya untuk kami. Sangat sederhana!
Kita bisa menggunakan :: v-deep selector untuk mengakses kustomisasi gaya file .md yang dirender. Lihat Github untuk melihat bagaimana komponen ini diimplementasikan.
Dalam komponen ini, saya hanya mengatur indentasi untuk paragraf untuk menunjukkan prinsip penyesuaian, tetapi dalam aplikasi nyata, Anda perlu membuat satu set lengkap gaya untuk semua elemen html yang digunakan dan diperlukan.
Halaman
Ketika semua komponen sudah siap, kita bisa mulai membuat halaman.
Seperti yang mungkin sudah Anda pahami dari desainnya, aplikasi kita akan terdiri dari halaman utama dengan daftar semua artikel dan halaman dinamis yang menampilkan posting yang dipilih.
Struktur direktori halaman: Semua komponen berdiri sendiri, dan statusnya ditentukan melalui parameter input, sehingga halaman kita akan terlihat seperti daftar komponen yang ditentukan dalam urutan yang diperlukan. Halaman utama akan terlihat seperti ini:
pages/
-- index.vue
-- post/
---- _id.vue
<template lang="pug">
.page
section-header(
title="Nuxt blog"
subtitle="The best blog you can find on the global internet"
)
post-list
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'HomePage',
})
</script>
Untuk menyetel padding yang benar, kami menggunakan kelas global .page yang kami buat sebelumnya di assets / styles / global / other.scss.
Satu halaman posting akan terlihat sedikit lebih kompleks. Mari kita lihat bagian skrip terlebih dahulu:
<script lang="ts">
import Vue from 'vue'
import { Post } from '~/content/Post'
import posts from '~/content/posts'
export default Vue.extend({
validate({ params }) {
return /^\d+$/.test(params.id)
},
computed: {
currentId(): number {
return Number(this.$route.params.id)
},
currentPost(): Post | undefined {
return posts.find(({ id }) => id === this.currentId)
},
},
})
</script>
Kami melihat metode validasi. Metode ini tidak ada di Vue, Nuxt menyediakannya bagi kami untuk memvalidasi parameter yang diterima dari router. Validasi akan dipanggil setiap kali Anda menavigasi ke rute baru. Dalam hal ini, kami hanya memeriksa bahwa id yang diberikan kepada kami adalah angka. Jika validasi gagal, pengguna akan dikembalikan ke halaman error error.vue.
Ada 2 properti yang dihitung yang diterapkan di sini. Mari kita
lihat lebih dekat apa yang mereka lakukan: 1. currentId - properti ini mengembalikan kita id posting saat ini (yang diperoleh dari parameter router), setelah sebelumnya mengubahnya menjadi angka.
2. currentPost mengembalikan objek dengan informasi tentang posting yang dipilih dari array umum semua posting.
Sepertinya mereka sudah menemukan jawabannya. Mari kita lihat templatnya:
<template lang="pug">
.page
link-to-home
section-header(
:title="currentPost.title"
)
post-full(
:post="currentPost"
)
</template>
Bagian gaya untuk halaman ini, serta untuk halaman utama, hilang.
Kode untuk halaman-halaman di Github .
Terapkan ke Hostman
Hore! Aplikasi kita hampir siap. Saatnya untuk mulai menerapkannya.
Untuk tugas ini, saya akan menggunakan platform cloud Hostman , yang memungkinkan Anda mengotomatiskan proses penerapan.
Aplikasi kita akan menjadi situs statis, karena paket gratis tersedia untuk situs statis di Hostman.
Untuk mempublikasikan, kita harus mengklik tombol Buat di antarmuka platform, pilih paket gratis dan hubungkan repositori Github kita, menentukan opsi yang diperlukan untuk penerapan.
Segera setelah itu, penerbitan akan dimulai secara otomatis dan domain gratis akan dibuat di zona * .hostman.site dengan sertifikat ssl dari Let's Encrypt diinstal.
Mulai sekarang, setiap push baru ke cabang yang dipilih (master secara default) akan digunakan untuk menerapkan versi baru aplikasi. Sangat sederhana dan nyaman!
Kesimpulan
Jadi apa yang kami miliki:
Kami mencoba untuk menunjukkan dalam praktek bagaimana bekerja dengan kerangka kerja Nuxt.js. Kami berhasil membuat aplikasi sederhana dari awal hingga akhir, mulai dari membuat kit UI hingga mengatur penerapan.
Jika Anda telah mengikuti semua langkah dalam artikel ini, selamat atas pembuatan aplikasi Nuxt.js pertama Anda. Apakah itu sulit? Bagaimana Anda bekerja dengan kerangka ini? Jika Anda memiliki pertanyaan atau permintaan, jangan ragu untuk menulis di kolom komentar.