در قسمت قبل موفق شدیم که router خود را راه اندازی کنیم. حالا زمان آن شده است که کامپوننت های سایت را تک به تک کدنویسی کنیم. اگر به فایل index.html خود نگاه کنید، متوجه می شوید که من از CDN بوت استرپ برای استایل دهی استفاده کرده ام. بنابراین برای تعریف header نیز کافی است که به وب سایت بوت استرپ رفته و header نمونه ی آن را برداریم. برای مشاهده ی header نمونه باید به آدرس زیر سر بزنید: https://getbootstrap.com/docs/3.4/components/#navbar در آنجا یک header نمونه به شکل زیر می بینید. وب سایت ما بسیار ساده تر از آن است که به این همه کد نیاز داشته باشد (مثلا ما قسمت search را نداریم) بنابراین این کد ها را درون Header.vue کپی کنید (قبل از کپی کردن، تگ h1 درون فایل را حذف کنید) تا قسمت های ناخواسته را با هم حذف نماییم. مثلا قسمت button در ابتدای کد را حذف می کنم چرا که نمی خواهم این پروژه را برای گوشی های هوشمند بهینه سازی کنم. قسمت button این قسمت است:
پنل نویسندگان