egg typescript element kit

مجموعة عناصر الكتابة على شكل بيضة

استنادًا إلى Egg + TypeScript + Element + Webpack3، يقدم العميل متعدد الصفحات والصفحة الواحدة من جانب الخادم مشروعًا هندسيًا كاملاً متماثلًا.

• نظام مكتب الاستقبال: http://localhost:7001

• نظام الواجهة الخلفية: http://localhost:7001/admin

1. مقدمة المشروع

نسخة البرنامج المساعد

• بيضة: ^2.xx
• العقدة: العقدة ^8.x.x+،
• حزمة الويب^4.xx
• القيمة: ^2.5.0
• الآلة الكاتبة: ^2.6.2
• واجهة المستخدم للعنصر: ^2.0.0
• easywebpack-vue
• بيضة عرض vue-ssr
• egg-webpack
• egg-webpack-vue

خصائص المشروع

• دعم الكود الجانبي لعقدة البيض وكتابة وبناء كود TypeScript لرمز الواجهة الأمامية

• دعم البناء الآلي لعامل الخدمة

• يدعم ميزات المزامنة والانتظار، ويتم كتابة وحدة التحكم في وضع الفصل

• يدعم تعديل رمز الخادم والعميل، وتجميع Webpack في الوقت الحقيقي والتحديث السريع، npm run dev بنقرة واحدة

• استنادًا إلى التنفيذ المتماثل لعميل خادم الصفحة الواحدة vue + vuex + vue-router + axios

• يدعم بيئة التطوير وبيئة الاختبار وتجميع Webpack للبيئة الرسمية

• دعم تبعية موارد js/css/image، ودعم مدمج لميزات CDN

• دعم البناء الآلي Webpack DLL

• دعم العرض من جانب الخادم لمكون Vue والتحميل غير المتزامن

2. وظائف النظام

نظام مدونة مكتب الاستقبال

استخدام العرض من جانب الخادم Egg + Vue

• الصفحة الرئيسية للمدونة
• عرض قائمة مقالات المدونة
• صفحة تفاصيل مقالة المدونة
• تصفح فئة المدونة

نظام إدارة الواجهة الخلفية

استخدام Egg + Vue + Vue-Router + عرض متماثل من جانب الخادم لصفحة واحدة

• تسجيل دخول المستخدم
• تسجيل المستخدم
• لوحة القيادة
• إدارة المادة
• تخفيض السعر إضافة المادة
• إدارة الأذونات

3. استخدم

3.1 تثبيت التبعيات

npm install
npm start

3.2 ابدأ التطبيق

npm run dev

الوصول للتطبيق: http://127.0.0.1:7001

3.3 البناء

• بناء بيضة TypeScript

npm run tsc

• بناء مشروع الواجهة الأمامية لـ TypeScript

npm run tsc

3.4 نشر الحزمة

1. قم أولاً بتشغيل npm run build لإنشاء كود TypeScript Egg وكود TypeScript الأمامي
2. يتم تجميع رمز المشروع ورمز البناء معًا
3. بعد نشر التطبيق، ابدأ تشغيل التطبيق من خلال npm start

4. التوثيق

• http://hubcarl.github.io/easywebpack/vue/rule
• https://zhuanlan.zhihu.com/easywebpack

5. المراجع

• vue-element-admin

رخصة

معهد ماساتشوستس للتكنولوجيا