من تصمیم گرفته ام که پروژه هایم را در پلتفرم های آنلاین مستند کنم. عمدتاً برای نوشتن پیشرفت من، اما همچنین برای هر کسی که کنجکاو است که با Vue و Tailwind شروع به کار کند.
یکی از با ارزش ترین پروژه ها برای من Cupbook است. شاید به این دلیل که من مجبور نبودم روی طراحی کار کنم، زیرا دوست طراحم این کار را انجام داد و من فقط باید به قسمت توسعه رسیدگی می کردم.
اولین قدم نصب Vue بود. بسیار آسان و سرراست.
این فرآیند با ایجاد نوار ناوبری آغاز شد. من عاشق سبک این سایت هستم، قفسه های کتاب و گربه ها حس آرامش را برای دوستداران کتاب و گربه ایجاد می کنند. اما تعیین موقعیت SVG-ها کمی چالش برانگیز بوده است، اما من یاد گرفتم که چگونه SVG-ها را در ویرایشگر خود برش دهم. یک پیروزی کوچک برای من موقعیت گربه قسمت مورد علاقه من بود زیرا فکر می کردم نمی توانم آن را به خوبی از بین ببرم. اما نتیجه فوق العاده بود. گربه کوچکی که روی ورودی جستجو می خزد. چقدر بانمکه؟
جستجو کاربردی است. فقط چیزی را تایپ کنید و نتیجه ظاهر می شود. کد زیر با Vue 3 نوشته شده است:
<script setup>
import {computed, ref} from "vue";
import photo03 from '@/images/photo03.jpeg';
const searchQuery = ref('');
const books = [
{
title: 'To kill a mockingbird',
cover: photo03,
author: 'Harper Lee',
isBestseller: true,
},
...
]
const filteredBooks = computed(() => {
if (! searchQuery.value) return [];
return books.filter(function (book) {
return book.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
book.author.toLowerCase().includes(searchQuery.value.toLowerCase())
})
})
</script>
<template>
<div>
<img alt="logo" src="@/images/mace.svg"/>
<input v-model="searchQuery"
type="text"
name="name"
id="name">
<button></button>
</div>
<div v-if="filteredBooks.length" id="books">
<div v-for="book in filteredBooks">
<img alt="logo" :src="book.cover"/>
<div>{{ book.title }}</div>
<div>{{ book.author }}</div>
</div>
</div>
</template>
فهرست کردن کتاب‌ها و رویدادها در صفحه اصلی یک تکه کیک بود، به خصوص زمانی که طرح را آماده کرده باشید. من از CSS استفاده کردم grid و flex ابزارهایی برای قرار دادن کتاب ها در اندازه های مختلف صفحه نمایش.
سپس با ایجاد صفحه درباره ادامه دادم. اینجا هم عمدتا استفاده کردم grid و flex.
آخرین بخش صفحه تماس بود. با فرم ها ایجاد شد و در اینجا با Vue خطاهای اعتبارسنجی انجام دادم.
پس از اتمام نسخه دسکتاپ، به نسخه موبایل سایت تغییر مکان دادم. تغییر اساسی بخشی از نوار ناوبری بود که من کتاب SVG-s را از آن حذف کردم و یک منوی همبرگر ساده قرار دادم که با کلیک کردن روی آن، منوی صفحه که شامل صفحه اصلی، کتاب ها، رویدادها، درباره ما، تماس است باز می شود.
آخرین مرحله این است که تصاویر را Lazy Load کنید تا صفحه کارآمد و سریع باشد.
<img loading="lazy" src="@/images/photo24.jpeg">
بارگذاری تصویر را تا زمانی که نیاز باشد به تعویق می‌اندازد.
کجا در طول پروژه با مشکل مواجه شدم؟
اولین مشکل این بود که جستجو را کاربردی کرد. دومی موقعیت مناسب SVG-ها بود.
در طول اجرای پروژه چه چیزهایی یاد گرفتم؟
من یاد گرفتم که چگونه یک جستجوی کاربردی ایجاد کنم. من استفاده کردم
filter()عملکرد آرایه ها در جاوا اسکریپت من همچنین از Vue model binding برای پیوند دادن ورودی جستجو با متغیر جستجو استفاده کردم.من یاد گرفتم که چگونه SVG-ها را در IDE (PhpStorm) برش دهم.
در اینجا یک پیوند به وب سایت CupBook و در اینجا یک پیوند به مخزن GitHub است
امیدوارم خوشتون بیاد 😄 .
