مفهوم Vue و ساختار پروژه

Vue.js چیست؟

Vue.js یه فریم‌ورک مدرن، سبک و ری‌اکتیو برای ساخت رابط‌های کاربریه که به کمکش می‌تونی اپلیکیشن‌های تحت وب، SPA (Single Page Application) و حتی PWA بسازی. Vue ساختارش کامپوننت‌محور (Component-Based) هست، یعنی کل برنامه رو می‌تونی به بخش‌های کوچیک و مستقل تقسیم کنی و راحت‌تر مدیریت کنی.

ساختار پروژه Vue

وقتی یه پروژه جدید Vue با Vue CLI یا Vite می‌سازی، یه ساختار مشخص بهت می‌ده. بیایم ببینیم که هر بخش چی کار می‌کنه:

my-vue-app/

│── node_modules/        → کتابخونه‌های نصب شده

│── public/              → فایل‌های استاتیک (مثل تصاویر و آیکون‌ها)

│   ├── index.html       → نقطه ورود برنامه (Vue اینو کنترل می‌کنه)

│── src/                 → کدهای اصلی پروژه

│   ├── assets/          → فایل‌های استایل، تصاویر و منابع پروژه

│   ├── components/      → کامپوننت‌های جداگانه Vue

│   ├── App.vue          → کامپوننت اصلی برنامه

│   ├── main.js          → نقطه ورود جاوااسکریپت

│── .gitignore           → فایل‌هایی که نباید در گیت ذخیره بشن

│── package.json         → تنظیمات پروژه و وابستگی‌ها

│── vite.config.js       → تنظیمات Vite

توضیح فایل‌های مهم

۱. index.html

Vue در اصل یه اپلیکیشن تک صفحه‌ای (SPA) هست، پس همه چیز توی یه index.html رندر می‌شه:

<!DOCTYPE html>

<html lang="fa">

<head>

    <meta charset="UTF-8">

    <title>My Vue App</title>

</head>

<body>

    <div id="app"></div> <!-- Vue کل برنامه رو اینجا رندر می‌کنه -->

    <script type="module" src="/src/main.js"></script>

</body>

</html>

Vue محتویات #app رو می‌گیره و تبدیل به اپلیکیشن می‌کنه!

۲. main.js (نقطه ورود Vue)

توی این فایل Vue مقداردهی اولیه می‌شه و کامپوننت App.vue رو به #app در index.html متصل می‌کنه:

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

۳. App.vue (کامپوننت اصلی)

اینجا هسته اصلی پروژه قرار داره که سایر کامپوننت‌ها داخلش استفاده می‌شن. Vue از Single File Components (SFC) استفاده می‌کنه، یعنی توی یه فایل هم HTML، هم CSS و هم JS می‌نویسیم:

<template>

  <h1>سلام Vue!</h1>

</template>

<script>

export default {

  data() {

    return { message: "این اولین کامپوننت منه!" }

  }

}

</script>

<style>

h1 { color: blue; }

</style>

Vue این ساختار رو خیلی خوانا و ماژولار کرده!

جمع‌بندی

Vue بر اساس یه ساختار کامپوننتی طراحی شده و پروژه‌های Vue شامل یک HTML اصلی (index.html)، یک نقطه ورود (main.js) و مجموعه‌ای از کامپوننت‌ها (.vue فایل‌ها) هستن. این ساختار باعث می‌شه توسعه و نگهداری پروژه خیلی راحت‌تر بشه!