أفضل مكونات المحمول لتطبيقات الويب التقدمية في VueJs

تطبيقات الويب التقدمية (المصدر: https://developers.google.com/web/progressive-web-apps/images/pwa-fast.png)

في عام 2015 ، صاغ المصمم Frances Berriman ومهندس Google Chrome Alex Russell مصطلح "تطبيقات الويب التقدمية" لوصف التطبيقات التي تستفيد من الميزات الجديدة التي تدعمها المتصفحات الحديثة التي تتيح للمستخدمين ترقية تطبيقات الويب إلى تطبيقات الويب المتقدمة في نظام التشغيل الأصلي (OS) . إنها موثوقة وسريعة وجذابة. باختصار ، إنها محاولة لجلب الطاقة المحلية إلى الويب. في أيامنا هذه ، يزداد حجم PWA ، وإليك عرض موقع الويب الذي يستخدم PWA ، يمكنك التحقق هنا.

مؤخراً في Google IO 2017 ، تحدث Addy Osmani (مدير الهندسة في Google الذي يعمل على Chrome و Web Platform) عن pwa في العديد من أطر عمل javascript ، بما في ذلك vuejs.

قبل شهرين من Google IO ، أرسل Addy Osmani مشكلة إلى مستودع vuejs الرسمي لمقترح حول vue pwa القالب الرسمي لـ vue-cli ، ثم Evan You كمؤلف لـ vuejs متفق عليه مع Addy المقترح. لذلك ، بعد Google IO ، تمامًا في 1 يونيو 2017 ، أصدر Addy قالب pwa في vue-cli. الآن يمكنك إنشاء pwa project حسب النوع command في المحطة الطرفية الخاصة بك مثل هذا.

$ vue init pwa 

كان القالب قويًا جدًا ، حيث تم تضمينه في اختبار عامل الخدمة لأصول تطبيق قذيفة + الأصول الثابتة (prod) ، التحميل المسبق للبرنامج النصي (async chunk) التحميل المسبق باستخدام ، بيان تطبيق الويب + favicons ، meta-viewport الصديق للجوال ، ومنارة درجة 90 + / 100. ولكنه لا يأتي بمكونات مدمجة ، لذا في هذا المنشور ، أقترح بعض مكونات الأجهزة المحمولة لتسريع تطوير واجهة المستخدم الخاصة بك في تطبيقات الويب التقدمية في vuejs. فيما يلي قوائم مكون المحمول لإنشاء PWA في vuejs.

  1. Vuetify

Vuetify.js هو إطار مكون أساسي للدلالة على Vue.js 2. ويهدف إلى توفير مكونات نظيفة ودلالية وقابلة لإعادة الاستخدام تجعل بناء التطبيق الخاص بك نسيمًا. يستخدم Vuetify.js نمط تصميم المواد من Google ، حيث يأخذ الإشارات من الأُطُر الشائعة الأخرى مثل Materialize.css و Material Design Lite و Semantic UI و Bootstrap 4. يأتي Vuetify.js مع وثائق جيدة ومكون دعم كامل ، إنه سهل التعلم.

2. النعناع UI

استنادا إلى أسلوب دائرة الرقابة الداخلية ، نعناع واجهة المستخدم هو خفيف الوزن جدا. عندما يتم استيرادها بالكامل ، فإن الشفرة المضغوطة لا تستغرق سوى مساحة gzip ~ 30 كيلو بايت (JS + CSS). يأتي Mint UI بحجم صغير ومكون دعم كامل ، لكن يصعب فهم الوثائق ، لأنها بسيطة للغاية وقد تم قطع بعض المستندات. أخيرًا ، على الرغم من أن واجهة المستخدم الخاصة بالنعناع تحظى بدعم اللغة الإنجليزية في الوثائق ، ولكن في المثال المباشر لا يزال يستخدم اللغة الصينية ، سيء جدًا.

3. المواد فيو

Vue Material عبارة عن إطار خفيف الوزن مصمم تمامًا وفقًا لمواصفات Design Material. قم بإنشاء تطبيقات ويب قوية ومصممة جيدًا يمكن أن تناسب كل شاشة. تتشابه مواد Vue مع مكونات المواد الزاويّة ، إذا كنت تستخدم المواد الزاويّة فيمكنك التبديل بسهولة.

4. حريصة UI

تم تصميم Keen UI لتكون مكتبة Vue.js UI خفيفة الوزن مع واجهة برمجة تطبيقات بسيطة. Keen UI مستوحاة من تصميم المواد من Google ، ولكن Keen UI ليس إطار عمل CSS ، وبالتالي فلن تجد نظامًا أو شبكة شبكة للطباعة فيه. بدلاً من ذلك ، ينصب التركيز على إنشاء مكونات قابلة لإعادة الاستخدام لها تفاعل.

5. Vum

Vum عبارة عن بنية UI Framework مع Vue.js لتطبيق ويب للجوال. تحتوي Vum على ميزة وهيكل الصفحة بالكامل (الرأس والمحتوى وتذييل الصفحة) ومجموعة من المكونات القوية وسهلة الاستخدام والتوسع والرسوم المتحركة عالية الأداء CSS3. Vum هو تصميم قائم على نظام iOS مثل UT mint ، لكن vum يحتوي على مكونات أقل من UT.

الخلاصة ، Vuetify هي المكونات الأكثر اكتمالا وقوية لتطبيقات vuejs ، وتأتي مع وثائق جيدة ، والأخير لديها أيضا التكامل مع NUXT لبناء مشروع تقديم جانب الخادم. لذلك سوف أضع vuetify كأولوية أولى لي. ولكن ، إذا كنت تريد أن تختار البساطة ، فيجب أن تعتبر Mint UI أو Keen UI اختيارك. إذا كنت تفضل التصميم المستند إلى Android ، فيمكنك اختيار Vuetify ، وإذا كنت تفضل استخدام التصميم المستند إلى iOS ، فيجب عليك الانتقال إلى Mint UI.