aspdotnet vuejs
v3.0.0
دوت نت كور 3.0 + VueJsتتمثل الفكرة الرئيسية لهذا المشروع في توفير طريقة سهلة لبدء مشروع جديد باستخدام .Net Core WebAPI في جانب الخادم وVueJs في جانب العميل. لتحقيق هذا الهدف، قمنا بإعداد التكوين الرئيسي لتمكين هذا التكامل باستخدام بعض الأدوات المساعدة مثل إعادة التحميل السريع وبعض مكتبات الواجهة الأمامية مثل Element-UI وFontAwesome.
هدفنا هو توفير SPA بسيط مع الحد الأدنى من التبعيات ومشكلات الأداء. تم تكوين VueJs باستخدام Vuex وVue Router، ولكن يمكن إزالة هذا إذا كنت لا تشعر أنه يلبي متطلباتك. الشيء نفسه ينطبق على مكتبة المكونات. في هذا القالب، نقدم أيضًا أمثلة على الوظائف الرئيسية.
هذا القالب مستوحى ومقتبس من مشروع Mark Pieszak ومشروع Nordes.
* العمل قيد التقدم. متوفر في الإصدارات المستقبلية.
لتحميل القالب وتثبيته، فقط اكتب:
> dotnet new -i aspdotnet-vuejsيمكنك رؤية قائمة بالقوالب المثبتة باستخدام الأمر
dotnet new -l.
ثم لإنشاء مشروعك، ستستخدم ببساطة الأمر أدناه في الدليل:
> dotnet new vue سيؤدي هذا إلى تشغيل dotnet restore تلقائيًا. ولكن يمكن تغييره في تكوينات القالب. راجع dotnet new vue -h قبل استخدام الأمر السابق.
سيكون الحل واسم المشروع هو اسم الدليل.
لتحديث التثبيت، ستحتاج فقط إلى تكرار عملية التثبيت. طالما أن رقم الإصدار ليس متساويًا، فلن يكون لديك أي سلوك غير متوقع.
اكتب الأمر التالي من الصدفة:
> dotnet new -u aspdotnet-vuejsلبدء تطوير التطبيق الخاص بك، ما عليك سوى استخدام أمر .Net CLI:
> dotnet run YourAplication.csprojيمكنك فقط كتابة
dotnet runفي دليل المشروع أو تكوين IDE الخاص بك للتشغيل. في هذه الحالة الأخيرة، لا تنس تمريرASPNETCORE_ENVIRONMENT=Development.
سيؤدي هذا أيضًا إلى تشغيل كافة تبعيات العقدة مثل npm i .
سيتم بدء تشغيل التطبيق في وضع التطوير مع تمكين إعادة التحميل السريع على
https://localhost:5001وhttp://localhost:5000.
يجب عليك التأكد من أن wwwroot الخاص بك فارغ قبل بدء العملية.
ما عليك سوى استخدام الطريقة العادية للنشر باستخدام .Net Core CLI
> dotnet publish YourProject.csproj -c release -o ./publish/يمكنك أيضًا إضافة جميع المعلمات الأخرى من dotnet cli. يرجى زيارة موقع MSDN لمعرفة المزيد عنه.
سيؤدي هذا إلى إعادة بناء مشروعك وبعد ذلك سيستخدم الهدف الخاص لإعادة بناء عميلك (vuejs) في وضع الإنتاج.
إذا كنت تقوم بالنشر خلف خادم NginX، فقد تحتاج إلى مزيد من التكوين.
لنفترض أن لديك موقعك الأساسي http://www.example.com وأنك في تكوين NginX ترغب في أن يكون تطبيق dotnet الخاص بك ضمن http://www.example.com/myApp . ستحتاج في مثل هذا السيناريو إلى تعيين معرف uri الأساسي لـ Index.html. بدلاً من القيام بذلك يدويًا بين التطوير والإنتاج، لديك الملف ./build/base.prod.config.js الذي يحتوي على تجاوز محتمل.
ما عليك سوى تعيين التجاوز الخاص بك كما يلي:
module . exports = {
baseUriPath : '/myApp/'
}عندما تقوم بالنشر في المرة القادمة، سيتم أخذ المسار في الاعتبار وسيقوم تلقائيًا بتعيين مسار uri الأساسي.
يضيف المشروع بالفعل بعض حاويات الإرساء المتاحة من خلال Docker Hub. يمكنك سحب الصورة إذا أردت. وسوف تجعل العينة متاحة محليا. تستخدم الصورة إصدار Alpine لذا فهي تستخدم مساحة صغيرة فقط.
نظرًا لأن الحاويات الموجودة في عامل الإرساء تحظى بشعبية كبيرة، يتم تضمين ملف Dockerfile أيضًا داخل المجلد الجذر للقالب. لا تنسَ ملف .dockerignore حيث يتم تجاهل بعض الملفات لتجنب نسخ بعض الملفات غير المرغوب فيها قبل النشر.
تأكد من تثبيت Docker.
يحتوي الكود على ضغط Gzip مدمج على HTTPs. من الجيد استخدام هذا الرمز خاصة إذا كنت تستخدم كيستريل. بخلاف ذلك، إذا كنت تستخدم IIS، فيرجى إزالة هذا الرمز المحدد الموجود في ملف Startup.cs . عادةً ما يقدم IIS وحدة الضغط الخاصة به والتي تكون أكثر أداءً.
هناك بعض الأتمتة فيما يتعلق Components المتوفرة داخل ./ClientApp/components/**/* . سيتم الإعلان عن كل الملفات التي تبدأ بقاعدة الكلمة base على أنها ملف عالمي وسيتم تحديد اسم المكون الذي سيتم استخدامه في أي مكان في حالة الثعبان بدون الكلمة base .
مثال: سيتم تسجيل baseHelloWorld كـ hello-world وستكون قادرًا على استخدامه في قالب Vue الخاص بك.
< template >
< div >
< hello-world /> works!
</ div >
</ template >يوجد مثال حقيقي داخل المشروع لمكون البطاقة لكل صفحة. اسم المكون هو
baseCard.vue.
لا يتم إنشاء ملف CSS أثناء وجودك في وضع التطوير. سيتم إنشاؤها فقط عندما تستخدم أمر dotnet publish أو كبديل، يمكنك أيضًا الانتقال واكتب npm run build -- --prod الذي سيطلق بناء الإنتاج مع تصغير الملفات واستخراجها.
هام: حاليًا، تقوم حزمة الويب بتنظيف مجلد wwwroot بالكامل داخل مشروع .Net. لذلك، إذا كان لديك ملفات ثابتة، فانقلها داخل المجلد ./ClientApp/static/ .
للمساعدة في جعل التطوير أسرع، نوفر تثبيت مكتبة المكونات Element-UI. يمكن العثور على توثيق هذه المكتبة في موقعه.
يمكن إزالته بشكل طبيعي في
main.jsإذا لم تكن بحاجة إليه.
