كيفية إعداد تطبيق Cordova باستخدام Vue.js

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

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

قبل البدء ، يجب أن تعرف أنك بحاجة إلى مثبت npm (مدير حزمة العقدة) و Webpack للمتابعة. إذا كنت لا تعرف أي شيء حول هذا الموضوع ، فراجع المستندات.

هل أنت جاهز؟ لنذهب!

لذا ، أولاً ، افتح "المحطة الطرفية" وقم بتثبيت واجهة سطر الأوامر vue و cordova على الصعيد العالمي باستخدام npm.

npm تثبيت -g cordova
npm install -g vue-cli

قراءة سهلة؟ يجب عليك الآن إنشاء تطبيق Cordova ومشروع Vue.js استنادًا إلى قالب Webpack ، لذلك قم فقط بتشغيل الأوامر التالية:

cordova إنشاء اسم المشروع
vue init webpack اسم المشروع

سوف يطلب منك الجهاز "الدليل الهدف موجود. هل تريد المتابعة؟ "لأن دليل المشروع موجود بالفعل لأنه تم إنشاؤه في خطوة Cordova السابقة. "نعم" سيكون الجواب الصحيح. بعد إجراء التهيئة ، يجب عليك حذف جميع الملفات في مجلد www قبل المتابعة.

حسن! قمت بتثبيت كل ما تحتاجه. التصفيق بالنسبة لك.

الآن يتعين علينا القيام ببعض التغييرات في أماكن مختلفة من مشروعنا قبل إنشاء التطبيق.

لذلك ، ابدأ من الجذر. افتح ملف index.html وقم بإجراء التغيير التالي:


  <رئيس>
    
    
    
    
    
    <عنوان> اسم المشروع 
    
  
  
    
    ...

أنت الآن بحاجة إلى تغيير مسار الوجهة لنقل مشروعك الذي تم إنشاؤه إلى مجلد www cordova. لذا افتح ملف config / index.js وقم بتغييره بهذه الطريقة:

بناء: {
  الفهرس: path.resolve (__ dirname ، ‘../www/index.html’) ،
  stocksRoot: path.resolve (__ dirname، ‘../www’)،
  الأصولدليل: 'ثابت' ،
  الأصولPublicPath: ‘'
}

أخيرًا وليس آخرًا ، قم بتغيير قيم الاسم والمؤلف والوصف في config.xml

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

الأشياء النضال هي "الخطوط مخصص" و js مشكلة التصغير.

إذا كنت تريد استخدام خط مخصص في تطبيقك ، فأنت بحاجة إلى تغيير خيار في ملف build / webpack.base.conf.js. إذا كانت هذه هي حالتك ، فما عليك سوى فتح الملف ، والعثور على اختبار وحدة حزمة الويب حول الخطوط وإضافة خيار publicPath:

publicPath: process.env.NODE_ENV === ‘production '؟ ‘../../ ':‘ /'

ستكون النتيجة النهائية لحل مشكلة تحميل الخط هي:

test: /\.(woff2؟|eot|ttf|otf)(\؟.*)؟$/،
اللودر: l url-loader '،
خيارات: {
  الحد: 10000 ،
  name: utils.assetsPath (‘fonts / [name]. [hash: 7]. [ext] ') ،
  publicPath: process.env.NODE_ENV === ‘production '؟ ‘../../ ':‘ /'
}

الشيء النضال الثاني هو قضية تصغير شبيبة. هذا هو الخطأ في وضع الإنتاج:

SyntaxError: لا يمكن التصريح عن متغير السماح مرتين: ‘e '

يستخدم Webpack المكون الإضافي UglifyJs لتقليل كود js ولكن هناك مشكلة صغيرة ... SAFARI v10! لفهم أفضل قراءة هذه المسألة جيثب.

تحتاج إلى تغيير خيارات UglifyJsPlugin بهذه الطريقة لحل هذه المشكلة:

جديد UglifyJsPlugin ({
 uglifyOptions: {
  safari10: صحيح ،
  ضغط: {
   تحذيرات: خطأ
  }
 }،
 ...
})

أضف المنصات التي تحتاجها

بعد هذه الإصلاحات ، تحتاج إلى إضافة الأنظمة الأساسية الهدف باستخدام واجهة سطر أوامر cordova.

إضافة منصة cordova android@6.x.x - حفظ
منصة كوردوفا إضافة دائرة الرقابة الداخلية - حفظ
ملاحظة لنظام Android: أقترح استخدام الإصدار 6.x.x لزيادة توافق مكونات cordova.

إذا كنت تستخدم إصدار Git ، أقترح عليك تجاهل المكونات الإضافية والأنظمة الأساسية ومجلدات www بعد هذه العملية.

بناء واختبار!

على استعداد للاختبار؟ تحتاج إلى إنشاء تطبيق مختلط وإنشاء تطبيق خاص بك لكل نظام أساسي تحدده.

تشغيل npm بناء
قرطبة بناء الروبوت
قرطبة بناء دائرة الرقابة الداخلية

والآن ... تشغيل!

كوردوفا تشغيل دائرة الرقابة الداخلية - الجهاز
كوردوفا تشغيل الروبوت - الجهاز

شكرا للقراءة والاستمتاع بالتطبيق الخاص بك ؛)