Vue Academy · درس

إعداد CLI والإضافات

اضبط CLI وأضف إضافات لتوسيع مشروعك

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

تهيئة عملية البناء

تتيح لك كل من Vue CLI وVite تخصيص عملية البناء من خلال ملف تهيئة.

تستخدم Vue CLI الملف vue.config.js
تستخدم Vite الملف vite.config.js

يمكنك هنا إضافة الإضافات، وتعيين الأسماء المستعارة، وتهيئة خادم التطوير، وغير ذلك.

أساسيات vite.config.js

يستورد ملف vite.config.js النموذجي إضافة Vue ويصدّر كائن تهيئة.

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

أساسيات vue.config.js

في مشاريع Vue CLI، يصدّر vue.config.js التهيئة بالطريقة نفسها.

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

إضافة الإضافات

توسّع الإضافات عملية البناء بقدرات جديدة.

ثبّتها باستخدام npm
استوردها في ملف التهيئة
أضفها إلى مصفوفة plugins

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

متغيرات البيئة

خزّن إعدادات التهيئة التي تتغير بين البيئات في ملفات .env.

يُحمّل .env في جميع البيئات
يُستخدم .env.development لبيئة التطوير فقط
يُستخدم .env.production لعمليات بناء الإنتاج

تعريف متغيرات البيئة

في Vite، يجب أن تبدأ أسماء المتغيرات بالبادئة VITE_ حتى تصبح متاحة لشيفرة العميل.

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

قراءة متغيرات البيئة

يمكنك الوصول إلى المتغيرات المكشوفة من خلال import.meta.env في Vite.

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

ملاحظة أمنية حول متغيرات البيئة

كل ما تكشفه لشيفرة العميل يكون مرئيًا في المتصفح.

لا تضع أسرارًا مثل مفاتيح API الخاصة في متغيرات VITE_ أبدًا
يجب أن تقتصر هذه المتغيرات على إعدادات عامة غير حساسة
احتفظ بالأسرار الحقيقية على الخادم

الأسماء المستعارة للمسارات

يختصر الاسم المستعار مسارات الاستيراد. والاسم الشائع يربط الرمز @ بمجلد src.

يمنع ذلك استخدام مسارات نسبية هشة مثل ../../components.

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

استخدام الاسم المستعار

بعد تهيئته، استورد من @/ بدلًا من استخدام المسارات النسبية.

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

خيارات خادم التطوير

يتيح لك ملف التهيئة أيضًا ضبط خادم التطوير:

port المنفذ الذي يستمع إليه الخادم
open فتح المتصفح تلقائيًا
proxy إعادة توجيه طلبات API لتجنب CORS

export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

تحقق سريع

اختبر مدى فهمك لتهيئة Vite.

مراجعة: التهيئة والإضافات

تعلّمت كيفية تهيئة مشروع Vue:

يحتوي vite.config.js أو vue.config.js على الإعدادات
أضف الإضافات إلى مصفوفة plugins
استخدم ملفات .env مع البادئة VITE_
اقرأها من خلال import.meta.env
عيّن الاسم المستعار @ لتبسيط عمليات الاستيراد

التالي: صياغة القوالب وربط البيانات.

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

هل درس «إعداد CLI والإضافات» مجاني؟

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

ماذا ستتعلم في «إعداد CLI والإضافات»؟

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

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

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

كم من الوقت يستغرق درس «إعداد CLI والإضافات»؟

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

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

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

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

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