Vue Academy · درس

بنية المشروع المُنشأة

تعرّف إلى الملفات والمجلدات التي ينشئها مشروع Vue

بنية المشروع المُنشأة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

جولة في المشروع

يتميز مشروع Vue الذي أُنشئ تلقائيًا ببنية مجلدات يمكن التنبؤ بها.

src/ الشيفرة المصدرية لتطبيقك
public/ الأصول الثابتة التي تُقدَّم كما هي
package.json التبعيات والبرامج النصية
index.html الصفحة التي يركّب Vue التطبيق فيها

تساعدك معرفة أماكن الملفات على التنقل بسرعة.

مجلد src

يحتوي مجلد src/ على كل ما تكتبه.

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

نقطة الدخول main.js

يبدأ تشغيل التطبيق من main.js، إذ ينشئ التطبيق ويركّبه.

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

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

المكوّن الجذر App.vue

إن App.vue هو المكوّن الجذر. ويقع كل مكوّن آخر بداخله.

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>

مجلد components

يحتوي مجلد components/ على المكوّنات أحادية الملف القابلة لإعادة الاستخدام.

كل ملف .vue هو مكوّن واحد
استوردها في المواضع التي تحتاج إليها
نظّمها في مجلدات فرعية مع نمو التطبيق

مجلد public

يحتوي مجلد public/ على الملفات الثابتة التي تُنسخ حرفيًا إلى ناتج عملية البناء.

لا تعالج أداة التجميع الملفات الموجودة هنا
استخدمه للأيقونات المفضلة وrobots.txt أو الأصول الثابتة
أشر إليها باستخدام مسارات مطلقة انطلاقًا من الجذر

نقطة تركيب index.html

إن index.html هي صفحة HTML الوحيدة، وتحتوي على العنصر الهدف للتركيب.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

يصف package.json مشروعك وتبعياته.

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

البرامج النصية في package.json

يحدد قسم scripts الأوامر التي تشغّلها باستخدام npm run.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

مقارنة assets وpublic

هناك طريقتان لتخزين الملفات الثابتة:

src/assets/ تعالجها أداة التجميع، وتُضاف إليها تجزئة للتخزين المؤقت، ويمكن استيرادها في الشيفرة
public/ تُنسخ كما هي، ويُشار إليها بمسار ثابت

استخدم assets للملفات التي تستوردها، وpublic للملفات التي يجب أن تحافظ على عنوان URL ثابت.

كيف تترابط الأجزاء؟

يحدث التدفق التالي عند تحميل التطبيق:

يحمّل المتصفح index.html
يشغّل main.js من خلال وسم script خاص بالوحدات
يركّب main.js ‏App.vue داخل #app
يعرض App.vue المكوّنات الفرعية

تحقق سريع

اختبر معرفتك ببنية المشروع.

مراجعة: بنية المشروع

استكشفت بنية مشروع Vue:

يحتوي src/ على شيفرتك
يبدأ main.js تشغيل التطبيق
يُعد App.vue المكوّن الجذر
يحتوي components/ على الأجزاء القابلة لإعادة الاستخدام
يوفّر public/ وindex.html المحتوى الثابت
يحدد package.json التبعيات والبرامج النصية

التالي: تهيئة CLI وإضافة الإضافات.

الأسئلة الشائعة

هل درس «بنية المشروع المُنشأة» مجاني؟

نعم — نص درس «بنية المشروع المُنشأة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «بنية المشروع المُنشأة»؟

تعرّف إلى الملفات والمجلدات التي ينشئها مشروع Vue تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «بنية المشروع المُنشأة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

تثبيت Vue CLI
بنية المشروع المُنشأة
إعداد CLI والإضافات

← العودة إلى Vue Academy