كيفية الجمع بين الموجه VueJS و Laravel

أنا معجب كبير بـ Laravel وأرغب في الترميز كلما كان لدي وقت فراغ. في الآونة الأخيرة ، بدأت أيضًا برنامج VueJS ، وهو أمر منطقي بالتأكيد عندما ترغب في تقديم تجربة مستخدم غنية جدًا وديناميكية. كان أحد أكبر التحديات التي واجهتني هو الجمع بين مفهومي توجيه VueJS Router و Laravel. أردت استخدام طرق المصادقة الخلفية والمصادقة المقدمة من Laravel ، لكنني أردت أيضًا استخدام VueJS لبعض الأجزاء الأكثر ديناميكية. يمكننا بالطبع إضافة قالب VueJS وعناصر البرنامج النصي إلى كل شفرة نقوم بإنشائها ، لكن النتيجة هي أنه في كل مرة يتم إعادة تحميل الصفحة. هذا ليس شيئًا نريده. نريد استخدام Vue Resource لإنشاء تطبيق دون الحاجة إلى إعادة التحميل في كل مرة نغير فيها المسار. كيف يمكننا أن نفعل ذلك ، عند العمل مع لارافيل؟

لتبدأ نحن بحاجة إلى NodeJS. قم بتنزيل التثبيت الخاص بك من موقع NodeJS أو استخدم سطر الأوامر لتثبيت NodeJS. تأكد أيضًا من أنك تستخدم Laravel 5.4 على الأقل. بعد تثبيت NodeJS ، تأكد من عمل كلا الأمرين:

العقدة -v
npm -v

الخطوة التالية هي تثبيت جميع الحزم ذات الصلة:

تثبيت npm

إذا كنت تستخدم Windows ، فقد تحتاج إلى تشغيل الأمر التالي لتثبيت جميع حزم الإنشاء ذات الصلة:

تثبيت npm - عالمي - إنتاج أدوات إنشاء Windows

الخطوة التالية هي أننا سنضيف برنامج VueJS إلى مشروعنا. قم بتشغيل الأمر التالي:

npm تثبيت vue

بالإضافة إلى ذلك ، نريد أيضًا تثبيت مكون vue-router. قم بتشغيل الأمر التالي:

npm تثبيت vue-router

يمكنك أيضًا استخدام package.json الخاص بي وتشغيل الأمر npm install مرة أخرى.

{
  "خاص": صحيح ،
  "البرامج النصية": {
    "dev": "تطوير تشغيل npm" ،
    "development": "cross-env NODE_ENV = development node_modules / webpack / bin / webpack.js - progress - hide-modules --config = node_modules / laravel-mix / setup / webpack.config.js"،
    "watch": "cross-env NODE_ENV = development node_modules / webpack / bin / webpack.js - ساعة - progress - إخفاء وحدات --config = node_modules / laravel-mix / setup / webpack.config.js"،
    "watch-poll": "npm run watch - - watch-poll" ،
    "hot": "cross-env NODE_ENV = تطوير node_modules / webpack-dev-server / bin / webpack-dev-server.js - عبر الإنترنت --hot --config = node_modules / laravel-mix / setup / webpack.config. شبيبة "
    "prod": "إنتاج تشغيل npm" ،
    "production": "cross-env NODE_ENV = node_modules / webpack / bin / webpack.js - progress - hide-modules --config = node_modules / laravel-mix / setup / webpack.config.js"
  }،
  "devDependencies": {
    "axios": "^ 0.16.2" ،
    "bootstrap-sass": "^ 3.3.7" ،
    "عبر env": "^ 5.0.5" ،
    "مسج": "^ 3.1.1" ،
    "laravel-mix": "^ 1.0" ،
    "lodash": "^ 4.17.4" ،
    "vue": "^ 2.1.10"
  }،
  "التبعيات": {
    "vue-router": "^ 2.7.0"
  }
}

إذا كان كل شيء يعمل ، فقد حان الوقت لإنشاء مكونات VueJS. أنا أستخدم مثال سهل للغاية هنا. لدي مكون رئيسي ومكون آخر يسمى مثال في ملف التوجيهات. قم بإنشاء الملف التالي:

الموارد / الأصول / js / vue-app.js (أنا أستخدم vue-app.js ، لأن التطبيق ربما يكون موجودًا بالفعل)

استيراد Vue من "vue"
استيراد VueRouter من 'vue-router' ؛
استيراد الصفحة الرئيسية من './components/Home.vue' ؛
استيراد {طرق} من './routes' ؛
Vue.use (VueRouter)؛
const router = new VueRouter ({
    الوضع: "التاريخ" ،
    طرق
})؛
Vue الجديد ({
  el: '#app' ،
  جهاز التوجيه
})؛

والخطوة التالية هي إنشاء ملف الطرق: موارد / الأصول / js / ways.js

يرجى ملاحظة أنني أستخدم / vue / الدليل هنا. يمكنك إضافة العديد من الدلائل ، لكن عليك أن تدرك أننا سنلزم Laravel لاحقًا في هذا البرنامج التعليمي بعدم إعادة تحميل هذا المسار. ستتولى VueJS أساسًا جزء التوجيه من هنا.

استيراد الصفحة الرئيسية من './components/Home.vue' ؛
استيراد مثال من './components/Example.vue' ؛
طرق تصدير التصدير = [
    {path: '/ vue' ، المكون: الصفحة الرئيسية ، الاسم: 'الصفحة الرئيسية'} ،
    {path: '/ vue / example' ، المكون: مثال ، الاسم: 'Example'}
].

كما ترى ، لدينا المكون الرئيسي وأيضًا مكون المثال المسجل هنا.

الخطوة التالية هي إنشاء ملفين آخرين. قم بإنشاء الدليل التالي: resources / stocks / js / components / ودعنا ننشئ أول مكون Vue ، يسمى Home.Vue

<القالب>
    @ {{message}}
      رابط إلى مثال  
endsection

أنا بما في ذلك هنا layouts.app بلدي ، الذي يحتوي على شريط التنقل وجميع الأشياء الأخرى ذات الصلة. داخل المحتوى ، نقوم بتحميل مكون Vue JS ونعرض أيضًا عرض الموجه.

نحن تقريبا هناك. الخطوة الأخيرة هي أننا بحاجة إلى تكوين تكوين webpack. سوف نستخدم Laravel Mix للنشر. تأكد من وجود الملف التالي: webpack.mix.js

يجب أن يحتوي على المحتوى التالي:

اسمحوا مزيج = تتطلب ('laravel-mix') ؛
mix.js ('resources / properties / js / vue-app.js'، 'public / js')؛

سيؤدي ذلك إلى استدعاء laravel-mix ، وتجميع vue-app.js ونشرها في ملف / js العمومي.

الآن نحن جميعا على استعداد. لننفذ النشر:

npm المدى الإنتاج

إذا تمت عملية النشر على ما يرام ، يجب أن تكون قادرًا على رؤية ملف في مجلد js / public. افتح الآن التطبيق الخاص بك وتصفح إلى http: // localhost / vue. مضيف محلي بالطبع يمكن أن يكون مختلفًا ، اعتمادًا على كيفية تكوين بيئتك. إذا سارت الأمور على ما يرام ، يجب أن تكون قادرًا على رؤية تحميل برنامج VueJS. عند استخدام عنوان url لمكون المثال ، يجب تحميل مكون المثال. الجزء الجميل هنا هو أن الصفحة لم يتم تحديثها! لذلك إذا كنت تنوي إنشاء تطبيق صفحة واحدة مع مكونات مختلفة باستخدام جهاز التوجيه vue ، يمكن أن تعمل جميعها معًا طالما بقيت داخل الدليل الفرعي للمصدر. قد يؤدي استخدام دليل فرعي آخر إلى تحديث الصفحة وسيتم تحميل جميع المكونات مرة أخرى. إذا كنت لا تريد ذلك ، فتأكد من تكوين ملف route.php بشكل صحيح.