آشنایی با فایل‌ها و ساختار پروژه در Vue.js

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

ساختار کلی پروژه Vue

بعد از اجرای دستور vue create my-vue-app یا npm create vite@latest my-vue-app --template vue، یه پوشه پروژه با ساختار زیر ساخته می‌شه:

my-vue-app/

│── node_modules/        → کتابخانه‌های نصب‌شده (با npm یا yarn)

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

│   ├── index.html       → نقطه ورود برنامه

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

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

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

│   ├── views/           → صفحات اصلی (در SPA ها)

│   ├── router/          → مدیریت مسیرها (اگه Vue Router نصب باشه)

│   ├── store/           → مدیریت وضعیت (Vuex یا Pinia)

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

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

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

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

│── vite.config.js       → تنظیمات Vite (در صورت استفاده از Vite)

│── vue.config.js        → تنظیمات Vue CLI (در صورت استفاده از Vue CLI)

بررسی فایل‌ها و پوشه‌های مهم

۱. public/index.html (نقطه ورود برنامه)

Vue روی این فایل لود می‌شه و تمام برنامه داخل #app رندر می‌شه:

<!DOCTYPE html>

<html lang="fa">

<head>

    <meta charset="UTF-8">

    <title>Vue App</title>

</head>

<body>

    <div id="app"></div>

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

</body>

</html>

محتوای #app از طریق Vue رندر شده و با App.vue جایگزین می‌شه.

۲. src/main.js (نقطه ورود جاوااسکریپت)

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

import { createApp } from 'vue'

import App from './App.vue'

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

اگه از Vue Router یا Vuex (Pinia) استفاده کنی، باید اینجا اون‌ها رو اضافه کنی.

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

این فایل اصلی‌ترین کامپوننت توی برنامه Vue هست که سایر کامپوننت‌ها داخلش قرار می‌گیرن:

<template>

  <div>

    <h1>به Vue خوش آمدید</h1>

  </div>

</template>

<script>

export default {

  data() {

    return { message: "Vue.js عالیه!" }

  }

}

</script>

<style>

h1 {

  color: blue;

}

</style>

می‌تونی این فایل رو تغییر بدی و بقیه کامپوننت‌ها رو توش اضافه کنی.

۴. src/components/ (کامپوننت‌ها)

توی این پوشه، تمام کامپوننت‌های جداگانه Vue رو قرار می‌دی. مثلاً:
src/components/HelloWorld.vue

<template>

  <h2>سلام، من یک کامپوننت مستقل هستم!</h2>

</template>

کامپوننت‌ها بخش‌های کوچیکی از UI هستن که می‌تونی بارها و بارها استفاده کنی.

۵. src/assets/ (فایل‌های استاتیک)

اینجا می‌تونی تصاویر، آیکون‌ها و فایل‌های CSS مربوط به پروژه رو ذخیره کنی. مثلاً:

src/assets/logo.png
src/assets/styles.css

از این فایل‌ها داخل کامپوننت‌ها می‌تونی این‌جوری استفاده کنی:

<img src="@/assets/logo.png" alt="Vue Logo">

۶. src/views/ (صفحات اصلی)

اگه از Vue Router استفاده کنی، معمولا صفحات اصلی برنامه توی این پوشه قرار می‌گیرن. مثلا:
src/views/Home.vue

<template>

  <h1>صفحه اصلی</h1>

</template>

این کامپوننت‌ها به عنوان صفحات اصلی داخل router استفاده می‌شن.

۷. src/router/ (مدیریت مسیرها)

اگه Vue Router نصب شده باشه، اینجا مسیرهای برنامه رو مشخص می‌کنی. مثلا:
src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

import Home from '../views/Home.vue'

import About from '../views/About.vue'

const routes = [

  { path: '/', component: Home },

  { path: '/about', component: About }

]

const router = createRouter({

  history: createWebHistory(),

  routes

})

export default router

این فایل مشخص می‌کنه که وقتی کاربر به /about می‌ره، کامپوننت About.vue نمایش داده بشه.

۸. package.json (وابستگی‌ها و تنظیمات)

این فایل لیست تمام پکیج‌هایی که پروژه استفاده می‌کنه رو نگه می‌داره. مثلا:

{

  "name": "my-vue-app",

  "version": "0.1.0",

  "dependencies": {

    "vue": "^3.2.47",

    "vue-router": "^4.1.5"

  },

  "devDependencies": {

    "vite": "^4.0.0"

  }

}

برای نصب یه کتابخونه جدید مثلا axios از این دستور استفاده کن:

npm install axios

جمع‌بندی

Vue یه ساختار ماژولار داره که باعث مدیریت بهتر کدها، خوانایی بیشتر و توسعه راحت‌تر می‌شه.

فایل‌های اصلی توی src/ هستن
components/ شامل کامپوننت‌های کوچک و قابل استفاده مجدد هست
views/ شامل صفحات اصلیه (اگه Vue Router استفاده کنی)
assets/ برای فایل‌های استاتیک
router/ برای مدیریت مسیرها
main.js و App.vue نقاط اصلی اجرای Vue هستن