vueport

vueport

مكونات ملف واحد و SSR للقضبان مع Vue JS و WebPack

️ هذه الأحجار الكريمة لا يتم الحفاظ عليها بنشاط! لا يزال لا يزال هناك حل جيد لتشغيل SSR لـ VUE (مثل React_ON_RAILS يوفر React).

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

يوفر VuePort تطبيق Rails الخاص بك نهجًا حديثًا مكونًا لتطوير واجهة المستخدم باستخدام WebPack و Vue.js لتمكين ملف واحد ، والمكونات التفاعلية المقدمة على الخادم والعميل والتكامل السلس مع طرق عرض Rails الخاصة بك.

ألقِ نظرة على وثائق Vue.js على مكونات الملف الفردي لمزيد من المعلومات حول هذا الجانب من الأشياء.

Vueport Piggybacks على جوهرة WebPackRails للحصول على إعداد WebPack مع Rails ، لذلك تحقق من ذلك لمزيد من المعلومات.

مثال على تطبيق القضبان

هنا.

تثبيت

أضف هذا السطر إلى Gemfile في التطبيق الخاص بك:

 gem 'vueport'

ثم تنفذ:

 $ bundle

أو تثبيته بنفسك على النحو التالي:

 $ gem install vueport

ثم فقط الركض

rails generate vueport:install

للاضطلاع بكل ما تحتاجه للبدء (سيقوم هذا بتثبيت WebPackRails وأيضًا ما يحتاجه Vueport في الأعلى).

لتشغيل تطبيقك ، تنفيذ

bundle exec foreman start -f Procfile.dev

لتمهيد خادم WebPack Dev وتطبيق Rails الخاص بك!

نشر الإنتاج

تأكد من تشغيل npm run compile (أو yarn run compile ) كجزء من عملية النشر إلى الإنتاج. هذا يجمع إصدار الإنتاج من حزمة جانب العميل الخاص بك ، بالإضافة إلى تجميع حزمة جانب الخادم لتطبيق Node JS الخاص بنا.

في الإنتاج ، نرسل طلبات HTTP إلى خادم NodeJS الأساسي لتقديم المحتوى الخاص بنا. لتشغيل تطبيق Rails وخادم Node بشكل متزامن ، استخدم Procfile .

الاستخدام

عرض المساعد

لف التطبيق الخاص بك في المساعد vueport ، لتقديم مكوناتك. على سبيل المثال في التطبيق الخاص بك application.html.erb :

 < body >
    <%= vueport do %>
        <%= render partial : 'shared/nav' %>
        <%= yield %>
    <% end %>
</ body >

يمكن أن يقبل أيضا حجة واحدة. على سبيل المثال:

 < body >
    <%= vueport yield %>
</ body >

إعداد الأصول

أضف مساعدين WebPack Rails إلى تخطيطك لتضمين JavaScript و CSS (انظر WebPackRails ReadMe لمزيد من المعلومات).

تأكد من وضع نقطة دخول JS بعد المساعد Vueport!

على سبيل المثال:

 < head >
    <%= stylesheet_link_tag * webpack_asset_paths ( 'application' , extension :  'css' ) %>
</ head >
< body >
    <%= vueport do %>
        <%= render partial : 'shared/nav' %>
        <%= yield %>
    <% end %>

    <%= javascript_include_tag * webpack_asset_paths ( "application" , extension : 'js' ) %>
</ body >

التكوين الافتراضي

خارج الصندوق ، تتوقع VuePort أن تعيش مكوناتك في التطبيق/المكونات ، وتجمع الأصول إلى Public/WebPack . لتغييرها ، ستحتاج إلى تغيير كل من تكوين WebPack (في config/webpack.config.js و config/webpack.server.js ) وتكوين تطبيق Vue GEM. للقيام بذلك ، في التهيئة ، افعل:

 Vueport . configure do | config |
    config [ :server_port ] = 3001
end

تحقق من جوهرة WebPackRails للحصول على معلومات حول تكوينها.

كيف تعمل؟

ما يمنحك VuePort هو 3 تطبيقات فعالة:

• تطبيق Rails الأساسي الخاص بك
• تطبيق عقدة لتقديم جانب الخادم في الإنتاج (في /العارض)
• تطبيق عقدة لتشغيل WebPack في التطوير

تم إعدادها بحيث يمكن بناؤها للإنتاج بشكل منفصل تمامًا لتجنب خطوط الأنابيب المعقدة - على سبيل المثال ، يمكنك تشغيل هذه التطبيقات الثلاثة باستخدام Docker بشكل منفصل تمامًا مما لا تحتاج إلى Ruby و Node في dockerfile واحدة.

لمزيد من المعلومات حول كيفية دمج WebPack مع Rails ، تحقق من هذا القسم من WebPack Rails ReadMe.

عرض جانب الخادم (SSR)

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

يتم تمكين SSR فقط في الإنتاج.

لماذا vue.js؟

لقد دفعتني تجربتي في العمل مع العديد من مكتبات واجهة المستخدم الحديثة ، والشمولية مع دمجها مع تطبيقات Rails (وخاصة React و Vue JS) ، إلى استنتاج مفاده أن Vue JS يبدو أنها مكتبة أكثر استكشافًا و "بطاريات متضمنة" عند بناء مركبات للسكك الحديدية.

أستخدم React على أساس منتظم للمنتجعات وأحب فلسفتها الوظيفية ، ولكن لكتابة المكونات لتتناسب مع واجهة القضبان ، يبدو أن Vue يوفر لي أقل تعقيد ، ويبدو أنه أسهل بالنسبة لمطوري الياقوت.

لمقارنة Vue.js ورد ، تحقق من ذلك.

الأسئلة الشائعة

• أحصل على الخطأ Could not load compiled manifest from /app/public/webpack/manifest.json في الإنتاج

  ستحتاج إلى تشغيل npm run compile كجزء من عملية الإنشاء الخاصة بك لإنشاء حزمة JS الإنتاج (يتم إنشاء هذا الخطأ بواسطة WebPackRails)

للقيام

• التعامل مع SSR
• اجعل تكوين WebPack أكثر مثل التكوين من قالب Vue CLI
• تحسين تفاعل SSR مع Nodejs
• إعداد اختبار مكون JS

تطوير

بعد التحقق من الريبو ، قم بتشغيل bin/setup لتثبيت التبعيات. ثم ، قم بتشغيل rake spec لتشغيل الاختبارات. يمكنك أيضًا تشغيل bin/console للحصول على مطالبة تفاعلية تتيح لك التجربة.

لتثبيت هذه الأحجار الكريمة على جهازك المحلي ، قم بتشغيل bundle exec rake install . لإصدار إصدار جديد ، قم بتحديث رقم الإصدار في version.rb ، ثم قم بتشغيل bundle exec rake release ، والذي سيقوم بإنشاء علامة GIT للإصدار ، و Push Git Commits و Tags ، ودفع ملف .gem إلى rubygems.org.

المساهمة

يتم الترحيب بتقارير الأخطاء وطلبات السحب على Github على https://github.com/samtgarson/vueport. يهدف هذا المشروع إلى أن يكون مساحة آمنة ومرحبة للتعاون ، ومن المتوقع أن يلتزم المساهمون بقواعد سلوك العهد المساهم.

شكرًا

• شكرا جزيلا لإيفان أنت وفريق Vuejs على الحفاظ على هذا المجتمع النابض بالحياة والدعم حول Vue JS
• شكراً جزيلاً لـ Mipearson على جوهرة الويب الخاصة به التي تعتمد عليها هذه الأحجار الكريمة.

رخصة

الجوهرة متوفرة كمصدر مفتوح بموجب شروط ترخيص معهد ماساتشوستس للتكنولوجيا.