انطلاقة سريعة ​

تجربة Vue على الانترنت ​

• من أجل الحصول على نظرة عامة عن Vue، يمكنك تجربته مباشرة في حقل التجارب.

• إذا كنت تفضل إعداد HTML بسيط دون أي خطوات بناء، يمكنك استخدام JSFiddle كنقطة البداية.

• إذا كنت معتادًا على Node.js ومفهوم أدوات البناء، يمكنك أيضًا تجربة إعداد بنية كاملة داخل متصفحك على منصة StackBlitz.

إنشاء تطبيق Vue ​

في هذا القسم سنقدم كيفية إنشاء تطبيق أحادي الصفحة باستعمال Vue على جهازك. سيكون المشروع الذي سيبنى يستخدم إعداد بنية مرتكزة على Vite والتي تسمح لنا باستخدام المكونات أحادية الملف (SFCs).

تأكد من أن لديك إصدارًا محدثًا من Node.js مثبتًا ، وأن المجلد الحالي هو المجلد الذي تنوي فيه إنشاء المشروع، ثم قم بتشغيل الأمر التالي في سطر الأوامر (بدون علامة >😃

> npm create vue@latest

هذا الأمر سيقوم بتثبيت وتنفيذ create-vue، و التي تعتبر الأداة الرسمية لإنشاء مشاريع Vue. ستتلقى الأسئلة الإختيارية لعدة ميزات مثل TypeScript ودعم الاختبارات:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

إذا كنت غير متأكد من خيار ، فاختر No بالضغط على مفتاح Enter. بمجرد إنشاء المشروع ، اتبع التعليمات لتثبيت الاعتماديات وبدء خادم التطوير:

> cd <اسم-مشروعك>
> npm install
> npm run dev

بعد تنفيذ هاته الأوامر ستحصل على مشروعك الأول في Vue، ما ستلاحظه هو أن المكونات المولدة مكتوبة باستخدام الواجهة التركيبية و <script setup>، بدلاً من واجهة الخيارات. إليك بعض الإرشادات الإضافية :

• محرر النصوص الموصى به هو Visual Studio Code + إضافة Volar . أما إذا كنت تستخدم محررات أخرى، فاطلع على قسم دعم المحررات.
• نناقش المزيد من التفاصيل حول الأدوات، بما في ذلك الدمج مع إطارات الواجهة الخلفية في دليل الأدوات.
• لكي تتعلم المزيد حول أداة البناء الأساسية Vite ، اطلع على توثيق Vite.
• إذا اخترت استخدام TypeScript ، فاطلع دليل استخدام TypeScript.

لما تنهي تطوير تطبيقك و تريد ادخاله لمرحلة الإنتاج، قم بتشغيل الأمر التالي:

> npm run build

هذا الأمر سينشئ إصداراً جاهزاً للإنتاج من تطبيقك في مجلد ./dist على مستوى مجلد المشروع.اطلع على دليل نشر الانتاج لمعرفة المزيد حول توصيل تطبيقك إلى مرحلة الانتاج.

الخطوات الموالية >

استخدام Vue من شبكات تسليم المحتوى (CDN) ​

تستطيع استخدام Vue مباشرةً من شبكات تسليم المحتوى (CDN) عبر وسم الـ</script>:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

هنا استخدمنا unpkg، لكن يمكنك أيضاً استخدام أي شبكة تسليم المحتوى (CDN) تقدم حزم npm، مثل jsdelivr أو cdnjs. بالطبع، يمكنك أيضاً تنزيل هذا الملف في جهازك واعداده بنفسك داخل مشروعك.

لما تستخدم Vue من شبكة تسليم المحتوى (CDN)، لا يوجد "خطوة بناء" متضمنة. هذا يجعل الإعداد أكثر بساطة، ومناسب لتعزيز HTML ثابت أو دمجه مع إطار الواجهة الخلفية. لكن لن تتمكن من استخدام صيغة المكونات أحادية الملف (SFC).

استخدام عملية بناء عامة ​

الرابط اعلاه يحمل عملية البناء العامة لـ Vue، حيث يتم تعريض جميع واجهات برمجة التطبيقات (API) على المستوى الأعلى كخاصيات على الكائن العام Vue. هنا مثال كامل لاستخدام عملية البناء العامة:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'السلام عليكم!'
      }
    }
  }).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

استخدام عملية البناء بوحدات الـES ​

فيما تبقى من التوثيق، سنستخدم بشكل أساسي صيغة وحدات ES. معظم المتصفحات الحديثة تدعم وحدات الـES بشكل أصلي، لذا يمكننا استخدام Vue من شبكة تسليم المحتوى (CDN) عبر وحدات ES الأصلية مثل هذا المثال:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'السلام عليكم'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

كما تلاحظ أننا نستخدم وسم <script type="module">, والرابط المستورد من شبكة تسليم المحتوى (CDN) يشير إلى النسخة المبنية بـوحدات الـES بدلا من كائن Vue.

تمكين خرائط الاستيراد ​

في المثال أعلاه، استوردنا الواجهات من الرابط الكامل لشبكة تسليم المحتوى (CDN)، لكن في باقي التوثيق سترى شيفرات شبيهة بالمثال الموالي:

import { createApp } from 'vue'

نستطيع اعلام المتصفح على مكان استيراد وحدة vue عبر استخدام خرائط الاستيراد :

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'السلام عليكم'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

تستطيع أيضاً إضافة مدخلات للاعتماديات الأخرى إلى خريطة الاستيراد - لكن تأكد من أنها تشير إلى الإصدار الأصلي لوحدات الـES للمكتبة التي تنوي استخدامها.

تقسيم وحدات الـES ​

بينما نتعمق في الدليل، قد نحتاج إلى تقسيم الشفرة إلى ملفات JavaScript منفصلة لتسهيل إدارتها. على سبيل المثال:

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>العداد {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>count is {{ count }}</div>`
}

إذا فتحت ملف index.html أعلاه مباشرةً في متصفحك، ستجد أنه يرمي بخطأ لأن وحدات الـES لا يمكن أن تعمل عبر البروتوكول //:file، وهو البروتوكول الذي يستخدمه المتصفح عند فتح ملف محلي.

لأسباب أمنية، فإن وحدات الـES يمكن أن تعمل فقط عبر البروتوكول //:http، وهو البروتوكول الذي يستخدمه المتصفح عند فتح صفحات على الويب. من أجل أن تعمل وحدات الـES على جهازنا المحلي، نحتاج إلى تقديم ملف index.html عبر البروتوكول //:http،، مع خادم HTTP محلي.

لبدء خادم HTTP محلي، تأكد أولاً من تثبيت Node.js، ثم قم بتشغيل npx serve من سطر الأوامر في نفس المجلد الذي يوجد به ملف HTML الخاص بك. يمكنك أيضًا استخدام أي خادم HTTP آخر يمكنه تقديم الملفات الثابتة مع أنواع MIME الصحيحة.

ربما لاحظت أن قالب المكون المستورد مضمن كسلسلة JavaScript. إذا كنت تستخدم VSCode، يمكنك تثبيت إضافة es6-string-html وإضافة تعليق /*html*/ للسلاسل النصية للحصول على تمييز الصيغة لها.

الخطوات الموالية ​

إذا تخطيت المقدمة، ننصحك بشدة بقراءتها قبل الانتقال إلى باقي التوثيق.