واجهة سطر الأوامر Vue.js: تعرف على كيفية استخدامها

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


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

واحد منهم هو Vue CLI.

CLI تعني واجهة سطر الأوامر.

ملاحظة: هناك إعادة صياغة ضخمة لـ CLI تجري الآن ، من الإصدار 2 إلى 3. بينما لم يكن مستقرًا بعد ، سأصف الإصدار 3 لأنه تحسن كبير مقارنة بالإصدار 2 ، ومختلف تمامًا.

تثبيت

Vue CLI هي أداة مساعدة لسطر الأوامر ، ويمكنك تثبيتها عالميًا باستخدام npm:

npm install -g @vue/cli

أو باستخدام الغزل:

yarn global add @vue/cli

بمجرد القيام بذلك ، يمكنك استدعاء ملفvueيأمر.

ماذا يقدم Vue CLI؟

CLI ضروري لتطوير Vue.js السريع.

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

يمكنه تنفيذ الإعداد الأولي للمشروع والسقالات.

إنها أداة مرنة: بمجرد إنشاء مشروع باستخدام CLI ، يمكنك الانتقال وتعديل التكوين دون الحاجة إلى ذلكإخراجتطبيقك (مثلما تفعل معcreate-react-app).

عندما تخرج من تطبيق create-react-app ، يمكنك تحديث وتعديل ما تريد ، ولكن لا يمكنك الاعتماد على الميزات الرائعة التي يوفرها تطبيق create-response-app

يمكنك تكوين أي شيء وستظل قادرًا على الترقية بسهولة.

بعد إنشاء التطبيق وتكوينه ، فإنه يعمل كأداة تبعية لوقت التشغيل ، مبنية على حزمة الويب.

أول لقاء مع CLI هو عند إنشاء مشروع Vue جديد.

كيفية استخدام CLI لإنشاء مشروع Vue جديد

أول شيء ستفعله باستخدام CLI هو إنشاء تطبيق Vue:

vue create example

الشيء الرائع هو أنها عملية تفاعلية. تحتاج إلى اختيار إعداد مسبق. بشكل افتراضي ، هناك إعداد مسبق واحد يوفر تكامل Babel و ESLint:

سأضغط على السهم لأسفل ⬇️ واختر الميزات التي أريدها يدويًا:

يضعطspaceلتمكين أحد الأشياء التي تحتاجها ، ثم اضغط علىenterللمضي قدما. منذ أن اخترت linter / منسق ، يطالبني Vue CLI بالتكوين. اخترت ESLint + Prettier لأن هذا هو الإعداد المفضل لدي:

الشيء التالي هو اختيار كيفية تطبيق الفحص. انا اخترتلينت على الحفظ.

التالي: الاختبار. لقد اخترت الاختبار ، ويقدم لي Vue CLI الاختيار بين أكثر الحلول شيوعًا: Mocha + Chai مقابل Jest.

يسألني Vue CLI عن مكان وضع كل التكوين: إذا كان في ملفpackage.jsonملف ، أو في ملفات تكوين مخصصة ، واحد لكل أداة. اخترت هذا الأخير.

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

يسألني Vue CLI بعد ذلك عما إذا كنت أفضل استخدام الغزل أو npm:

وهو آخر شيء يطلبه مني ، ثم يستمر في تنزيل التبعيات وإنشاء تطبيق Vue:

كيفية بدء تطبيق Vue CLI الذي تم إنشاؤه حديثًا

لقد أنشأ Vue CLI التطبيق لنا ، ويمكننا الانتقال إلى ملفexampleمجلد وتشغيلyarn serveلبدء تشغيل تطبيقنا الأول في وضع التطوير:

يحتوي مصدر تطبيق المثال المبدئي على بعض الملفات ، بما في ذلكpackage.json:

هذا هو المكان الذي يتم فيه تحديد جميع أوامر CLI ، بما في ذلكyarn serveالذي استخدمناه قبل دقيقة. الأوامر الأخرى

  • yarn build، لبدء إنشاء إنتاج
  • yarn lint، لتشغيل لينتر
  • yarn test:unit، لإجراء اختبارات الوحدة

سأصف نموذج التطبيق الذي تم إنشاؤه بواسطة Vue CLI في برنامج تعليمي منفصل.

مستودع Git

لاحظ الmasterكلمة في الزاوية اليسرى السفلى من VS Code؟ هذا لأن Vue CLI ينشئ تلقائيًا مستودعًا ، ويقوم بالالتزام الأول ، حتى نتمكن من الدخول مباشرة ، وتغيير الأشياء ، ونعرف ما الذي قمنا بتغييره:

هذا رائع جدا. كم مرة تغوص في الأشياء وتغيرها ، فقط لتدرك عندما تريد الالتزام بالنتيجة ، أنك لم تلتزم بالحالة الأولية؟

استخدم إعدادًا مسبقًا من سطر الأوامر

يمكنك تخطي اللوحة التفاعلية وإرشاد Vue CLI لاستخدام إعداد مسبق معين:

vue create -p favourite example-2

حيث يتم تخزين الإعدادات المسبقة

يتم تخزين الإعدادات المسبقة في ملف.vuejsملف في الدليل الرئيسي الخاص بك. ها هي لي بعد إنشاء أول إعداد مسبق "مفضل"

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "presets": {
    "favourite": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {}
      },
      "router": true,
      "vuex": true
    }
  }
}

الإضافات

كما ترى من قراءة التكوين ، فإن الإعداد المسبق هو في الأساس مجموعة من المكونات الإضافية ، مع بعض التكوين الاختياري.

بمجرد إنشاء المشروع ، يمكنك إضافة المزيد من المكونات الإضافية باستخدامvue add:

vue add @vue/cli-plugin-babel

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

"@vue/cli-plugin-eslint": {
  "version": "^3.0.0"
}

هذا مفيد إذا كان الإصدار الجديد به تغيير أو خطأ ، وتحتاج إلى الانتظار قليلاً قبل استخدامه.

تخزين الإعدادات المسبقة عن بعد

يمكن تخزين الإعداد المسبق في GitHub (أو على خدمات أخرى) عن طريق إنشاء مستودع يحتوي على ملفpreset.jsonالملف ، الذي يحتوي على تكوين واحد محدد مسبقًا. مستخلصًا مما سبق ، قمت بعمل إعداد مسبق للعينة بتنسيقhttps://github.com/flaviocopes/vue-cli-preset/blob/master/preset.jsonالذي يحتوي على هذا التكوين:

{
  "useConfigFiles": true,
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "prettier",
      "lintOn": [
        "save"
      ]
    },
    "@vue/cli-plugin-unit-jest": {}
  },
  "router": true,
  "vuex": true
}

يمكن استخدامه لتشغيل تطبيق جديد باستخدام:

vue create --preset flaviocopes/vue-cli-preset example3

استخدام آخر لـ Vue CLI: النماذج الأولية السريعة

لقد شرحت حتى الآن كيفية استخدام Vue CLI لإنشاء مشروع جديد من البداية ، بكل الأجراس والصفارات. ولكن للنماذج الأولية السريعة حقًا ، يمكنك إنشاء تطبيق Vue بسيط حقًا ، حتى إذا كان تطبيقًا قائمًا بذاته في ملف .vue واحد ، وتقديم ذلك ، دون الحاجة إلى تنزيل جميع التبعيات فيnode_modulesمجلد.

كيف؟ قم أولاً بتثبيت ملفcli-service-globalالحزمة العالمية:

npm install -g @vue/cli-service-global

//or

yarn global add @vue/cli-service-global

قم بإنشاء ملف app.vue:

<template>
    <div>
        <h2>Hello world!</h2>
        <marquee>Heyyy</marquee>
    </div>
</template>

ثم ركض

vue serve app.vue

The standalone app

You can serve more organized projects, composed by JavaScript and HTML files as well. Vue CLI by default uses main.js / index.js as its entry point, and you can have a package.json and any tool configuration set up. vue serve will pick it up.

Since this uses global dependencies, it’s not an optimal approach for anything more than demonstration or quick testing.

Running vue build will prepare the project for deployment in dist/, and generate all the corresponding code, also for vendor dependencies.

Webpack

Internally, Vue CLI uses webpack, but the configuration is abstracted and we don’t even see the config file in our folder. You can still have access to it by calling vue inspect:

Download my free Vue Handbook


More vue tutorials: