Vue.js: الإعداد و Hello World

آخر تحديث: 2026-08-26

لا يتطلب إعداد بيئة تطوير Vue 3 سوى أربع خطوات: تثبيت Node.js، واستخدام أداة إنشاء الهيكل الأساسي create-vue، وتشغيل Vite، وفتح المتصفح. سيرشدك هذا الدرس خطوة بخطوة بدءًا من الصفر حتى تتمكن من تشغيل Vue في غضون خمس دقائق.

يتطلب تطوير تطبيق Vue ثلاثة عناصر: Node.js (بيئة التشغيل) + مدير الحزم (npm/pnpm) + محرر أكواد (يُوصى باستخدام VS Code). وبمجرد تثبيت هذه العناصر الثلاثة، يتم تنفيذ باقي الخطوات من سطر الأوامر.

1. ما ستتعلمه

• ما هو Node.js، ولماذا يُعد ضروريًا لتطوير الواجهة الأمامية؟
• الاختلافات بين مديري الحزم npm و pnpm و yarn وكيفية الاختيار بينهم
• كيفية استخدام أداة السقالات الرسمية create-vue وخياراتها
• كيف يعمل خادم التطوير في Vite ومزايا السرعة التي يتمتع بها
• تهيئة VS Code وملحق Volar (أمر ضروري لاستخدام Vue 3)
• الإجراء المعتاد لتشغيل برنامج «Hello World» في غضون 5 دقائق

2. إعداد بيئة التطوير لموظف جديد

(1) المشكلة: خمس أدوات — استغرق تثبيتها مني يومًا كاملاً

انضمت أليس مؤخرًا إلى فريق يعمل على Vue 3 بصفتها مطورة واجهة مستخدم أول. وفي يومها الأول، أمضت 4 ساعات في إعداد بيئة التطوير الخاصة بها:

• Node.js: تطلب الشركة الإصدار 20.x، لكنها قامت بتثبيت الإصدار 22.x → أبلغ المشروع عن خطأ «المحرك غير متوافق»
• مدير الحزم: يستخدم الفريق pnpm، لكنها لا تملك سوى npm على جهازها → لن يعمل كود زميلها
• VS Code: ملحق Volar غير مثبت → .vue جميع الملفات مخطوطة باللون الأحمر
• Vue DevTools: ملحق المتصفح غير مثبت → شجرة المكونات غير مرئية أثناء تصحيح الأخطاء
• إعدادات Git: لم يتم تعيين اسم المستخدم وعنوان البريد الإلكتروني → تظهر كلمة "غير معروف" في سجلات الإيداع

تنهد قائد الفريق تشارلي قائلاً:

«أليس، لهذا السبب لدينا ملف setup.md. يستغرق كل موظف جديد يومًا واحدًا لإعداد بيئته. نحن بحاجة إلى إعداد يتم بأمر واحد فقط.»

(2) الحل الرسمي لـ Vue 3: 4 خطوات، 5 دقائق

# 1. Installation Node.js 20.x LTS(Recommended for use with nvm Multi-Version Management)
# Mac/Linux: curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Windows: Download nvm-windows,https://github.com/coreybutler/nvm-windows

# 2. Install pnpm (2x faster than npm, Save Disk Space 50%)
npm install -g pnpm

# 3. Use create-vue Create a Project(Vue 3 Official Scaffolding)
pnpm create vue my-app
# Interaction Options:TypeScript? Yes / JSX? No / Router? Yes / Pinia? Yes / Vitest? No / E2E? No

# 4. Start the development server
cd my-app
pnpm install
pnpm dev
# → Open in a browser http://localhost:5173 See Vue Home Page

(3) الإيرادات

بعد إصدار الفريق لوثيقة «الإعداد في 5 دقائق» الجديدة، انخفض وقت الإعداد من يوم واحد إلى 30 دقيقة:

• وقت الإعداد: 4 ساعات → 5 دقائق (أسرع بـ 48 مرة)
• التسجيل الأول: اليوم الثاني → صباح اليوم الأول
• أول طلب سحب تم دمجه: الأسبوع 1 → اليوم 3
• رضا الموظفين الجدد: 60% → 95% (لا مزيد من الإحباط بسبب الإعداد)

3. ما هو Node.js؟ ولماذا نحتاج إليه؟

Node.js هو بيئة تشغيل لـ JavaScript متعددة المنصات تتيح تشغيل JavaScript محليًّا، خارج المتصفح. ويحتاج مطورو الواجهة الأمامية إليه لتشغيل أدوات البناء مثل npm وVite وWebpack.

(1) دور Node.js في تطوير Vue

graph LR
    subgraph Node.jsEcology
        N[Node.js 20+]
        P[npm/pnpm/yarn]
        V[Vite/Webpack]
        T[TypeScript Compiler]
    end
    
    subgraph Developer Workflow
        D[Developer]
        I[VS Code + Volar]
        B[Browser]
    end
    
    N --> P
    P --> V
    V --> T
    D --> I
    D --> B
    
    style N fill:#339933,color:#fff
    style P fill:#cb3837,color:#fff
    style V fill:#646cff,color:#fff

graph LR
    subgraph Node.jsEcology
        N[Node.js 20+]
        P[npm/pnpm/yarn]
        V[Vite/Webpack]
        T[TypeScript Compiler]
    end
    
    subgraph Developer Workflow
        D[Developer]
        I[VS Code + Volar]
        B[Browser]
    end
    
    N --> P
    P --> V
    V --> T
    D --> I
    D --> B
    
    style N fill:#339933,color:#fff
    style P fill:#cb3837,color:#fff
    style V fill:#646cff,color:#fff

(2) اختيار إصدار Node.js

(3) الأداة الموصى بها: nvm (مدير إصدارات Node)

يتيح لك nvm تثبيت إصدارات متعددة من Node.js على جهاز كمبيوتر واحد والتبديل بينها حسب المشروع.

# Installation nvm
# Mac/Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# Windows:
# Download nvm-windows: https://github.com/coreybutler/nvm-windows

# Use nvm to install Node 20
nvm install 20
nvm use 20

# Verification
node --version  # v20.x.x
npm --version   # 10.x.x

4. أدوات إدارة الحزم: npm مقابل pnpm مقابل yarn

(1) مقارنة بين مديري الحزم الثلاثة الرئيسيين

(2) موصى به: pnpm

يُعد «pnpm» المعيار السائد فعليًّا في عام 2026، وذلك للأسباب التالية:

• أسرع بـ 2–3 مرات: الروابط الثابتة المشتركة + التثبيت المتوازي
• توفير 50% من المساحة: استخدم الروابط الثابتة لـ node_modules لتجنب التكرار
• التبعيات الصارمة: يتم تعطيل التبعيات الوهمية (التبعيات على الحزم غير المعلنة) بشكل افتراضي.
• متوافق مع نموذج Monorepo: pnpm-workspace.yaml إعدادات بسيطة

# Installation pnpm
npm install -g pnpm

# Verification
pnpm --version  # 9.x.x

# Install project dependencies
pnpm install    # 2-3x faster than npm install

(3) مقارنة بين أوامر التثبيت الخاصة بثلاثة مديري حزم

5. أداة «create-vue» الرسمية لإنشاء الهياكل الأساسية

توصي Vue 3 رسميًا باستخدام create-vue لإنشاء المشاريع (بدلاً من الأداة القديمة vue-cli).

(1) أوامر إنشاء مشروع

# Use pnpm (Recommended)
pnpm create vue my-vue-app

# Use npm
npm create vue@latest my-vue-app

# Use yarn
yarn create vue my-vue-app

(2) وصف خيارات التفاعل

(3) هيكل الدليل بعد الإنشاء

my-vue-app/
├-- public/                  # Static Resources
│   └-- favicon.ico
├-- src/                     # Source Code
│   ├-- assets/              # Image,Font
│   ├-- components/          # Public Components
│   │   ├-- HelloWorld.vue
│   │   ├-- TheWelcome.vue
│   │   └-- icons/
│   ├-- router/              # Vue Router Layout
│   │   └-- index.ts
│   ├-- stores/              # Pinia stores
│   │   └-- counter.ts
│   ├-- views/               # Page Components
│   │   ├-- HomeView.vue
│   │   └-- AboutView.vue
│   ├-- App.vue              # Root Component
│   └-- main.ts              # Input File
├-- index.html               # HTML Entrance
├-- package.json             # Project Metadata
├-- tsconfig.json            # TypeScript Layout
├-- vite.config.ts           # Vite Layout
└-- README.md

6. ما هو Vite؟ ولماذا يعتبر أسرع من Webpack؟

Vite (التي تعني «سريع» بالفرنسية) هي أداة بناء واجهة المستخدم من الجيل التالي أطلقها فريق Vue 3، وتتمثل ميزتها الأساسية في عمليات التشغيل البارد فائقة السرعة.

(1) مقارنة السرعة بين Vite و Webpack

(2) لماذا يُعدّ Vite سريعًا جدًّا؟

graph TB
    subgraph Traditional Tools Webpack
        W1[Bundle all modules at startup]
        W2[The browser received bundle.js]
        W3[Parse and execute the entire bundle]
    end
    
    subgraph New Tool Vite
        V1[Do not package at startup]
        V2[Direct browser request ESM Module]
        V3[Compile Individual Modules on Demand]
    end
    
    W1 --> W2 --> W3
    V1 --> V2 --> V3
    
    style W1 fill:#ff6b6b
    style V3 fill:#42b883,color:#fff

graph TB
    subgraph Traditional Tools Webpack
        W1[Bundle all modules at startup]
        W2[The browser received bundle.js]
        W3[Parse and execute the entire bundle]
    end
    
    subgraph New Tool Vite
        V1[Do not package at startup]
        V2[Direct browser request ESM Module]
        V3[Compile Individual Modules on Demand]
    end
    
    W1 --> W2 --> W3
    V1 --> V2 --> V3
    
    style W1 fill:#ff6b6b
    style V3 fill:#42b883,color:#fff

سر «فيت»:

1. استخدام ESM الأصلي في وضع التطوير: يقوم المتصفح بتحميل JS مباشرةً <script type="module">، دون الحاجة إلى تجميع الملفات
2. التجميع حسب الطلب: تجميع الوحدات المستخدمة في الصفحة الحالية فقط
3. التبعيات المسبقة لـ esbuild: يُعد esbuild، المكتوب بلغة Go، أسرع بـ 100 ضعف من Babel، المكتوب بلغة JavaScript.
4. استخدام Rollup في بيئة الإنتاج: الحفاظ على توافق النظام البيئي وتحسين مخرجات البناء

(3) الأوامر الشائعة في Vite

# Start the development server(Hotfix)
pnpm dev

# Production Build(Output to dist/ Table of Contents)
pnpm build

# Preview the production build locally
pnpm preview

# Type Checking(Vue 3 + TS)
pnpm type-check

7. إعدادات VS Code + Volar

(1) الامتدادات المطلوبة

(2) إعدادات VS Code الموصى بها

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "eslint.validate": ["javascript", "typescript", "vue"],
  "typescript.tsdk": "node_modules/typescript/lib"
}

(3) 5 اختصارات موصى بها في VS Code

8. مثال كامل: بدء استخدام Vue 3 في غضون 5 دقائق

▶ مثال: الخطوة 1 - تثبيت Node.js 20

# Mac/Linux Use nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 20
nvm use 20

# Windows Use nvm-windows,Download:https://github.com/coreybutler/nvm-windows
# Open after installation PowerShell:
nvm install 20
nvm use 20

# Verification
node --version  # v20.x.x
npm --version   # 10.x.x

▶ مثال: الخطوة 2 - تثبيت pnpm على مستوى النظام

npm install -g pnpm

# Verification
pnpm --version  # 9.x.x or higher

▶ مثال: الخطوة 3 - إنشاء مشروع Vue 3

# Navigate to the directory where you want to create the project.
cd ~/projects

# Create a Project(Interaction Mode)
pnpm create vue my-first-vue-app

# Follow the prompts:
# ✅ TypeScript? Yes
# ✅ JSX? No
# ✅ Vue Router? Yes
# ✅ Pinia? Yes
# ✅ Vitest? No
# ✅ E2E? No
# ✅ ESLint? Yes
# ✅ Prettier? Yes

▶ مثال: الخطوة 4 - البدء والتحقق

# Go to the project directory
cd my-first-vue-app

# Install Dependencies
pnpm install

# Start the development server
pnpm dev

# Terminal Output:
#   VITE v5.4.0  ready in 500 ms
#   ➜  Local:   http://localhost:5173/
#   ➜  press h + enter to show help

افتح متصفحك وانتقل إلى http://localhost:5173/. سترى صفحة الترحيب الافتراضية لـ Vue = تم إكمال العملية بنجاح في 5 دقائق ✅

▶ مثال: الخطوة 5 - تعديل السطر الأول من الكود

افتح ملف src/components/HelloWorld.vue، وابحث عن المتغير msg، وقم بتغييره إلى اسمك:

<script setup>
import { ref } from 'vue'

// Change it to your name
const msg = ref('Hello Alice! Welcome to Vue 3!')
</script>

بعد الحفظ، سيقوم المتصفح بالتحديث تلقائيًا، وسترى المحتوى الجديد. هذه الأسطر الخمسة من الكود تُكمل أول تعديل تقوم به في Vue.

▶ مثال: مخطط تدفق من 5 خطوات لعبارة «Hello World»

sequenceDiagram
    participant D as Developer
    participant N as Node.js
    participant C as create-vue
    participant V as Vite
    participant B as Browser
    
    D->>N: 1. Installation Node 20
    N-->>D: v20.x.x
    D->>C: 2. pnpm create vue my-app
    C-->>D: Generate a Project Skeleton
    D->>N: 3. pnpm install
    N-->>D: Install Dependencies(30s)
    D->>V: 4. pnpm dev
    V-->>B: 5. http://localhost:5173
    B-->>D: Vue Home Page
    D->>D: Change 1, Run the code
    D->>B: Automatically refresh after saving

sequenceDiagram
    participant D as Developer
    participant N as Node.js
    participant C as create-vue
    participant V as Vite
    participant B as Browser
    
    D->>N: 1. Installation Node 20
    N-->>D: v20.x.x
    D->>C: 2. pnpm create vue my-app
    C-->>D: Generate a Project Skeleton
    D->>N: 3. pnpm install
    N-->>D: Install Dependencies(30s)
    D->>V: 4. pnpm dev
    V-->>B: 5. http://localhost:5173
    B-->>D: Vue Home Page
    D->>D: Change 1, Run the code
    D->>B: Automatically refresh after saving

▶ مثال: قائمة بأوامر فحص البيئة

# Check if the development environment is ready with a single click
node --version      # The output should be v18+ or v20+
npm --version       # The output should be 9+ or 10+
pnpm --version      # The output should be 8+ or 9+ (If not installed: npm i -g pnpm)
git --version       # The output should be 2.30+
code --version      # The output should be 1.80+(If not installed:https://code.visualstudio.com)

# View Global Packages
npm list -g --depth=0

❓ أسئلة شائعة

📖 ملخص

• ستحتاج إلى أربع أدوات للتطوير باستخدام Vue 3: Node.js 20+، ومدير حزم (يُوصى باستخدام pnpm)، وأداة إنشاء الهيكل الأساسي create-vue، و VS Code + Volar
• يُعد Node.js 20.x LTS الخيار المفضل للمشاريع الجديدة في عام 2026
• يُعد pnpm أسرع بـ 2–3 مرات من npm، ويستهلك مساحة أقل على القرص بنسبة 50٪، وهو المعيار السائد لعام 2026
• create-vue هي أداة إنشاء الهياكل الأساسية الرسمية لـ Vue 3، وهي تحل محل أداة vue-cli القديمة
• Vite هي أداة بناء من الجيل التالي أطلقها فريق Vue؛ وهي تعمل بسرعة تفوق Webpack بـ 30 ضعفًا
• يُعد VS Code مع ملحق Volar الإعداد القياسي لتطوير Vue 3
• «Hello World» في 5 دقائق: تثبيت Node → تثبيت pnpm → create-vue → pnpm install → pnpm dev

📝 تمارين

1. أسئلة أساسية (مستوى الصعوبة: ⭐)

   اتبع الخطوات الواردة في هذا الدرس لإنشاء مشروع Vue 3 من البداية my-first-vue، وتشغيله بنجاح pnpm dev، وعرض صفحة الترحيب. التقط لقطة شاشة لمخرجات المحطة الطرفية (بما في ذلك إصدارات Node و pnpm و Vite).

2. مسائل متقدمة (مستوى الصعوبة: ⭐⭐)

   استخدم create-vue لإنشاء مشروع بالخيارات التالية my-fullstack-vue:

   • TypeScript: نعم
   • عرض جهاز التوجيه: نعم
   • بينيا: نعم
   • فيتست: نعم
   • ESLint: نعم
   • أجمل: نعم

   بمجرد تشغيل البرنامج بنجاح، قم بتغيير عنوان src/views/HomeView.vue إلى "Hello Alice!" ودوّن الأسطر التي تم تعديلها.

3. مسألة التحدي (مستوى الصعوبة: ⭐⭐⭐)

   مقارنة بين تجارب تطوير Vite و Webpack:

   1. قياس وقت بدء التشغيل البارد (Vite مقابل Webpack 5)
   2. قياس وقت إعادة التحميل الفوري (الوقت الذي يستغرقه المتصفح للتحديث بعد تعديل سطر واحد من التعليمات البرمجية)
   3. قم بإنشاء جدول مقارنة باستخدام برنامج Mermaid واكتب تقريرًا عن تجربتك يتألف من 500 حرف.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن