تعزيز العمل الخاص بك Vue.js مع Vue CLI 3

() translation by (you can also view the original English article)

لا يمكننا أن نتخيل تطوير الويب الحديث دون مساعدة من أدوات واجهة سطر الأوامر (CLI).أنها تسهل بشكل كبير وتسريع سير العمل في مجال التنمية من خلال الحد من كمية المهام المتكررة والمملة. إعداد المشروع يدويًا ، مع كل ميزات الفحص ، البناء ، الاختبار ، المعالجة المسبقة ، التحسين ، والاعتمادية لا تبدو كمهمة مرحة ، أليس كذلك؟

وهذا هو السبب في أن جميع أطر التطوير الحديثة (مثل Angular ، React ، إلخ) تقدم نسختها الخاصة من أدوات CLI ، و Vue.js ليست استثناءً. ولكن مع أحدث نسخة ثالثة ، فإنVue CLI تتقدم خطوة بخطوة على الآخرين. إنه الآن ليس قويًا ومرنًا فحسب ، ولكنه يأتي أيضًا مع واجهة المستخدم الرسومية الكاملة. نعم ، سمعت صحيح تقدم Vue CLI 3 واجهة مستخدم رسومية كاملة خارج الصندوق.

أصبح الآن بدء مشاريع Vue.js الجديدة أكثر سهولة من أي وقت مضى مع Vue CLI الجديد وواجهة المستخدم الرسومية Vue UI. سيوضح لك هذا البرنامج التعليمي كيفية وضع Vue CLI في الاستخدام وكيف يمكن لـ Vue UI زيادة سرعة سير العمل لديك بشكل أكبر.هيا بنا نبدأ!

ما هو فيو CLI؟

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

CLI هي حزمة npm مثبتة عالميًا ، والتي توفر وظائف أساسية عبر الأمر vue .إنه يسمح لنا بسقوط مشروع جديد بسهولة ( إنشاء الفكرة ) ، أو بسرعة نموذج أولي للأفكار الأولية ( خدمة تخدم ). إذا كنا نريد المزيد من التحكم الملموس والمرئي في مشاريعنا ، فيمكننا فتح نسخة واجهة المستخدم الرسومية من CLI من خلال تشغيلأمر vue ui .
خدمة CLI هي تبعية تطويرية ( ملف ثنائي vue-cli-service ) ، مثبت محليًا في كل مشروع تم إنشاؤه باستخدام CLI. إنه يسمح لنا بتطوير مشروعنا ( خدمةvue-cli-service ) ، وحزمه للإنتاج (بناء vue-cli-service ) ، وأيضاً لفحص تكوين مشروع حزمة الويب الداخلية ( vue-cli-service inspect ).
CLI الإضافات هي حزم npm التي توفر ميزات إضافية لمشاريعنا. تبدأ أسمائهم إما بـ @ vue / cli-plugin- ( للمكونات المدمجة) أو vue-cli-plugin- (للمكونات المجتمعية). يمكننا إضافتها في أي وقت من عملية التطوير من خلال الأمر إضافة فيو .

في الأقسام التالية ، سنستكشف جميع الصواميل والمسامير من الأدوات والأدوات المذكورة أعلاه ، ولكن أولاً ، دعونا نرى الميزات الفعلية التي تجعل Vue CLI قوية ومرنة.

Vue CLI هو نظام كامل المزايا لتعزيز سير العمل في تطوير Vue.js

تقوم Vue CLI بتسريع وتيسير تطوير مشروع Vue.js بفضل مجموعتها الرائعة من الميزات. دعونا نرى ما هي هذه الميزات:

البناء القائم على البرنامج المساعد. بنيت تماما VU CLI حول الإضافات ، مما يجعلها مرنة جدا وقابلة للتوسعة. يمكننا اختيار أي من المكونات الإضافية المضمنة لإضافتها أثناء عملية إنشاء المشروع. ولكننا لا نقتصر فقط على هذه ، يمكننا إضافة أي عدد من المكونات الإضافية في أي وقت بعد إنشاء المشروع.
Vue CLI قابلة للتكوين بالكامل ، قابلة للتوسعة ، وقابلة للترقية .
مجموعة من الملحقات الرسمية المثبتة مسبقًا ، والتي تدمج أدوات من الطراز الأول من النظام البيئي الأمامي (Babel و ESLint و TypeScript و PWA و Jest و Mocha و Cypress و Nightwatch).
إعداد افتراضي افتراضي واحد ، يمكننا تعديله وفقًا لاحتياجاتنا أثناء إنشاء المشروع أو بعده.
لا حاجة للإخراج. على النقيض من أدوات React و Angular CLI ، يمكننا فحص وتغيير إعدادات webpack الخاصة بمشروعنا في أي وقت بعد الإنشاء دون الحاجة إلى إخراج التطبيق والتحول إلى التكوين اليدوي.
دعم متعدد الصفحات.
النماذج الأولية الفورية دون أي تكوين.
تسمح لنا أهداف الإنشاء المختلفة بإنتاج إصدارات مختلفة من مشروعنا - حيث يمكننا استخدام واحد ونفس قاعدة الكود وبناءه كتطبيق أو مكتبة أو مكونات ويب.
ميزة الوضع الحديث. سيؤدي ذلك إلى إنشاء تطبيقنا للمتصفحات الحديثة ، ولكن مع التراجع التلقائي عن المتصفحات القديمة. رائع. صحيح؟
واجهة المستخدم الرسومية الشاملة لإنشاء وتحديث وإدارة المشاريع المعقدة بكل سهولة.
واجهة برمجة التطبيقات لواجهة برمجة التطبيقات. يعرض Vue UI واجهة برمجة تطبيقات للمكون الإضافي يمكننا استخدامها لإضافة وظائف مخصصة إلى إصدار واجهة المستخدم الرسومية لـ CLI.
الكثير من الإضافات المفيدة من المجتمع.

الابتداء مع Vue CLI

بعد أن نتعلم عن سحر Vue CLI ، فقد حان الوقت لرؤيته عمليًا. أولاً ، نحتاج إلى تثبيت Vue CLI 3. وهو يتطلب Node.js 8.9 + (8.11.0+ موصى به) ، لذا نحتاج إلى التأكد من وجوده على أجهزتنا. ثم نفتح فقط مطرافنا أو موجه الأوامر لدينا ، ونقوم بما يلي:

1	npm install -g @vue/cli

بعد انتهاء التثبيت ، يمكننا البدء في استخدام الأمر vue . للتحقق مما إذا كان كل شيء يعمل بشكل صحيح ، فإننا نعرض vue - الإصدار . يجب أن يعرض هذا إصدار Vue CLI المثبت. الآن ، دعونا نستكشف ما يمكننا فعله فعلاً مع Vue CLI.

النماذج الفورية

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

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

من الآن فصاعدا ، يمكننا استخدام أمر خدمة فيو كلما أردنا. دعنا نحاول. نقوم بإنشاء ملفApp.vue بالمحتوى التالي:

1	<template>
2	<h1>Hello, Vue!</h1>
3	</template>

ثم ، في نفس الدليل ، نقوم بتشغيل:

vue serve

سيبدأ هذا خادم تطوير Vue CLI وسيقوم بتشغيل التطبيق على http: // localhost: 8080 / . عندما نفتح المتصفح على هذا العنوان ، يجب أن نرى ترحيبًا رائعًا! عنوان.

خلق مشروع جديد

كان القسم السابق فقط الاحماء. دعونا الآن نجعل شيء أكثر تعقيدًا.

يستخدم vue create command عملية تفاعلية لتحديد خيارات مشروع جديد. دعونا تشغيلها والذهاب من خلال خياراتها.

1	vue create vuecli-project

إنشاء مشروع جديد مع Vue CLI

Create a project with Vue CLI pick a preset

في النافذة الأولى ، نحن مدعوون لاختيار إعداد مسبق. يوجد إعداد مسبق واحد فقط متاح من خارج العلبة ، يسمى افتراضيًا . سنختار الخيار الثاني ، وهو تحديد الميزات التي نحتاجها للمشروع يدويًا ، ثم الضغط على Enter للمتابعة.

Create a project with Vue CLI Manually select features

في النافذة التالية ، نستخدم مفاتيح الأسهم للتنقل لأعلى ولأسفل قائمة الميزات والمسافة لتحديد ما نريد. هنا، جنبا إلى جنب مع محددة مسبقا بابل و اللنت / المنسق، راجعت أيضا جهاز التوجيه و Vuex .بمجرد تحديد الميزات المطلوبة ، اضغط على Enter للانتقال.

Create a project with Vue CLI Use history mode

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

Create a project with Vue CLI Pick a linter

في النافذة التالية ، نحتاج إلى اختيار الطريقة التي نريد بها تهيئة Linter . أنا اخترتESLint + Prettier .

Create a project with Vue CLI Additional lint features

في النافذة التالية ، نختار وقت استخدام Linter لفحص المشروع. اخترت Lint عند الحفظ ،والذي ينطبق في كل مرة يتم فيها حفظ الملف.

Create a project with Vue CLI Dedicated config file or config in packagejson

في النافذة التالية ، نحتاج أن نقرر كيف نريد تكوين مشروعنا. اختر ما إذا كنت تريد استخدام ملفات تكوين منفصلة لكل من الميزات ، أو لتضمين جميع إعدادات التكوين في ملف package.json . أنا أفضل ملفًا واحدًا ، واخترتالخيار In package.json .

Create a project with Vue CLI Save these settings as a preset

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

عندما نكمل عملية الإنشاء ، سيتم إنشاء المشروع وتهيئته ، وسيتم تنزيل الحزم المطلوبة وتثبيتها.

Create a project with Vue CLI Generating project files

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

في هذا القسم ، سنستكشف ما أنشأه Vue CLI لنا.

Create a project with Vue CLI The project structure

في مجلد المشروع المعروض أعلاه ، لدينا الملفات والمجلدات التالية:

و node_modules يحتوي المجلد الحزم التي تتطلب أدوات التطبيق والتنمية.
في العام يحتوي المجلد موجودات المشروع الثابتة، التي لن يتم تضمينها في عملية تجميع.
و SRC يحتوي المجلد تطبيق Vue.js مع جميع الموارد.
.gitignore يحتوي على قائمة من الملفات والمجلدات التي يتم استبعادها من عنصر التحكم الإصدار Git.
babel.config.js يحتوي على إعدادات التكوين لمجمع بابل.
package.json يحتوي على قائمة الحزم المطلوبة لتطوير Vue.js وكذلك الأوامر المستخدمة لأدوات التطوير.
package-lock.json يحتوي على قائمة كاملة من الحزم ، المطلوبة من قبل المشروع ، والاعتمادية الخاصة بهم.
يحتوي README.md على معلومات عامة حول المشروع.

انشاء مجلد src الجديد

دعنا الآن نلقي نظرة فاحصة على المجلد src :

Create a project with Vue CLI the src folder

في المجلد src الموضح أعلاه ، لدينا الملفات والمجلدات التالية:

يستخدم مجلد الأصول للموارد الثابتة التي يتطلبها التطبيق والتي سيتم تضمينها في عملية التجميع.
و مكونات تستخدم مجلد للمكونات التطبيق.
في وجهات النظر يستخدم مجلد للمكونات التي سيتم عرضها باستخدام ميزة URL التوجيه.
App.vue هو المكون الأساسي.
main.js هو ملف JavaScript الذي يقوم بإنشاء كائن مثيل Vue.
يتم استخدام router.js لتكوين جهاز التوجيه Vue.
يتم استخدام store.js لتكوين مخزن البيانات الذي تم إنشاؤه باستخدام Vuex.

تغيير تكوين المشروع

يحتوي تكوين المشروع الافتراضي على إعدادات معقولة ، ولكن إذا احتجنا ، يمكننا تغييرها عن طريق إضافة ملف vue.config.js في مجلد المشروع ، أو عن طريق إضافة قسمvue إلى ملف package.json . دعونا نجرب أولًا: نقوم بإنشاء ملفvue.config.js ونضع الخيار التالي فيه:

1	module.exports = {
2	runtimeCompiler: true
3	}

سيسمح هذا للمكونات بتعريف قوالبها كسلسل ، بدلاً من استخدام عناصر القالب . لاستكشاف مجموعة كاملة من خيارات التكوين ، يمكنك استخدام صفحة تكوين Vue CLI .

تطوير المشروع

كما رأينا أعلاه ، تأتي خدمة Vue CLI بثلاثة نصوص افتراضية: الخدمة ، البناء ،والتفتيش . أول واحد يستخدم لعملية التنمية. نحن ندير مشروعنا بأمر npm run serve :

عندما نفتح تطبيقنا في المتصفح ، يجب أن نرى الصفحة التالية:

هذه هي الصفحة Home.vue ، التي تستخدم مكون HelloWorld.vue .

و تخدم يبدأ قيادة الخادم التنمية، استنادا -webpack DEV-الخادم ، مع استبدال وحدة الساخن (HMR) ميزة العمل. وهذا يعني أنه عندما نجري تغييرات في مكوناتنا ونحفظها ، فسوف تنعكس على الفور وسيتم تحديث الصفحة في المتصفح.

إضافة وظيفة جديدة إلى المشروع باستخدام Vue CLI Plugins

في مرحلة معينة من تطوير التطبيق لدينا ، قد نحتاج إلى إضافة بعض الوظائف الإضافية إلى المشروع ، وسنحتاج إلى تثبيت إضافات Vue CLI. يمكن أن يقوم ملحق Vue CLI بتعديل تكوين حزمة الويب ويضيف أوامر جديدة إلى خدمة vue-cli . لتثبيت ملحق ، نستخدم الأمر vue add .

لنفترض أننا نريد استخدام مكونات Bootstrap لمشروعنا. لحسن الحظ ، هناك ملحقbootstrap-vue ، الذي يمكن أن يوفرها لنا. لتثبيته ، قمنا بتشغيل:

1	vue add bootstrap-vue

بعد تثبيت plugin ، في المجلد src ، سنجد مجلد ملحقات جديدة حيث يتم وضع المكون الإضافي الجديد.

الآن ، لاختبار وظيفة المكوّن الإضافي ، لنقم بتعديل الملف About.vue :

<template>
  <div class="about">
    <b-jumbotron text-variant="success" header="Vue CLI 3" lead="Standard Tooling for Vue.js Development">
        <p>For more information visit website</p>
      <b-btn variant="primary" href="https://cli.vuejs.org/">More Info</b-btn>
    </b-jumbotron>
  </div>
</template>

وعندما نشير إلى صفحة " حول" في المتصفح ، من المفترض أن نرى الصفحة محدّثة ومصممة باستخدام Bootstrap:

بناء مشروع للإنتاج

عندما يكون التطبيق جاهزًا للنشر ، يلزمك إنشاء مجموعة من الحزم التي تحتوي على رمز التطبيق والمحتوى فقط ، بالإضافة إلى الوحدات التي يعتمد عليها ، بحيث يمكن نشر هذه الملفات إلى خادم إنتاج HTTP.

بناء التطبيق

لإنشاء تطبيقنا ، يتم تشغيل:

1	npm run build --modern

تقوم الوسيطة -modern بإنشاء نسختين من التطبيق. يتم استهداف أحدهم للمتصفحات الحديثة التي تدعم أحدث ميزات جافا سكريبت ، والآخر هو احتياطي للمتصفحات القديمة التي تحتاج إلى مكتبات إضافية للتعامل مع هذه الميزات. الشيء الرائع هو أنه بعد نشر التطبيق ، فإن اختيار أي إصدار واحد يتم استخدامه هو آلي بالكامل!

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

استكشاف مجلد التوزيع

عند اكتمال عملية الإنشاء ، يتم إنشاء مجلد dist في جذر المشروع. دعونا نستكشف محتوياته:

و index.html و سوف يكون الملف نقطة الدخول للتطبيق. أنه يحتوي على رابط والنصي العناصر التي سيتم تحميل كل CSS اللازمة وملفات جافا سكريبت من المغلق وشبيبة المجلدات.

حتى الآن ، نحن على استعداد لنشر تطبيقنا على خادم الإنتاج. هناك الكثير من الخيارات للاختيار من بينها. يمكنك معرفة الكثير منها عن طريق زيارة صفحة النشر .

دعونا GUI-FY مشروعنا مع واجهة المستخدم فيو

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

إعادة تصميم مشروعنا مع واجهة المستخدم Vue

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

يرصد Vue واجهة المستخدم مع إطار UI الخاص بها وليس هناك حاجة الكترون لتشغيله في المتصفح. فقط قم بتشغيل الأمر vue ui ، بغض النظر عن أي دليل:

vue ui

تم إطلاق Vue Project Manager مع علامة التبويب " المشاريع" المحددة. لا توجد مشاريع حالية حتى الآن. لإدراج بعض المشاريع هنا ، نحتاج إما إلى إنشائها عبر واجهة المستخدم ، أو لاستيراد المشاريع التي تم إنشاؤها باستخدام واجهة سطر الأوامر (CLI).دعونا نرى كيف يمكننا إنشاء مشروع جديد.

ننتقل إلى علامة التبويب " إنشاء" ، وانتقل إلى الدليل المطلوب لتطبيقنا ، وانقر على زرإنشاء مشروع جديد هنا .

Create a new project with Vue UI pick a folder

في الشاشة التالية ، نقدم اسمًا إلى مجلد المشروع واختر مدير الحزمة الذي نفضله.

Create a new project with Vue UI Select a preset

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

Create a new project with Vue UI Select project features

في الشاشة التالية ، نختار المكونات الإضافية التي نريد تثبيتها.

Create a new project with Vue UI Select plugins

أخيرًا ، قمنا بتعيين إعدادات التكوين للمكونات الإضافية التي اخترنا تثبيتها. عندما نكون جاهزين ، نضغط على الزر Create Project .

Create a new project with Vue UI Welcome to your new project

سيتم إنشاء المشروع الآن وسنتم إعادة توجيهنا إلى لوحة تحكم المشروع.

استخدام لوحة تحكم Vue UI Project

في الإضافات القسم يتم سرد كافة الإضافات المثبتة. لتثبيت مكون إضافي جديد ، نضغط على الزر إضافة مكون إضافي .

هنا ، يمكننا البحث عن المكوّن الإضافي الذي نحتاجه وعندما نجده ، نضغط على زر التثبيت. في حالتنا ، نقوم بالبحث وتثبيت البرنامج المساعد bootstrap- vue .

عند تثبيت المكون الإضافي ، في علامة التبويب " التهيئة" ، يمكننا تعيين الخيارات المتوفرة.

في علامة التبويب " تغيير الملفات" ، يمكننا فحص الملفات المتأثرة وكيفية ذلك. هنا ، لا أرغب في إجراء أي تغييرات ، لذلك قمت بالضغط على الزر تخطي .

في قسم التبعيات ، أدرجنا جميع الاعتمادات الأساسية والتنموية. لإضافة تبعية ، ننقر علىزر تثبيت التبعية .

Project Dashboard Install new dependency

في النافذة المشروطة ، يمكننا البحث عن التبعيات الرئيسية أو التطويرية وتثبيتها.

في قسم التهيئة ، يمكننا تخصيص الإعدادات المقدمة للمكونات الإضافية التي أضفناها. هنا ، لدينا إعدادات لـ Vue CLI نفسها وللمكوِّن الإضافي ESLint.

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

Project Dashboard serve tasks parameters

في النافذة المشروطة ، نختار المعلمات التي نريد تشغيل المهمة بها.

Project Dashboard Running the serve task

عندما كنا تشغيل خدمة مهمة، فإن لوحة أجهزة القياس بتحديث مع بعض المعلومات المفيدة.

عندما نتحول إلى علامة التبويب " إخراج" ، نحصل على سجلات لعملية المهمة.

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

و بناء مهمة مشابهة تقريبا ل خدمة مهمة باستثناء التي تنتج في السابق لإنتاج حزمة التي يمكن استخدامها لنشر التطبيق.

يمكننا وضع معايير ل بناء مهمة بنفس الطريقة كما هو الحال مع خدمة مهمة.

يوفر لنا حقل المخرجات لمهمة الفحص لنا معلومات حول تهيئة webpack التي تم حلها.

وهذا كل شيء. نجحنا في إعادة إنشاء مشروعنا باستخدام واجهة المستخدم Vue. ولكن كما رأينا عمليات الإنشاء والتكوين أسهل وأكثر إمتاعًا عندما نستخدم واجهة المستخدم الرسومية.

الاستنتاج

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