ویو جی اس چیست، نحوه ساخت نرم‌افزار با Vue.js

آموزش ویدیویی ساخت نرم افزار با Vue.js

در این مقاله به صورت ویدیویی نیز در مورد ساخت نرم افزار با Vue.js توضیح داده‌ایم. می‌توانید ویدیوی موردنظر را در ادامه مشاهده کنید:

ویو جی اس چیست؟

همان‌طور که گفته شد، ویو جی اس یک فریم ورک سمت کاربر¹frontend است که به زبان جاوا اسکریپت نگاشته شده است. در واقع این فریم‌ورک، یک اکوسیستم و محیط کامل برای طراحی و توسعه وب‌سایت و ساخت نرم‌افزار محسوب می‌شود. سازندگان آن از این فریم ورک با اصطلاح The Progressive Framework یاد می‌کنند. اما چرا از این فریم ورک با این اصطلاح (فریم ورک پیشرفت گرای یا مترقی) یاد می‌کنند؟ پاسخ روشن است. این فریم‌ورک قابلیت‌های فراوانی دارد و بسیار انعطاف‌پذیر است. دنیای وب بسیار گسترده بوده و هر روز مسائل و مباحث جدیدی در آن بروز و ظهور پیدا می‌کنند. از این‌رو ما نیازمند فریم‌ورک‌هایی هستیم که بتوانند به‌صورت منعطف و مقیاس پذیر عمل کنند.

از جمله دلایلی که ما ساخت نرم‌افزار با Vue.js را توصیه کرده و این فریم ورک را بسیار انعطاف‌پذیر می‌دانیم، آن است که می‌توانید به شکل‌های مختلفی از آن استفاده کنید:

• بهترکردن قابلیت‌های HTML بدون نیاز به پردازش‌های اضافی
• استفاده از کامپوننت‌ها در ساخت نرم‌افزار با Vue.js
• ساختن SPA²Single-Page Application به کمک این فریم‌ورک
• استفاده از حالت‌های SSR³Server-Side Rendering و SSG⁴Static Site Generation
• امکان توسعه و ساخت وب‌سایت برای حالت‌های موبایل، دسکتاپ و …

نکته جالب در کار با این فریم ورک آن است که برای شروع کار با آن تنها کافی است دانش پایه در زمینه HTML، CSS و جاوا اسکریپت داشته باشید.

گرچه این مفاهیم و اصطلاحات در نگاه اول پیچیده و گنگ به نظر می‌آیند، اما مستندات و راهنمای اصلی فریم ورک ویو جی اس به خوبی مسیر را برای شما روشن کرده و توضیحات ضروری را در اختیار شما قرار می‌دهد.

از این رو گفته می‌شود که فریم‌ورک ویو جی اس Progressive است و متناسب با نیاز و سطح دانش و نوع وب سایتتان می‌توانید از آن بهره‌مند شوید.

در ادامه این مقاله ابتدا به مفهوم Single-File Component یا SFC اشاره می‌کنیم که دانستن آن در ساخت نرم‌افزار با Vue.js بسیار مهم و ضروری است. سپس در مورد چگونگی ایجاد یک پروژه به کمک این فریم‌ورک توضیح می‌دهیم تا بتوانید گام نخست را بردارید. در پایان نیز توضیح مختصری در مورد ساختار فایل‌ها و پوشه‌ها در یک وب‌سایت یا نرم‌افزار ایجادشده با Vue.js ارائه خواهد شد.

مفهوم SFC در ساخت نرم‌افزار با Vue.js

همان‌طور که ذکر شد، ویو جی اس یک فریم‌ورک انعطاف‌پذیر است که برای استفاده از آن می‌توانید از فرمت‌های گوناگونی بهره ببرید. اما یکی از رایج‌ترین این روش‌ها، استفاده از SFC یا کامپوننت‌های تک فایلی است.

مفهوم SFC در ویو جی اس چیست؟ به زبان ساده SFC به معنای آن است که کلیه کدهای مربوط به یک کامپوننت‌ یا صفحه در سایت شما در داخل «یک فایل» نوشته می‌شود. این فایل دارای پسوند «.vue» است.

کدهای HTML، CSS و جاوا اسکریپت هر کامپوننت در داخل همان تک فایل مربوط به کامپوننت قرار می‌گیرند. دیگر نیازی نیست که مثلاً برای کدهای CSS یک فایل جداگانه ایجاد کنید. نمونه‌ای از این ساختار را در مثال زیر مشاهده می‌کنید:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

البته قصد ما در اینجا توضیح نحوه عملکرد این کد نیست، اما همان طور که مشاهده می‌کنید تمامی کدهای مربوط به یک صفحه یا کامپوننت در داخل همین یک فایل قرار گرفته‌اند. به همین دلیل هم نام چنین حالتی را SFC قرار داده‌اند. در ادامه نیز ما از همین حالت در کار خود استفاده می‌کنیم.

ساخت نرم‌افزار با Vue.js

خب، بعد از آنکه دانستید ویو جی اس چیست و همچنین با مفهوم SFC در این فریم‌ورک آشنا شدید، نوبت به آغاز کار ساخت نرم‌افزار با Vue.js می‌رسد. برای این کار می‌توانید از مستندات راهنمای اصلی این فریم‌ورک کمک بگیرید.

البته توجه داشته باشید که برای تمرین و یادگیری Vue.js روش‌های دیگری نیز وجود دارند. مانند استفاده از محیط آنلاین Vue SFC Playground که شکل آن را در ادامه مشاهده می‌کنید:

اما ما در این مقاله به نصب Vue.js روی سیستم شخصی و در اصطلاح کار کردن با این ابزار به صورت لوکال⁵Local می‌پردازیم. برای این منظور باید حتماً Node.js روی سیستم شما نصب باشد.

همچنین بسته به اینکه در چه زمانی این مقاله را مطالعه می‌کنید و از چه نسخه‌ای از Vue.js قصد استفاده دارید، نسخه Node.js که روی سیستم شما نصب است، نیز بسیار مهم است.

مثلاً در زمان نوشتن این مقاله، مستندات ویو جی اس به ما توصیه کرده است که نود جی اس نسخه 22.12.0 یا بالاتر روی سیستم ما نصب باشد. همان‌طور که در تصویر زیر مشاهده می‌کنید، در صورت استفاده از نسخه 22.11.0 با پیغام خطا یا اخطار از سوی محیط خط فرمان⁶command line مواجه می‌شوید.

بعد از نصب Node.js روی سیستم خود، کافی است محیط خط فرمان (مانند نرم‌افزار Command Prompt در ویندوز) را در سیستم خود به کار گرفته و دستور زیر را در آن اجرا کنید:

npm create vue@latest

این دستور گزینه‌های مختلفی را پیش روی شما قرار می‌دهد. شما می‌توانید بسته به نیاز پروژه خود، هرکدام از این گزینه‌ها و ابزارها را فعال یا غیرفعال کنید. مثلاً اگر دوست دارید به جای جاوا اسکریپت از TypeScript در پروژه خود استفاده کنید، می‌توانید آن را انتخاب نمایید.

البته کار با هرکدام از این ابزارها و گزینه‌ها نیازمند آموزش‌هایی مجزا است که فعلاً موضوع بحث این مقاله نیست. بعد از انتخاب گزینه‌های موردنظر با زدن دکمه Enter، فرآیند نصب و ایجاد پروژه Vue.js آغاز می‌شود.

توجه داشته باشید که پیش از شروع همه این موارد، مسیر پوشه موردنظر خود (پوشه اصلی ساخت نرم‌افزار با Vue.js) را در محیط خط فرمان مشخص کرده باشید. به این ترتیب، بعد از اتمام فرآیند نصب، پیام موفقیت‌آمیز بودن کار به شما نشان داده می‌شود.

اگر به پوشه مربوطه مراجعه کنید یا آن را در محیط یک ویرایشگر کد مانند WebStorm باز کنید، می‌توانید فایل‌ها و پوشه‌های زیرمجموعه کار را به خوبی مشاهده و بررسی کنید.

نصب کتابخانه‌ها و اجرای پروژه

بعد از اینکه ساختار پوشه‌های ساخت نرم‌افزار با Vue.js برای شما ایجاد شد، تقریباً دو قدم دیگر پیش روی شما باقی می‌ماند. ابتدا باید کتابخانه‌ها یا به اصطلاح ماژول‌های لازم برای پروژه خود را نصب کنید. این کار با اجرای دستور زیر در همان خط فرمان و در همان مسیر پوشه‌های پروژه امکان پذیر می‌گردد.

npm install

بعد از اجرای این دستور، پکیج‌ها یا ماژول‌های لازم (بسته به گزینه‌های انتخابی شما در مراحل قبلی) از اینترنت دانلود شده و در پوشه‌ای به نام node_modules قرار داده می‌شوند. وجود این کدها و کتابخانه‌ها برای عملکرد صحیح نرم‌افزار شما ضروری است.

گام دومی که باید بردارید تا پروژه نهایتاً اجرا شده و در صفحه مرورگر به آن دسترسی داشته باشید، اجرای کد زیر در خط فرمان است.

npm run dev

در واقع هر زمان که بخواهید مجدداً پروژه خود را در سیستم خود فعال کرده و کار ساخت نرم‌افزار با Vue.js را پیگیری کنید، کافی است در محیط خط فرمان به محل پوشه نرم‌افزار رفته و همین دستور بالایی را اجرا کنید. بعد از اجرای این دستور، لینکی توسط سیستم Vue به شما معرفی می‌شود.

http://localhost:5173/

با کپی و جایگذاری کردن این لینک در یک پنجره مرورگر، می‌توانید به صفحه اصلی نرم‌افزار خود دسترسی داشته باشید.

این، یک صفحه خام و بدون هیچ‌گونه طراحی است که نقطه شروع ساخت نرم‌افزار با Vue.js محسوب می‌شود. علاوه بر آن Vue.js دارای یک سیستم توسعه یا به اصطلاح DevTools است که در همان پنجره مرورگر، اطلاعات خوبی در مورد نرم‌افزار شما در اختیار می‌گذارد.

این اطلاعات به شما به عنوان یک توسعه‌دهنده کمک می‌کنند تا بهتر بتوانید به بررسی و آنالیز نرم‌افزار و رفع ایرادهای احتمالی کدنویسی بپردازید. برای کسب اطلاعات بیشتر می‌توانید به مستندات اصلی این ابزار مراجعه کنید. جهت دسترسی به این ابزار می‌توانید روی آیکون Vue در پایین صفحه نرم‌افزار خود کلیک کنید.

ساخت نرم‌افزار با Vue.js (توضیح پوشه‌ها)

پوشه‌ها و فایل‌هایی که با اجرای دستورات فوق در محل موردنظر ایجاد شده‌اند، هر کدام کاربردی در ساخت نرم‌افزار شما دارند. البته که برای کار با این فریم‌ورک مسلماً به آموزش‌های بیشتری نیاز هست. اما در ادامه به صورت فهرست‌وار در مورد اهمیت و کاربرد پوشه‌ها و فایل‌های مهم در ساختار Vue.js صحبت خواهیم کرد.

• پوشه node_modules: همان‌طور که ذکر شد، این پوشه، کتابخانه‌های مورد نیاز توسعه و ساخت نرم‌افزار با Vue.js را در خود جای می‌دهد. معمولاً نیازی نیست که شما به صورت دستی در فایل‌ها یا پوشه‌های داخلی این پوشه تغییری ایجاد کنید.
• پوشه public: این پوشه برای ذخیره‌سازی داده‌های استاتیک سایت شما به کار می‌رود. معمولاً تصاویر و فایل‌هایی که در داخل این پوشه قرار داده می‌شوند، برای عموم بازدیدکنندگان سایت قابل رؤیت هستند.
• پوشه src: این پوشه محل نگهداری صفحات، کامپوننت‌ها و سایر فایل‌های مرتبط با ساختار و نمایش سایت و نرم‌افزار شما است. در واقع شما کار اصلی توسعه و کدنویسی صفحات و بخش‌های مختلف را به کمک فایل‌های درون این پوشه انجام می‌دهید.
• فایل package.json: این فایل نیز یکی از فایل‌های مهم در ساختار نرم‌افزار شما محسوب می‌شود. درون این فایل علاوه بر اطلاعات و تنظیمات کلی نرم‌افزار، دستورهای مربوط به محیط توسعه⁷development و ساخت⁸build و همچنین نسخه‌های مربوط به کتابخانه‌ها و ابزارهای استفاده شده، قابل مشاهده هستند.
• فایل README.md: این فایل خیلی مرتبط با فرآیند ساخت نرم‌افزار با Vue.js نیست، بلکه شما به کمک آن می‌توانید نرم‌افزار خود را معرفی کنید یا اطلاعات و توضیحات مهم مرتبط با آن را ارائه کنید تا استفاده‌کنندگان، از آن بهره‌مند شوند.
• فایل vite.config.ts: اگر با فریم‌ورک‌هایی مانند Vue.js قصد ساخت وب سایت یا نرم‌افزار را داشته باشید، معمولاً نیاز به مرحله‌ای تحت عنوان build یا پردازش و آماده‌سازی نرم‌افزار پیدا می‌کنید تا سایت شما بتواند به خوبی در محیط آنلاین ارائه شود. این نوع کارها به کمک ابزارهایی مانند Vite امکان‌پذیر می‌شوند. وجود این فایل هم برای انجام تنظیمات مرتبط با این‌گونه پردازش‌ها ضروری است. در صورتی که از جاوا اسکریپت به جای تایپ اسکریپت استفاده کنید، احتمالاً این فایل را به شکل vite.config.js خواهید دید.

جمع‌بندی

در این مقاله به موضوع آموزش ساخت نرم‌افزار با Vue.js پرداختیم. البته صرفاً مباحث مقدماتی و چگونگی ایجاد یک پروژه با فریم‌ورک ویو جی اس مطرح شد. این فریم‌ورک از جمله فریم‌ورک‌های مطرح در حیطه طراحی سایت است که علاقه‌مندان به برنامه نویسی سایت با یادگیری آن بهتر و راحت‌تر می‌توانند به کار ساخت وب‌سایت و نرم‌افزار تحت وب بپردازند.

پاورقی:

• 1
  frontend
• 2
  Single-Page Application
• 3
  Server-Side Rendering
• 4
  Static Site Generation
• 5
  Local
• 6
  command line
• 7
  development
• 8
  build