كيفية تشغيل مكونات vue في مشروع التفاعل؟ مقدمة الطريقة

كيف تبدأ سريعًا مع VUE3.0: خلفية تعلم

هذه المقالة جاءت من مقابلة تم سؤالي فيها، إذا كانت مكونات vue وreact تحتاج إلى التشغيل المتبادل وإعادة الاستخدام، فكيف يتم تنفيذها بشكل أنيق؟

باستثناء أن المطورين يقومون بنقل الكود يدويًا. حاليًا، يمكنني التفكير في حلين فقط.

• الحل 1: تحويل كود vue وكود التفاعل (مزامنة مكتبة المكونات).

• الحل 2: السماح بتشغيل مكونات vue مباشرة في مشروع React، والعكس صحيح.

دعونا نلقي نظرة على التنفيذ أولا

مرات

، وكانت الاستجابة وعرض vue طبيعيين أيضًا .

مبدأ التنفيذ هو

• تقديم الإصدار الكامل من vue (إذا كنت تفكر في الأداء، يمكنك تقديمه عند الطلب)

• انتظر حتى مرحلة ComponentDidMount، وقم بتحميل <div id="vueApp" /> ثم

• new Vue(..).$mount('#vueApp')

import Vue from 'vue/dist/vue.min.js' // تقديم الإصدار الكامل، وإلا لا يمكن تحليل بناء جملة كائن مكون vue فئة التصدير الافتراضية App Extends Component {
  منشئ (الدعائم) {
    سوبر (الدعائم)
  }
  
  مكون ديد ماونت () {
    كونست فو = {
      القالب: `
        <ديف>
          <h1>أنا أقول: {{aaa}}</h1>
          <h1>أنا أقول: {{aaa}}</h1>
          <h1>أنا أقول: {{aaa}}</h1>
          <button @click="aaa++">زر</button>
        </div>
      `،
      بيانات () {
        يعود {
          أأ: 2222
        }
      }
    }
    نيوفيو({
      تقديم: ح => ح(فو)،
    }).$mount('#vueApp')
  }

  يجعل() {
    يعود (
      <ديف>
        <h1>حاليًا في مشروع التفاعل</h1>
        <h1>حاليًا في مشروع التفاعل</h1>
        ما يلي سوف يعرض مكون vue <div id="vueApp" />
      </div>
    )
  }
}

ملاحظة:

إذا كنت بحاجة فقط إلى دعم كائن خيار مكون vue، فلن تحتاج إلى تكوين

كائن خيار مكون Vue إلى:

const Foo = {. 
    القالب: ` 
        <ديف> 
            <h1>أنا أقول: {{aaa}}</h1>
            <h1>أنا أقول: {{aaa}}</h1> 
            <h1>أنا أقول: {{aaa}}</h1> 
            <button @click="aaa++">زر</button> 
        </div> 
    `، 
    بيانات () { 
        يعود { 
            أأ: 2222 
        } 
    } 
}

الإصدار المتقدم

يشير الإصدار المتقدم هنا إلى: الحاجة إلى دعم ملفات/مكونات .vue (العرض التوضيحي أعلاه هو كائن خيار المكون مباشرةً، ولا يوجد ملف .vue).

على سبيل المثال: (استمر في استخدام العرض التوضيحي أعلاه وقم بتغيير ملف بضعة أسطر)

• لاستيراد ملف .vue: import Foo from "./Foo.vue";

import Vue من 'vue/dist/vue.min.js' // تقديم الإصدار الكامل، وإلا لا يمكن تحليل بناء جملة كائن vue import فو من "./ Foo.vue"؛
تصدير التطبيق الافتراضي للفئة يمتد المكون {
  ...
  
  مكون ديد ماونت () {
    نيوفيو({
      تقديم: ح => ح(فو)،
    }).$mount('#vueApp')
  }

  ...
}

لكي يصبح هذا ساري المفعول، تحتاج إلى تكوين

• الموقع الرسمي لبرنامج vue-loader: https://vue-loader.vuejs.org/guide/#manual-setup

// في webpack.config.js const { VueLoaderPlugin } = require ("محمل الرؤية")

وحدة التصدير = {
  الوضع: "التنمية"،
  الوحدة النمطية: {
    قواعد: [
      {
        الاختبار: /.vue$/،
        المُحمل: "مُحمل الرؤية"
      }
    ]
  },
  الإضافات: [
    // تأكد من تضمين البرنامج المساعد للسحر
    برنامج VueLoaderPlugin الجديد ()
  ]
}

ملاحظة:

• يوصى بعدم استخدام مشاريع السقالات التفاعلية عند الاختبار ، ولكن استخدام مشاريع التفاعل التي تقوم بتكوين webpack.config.js من البداية.

• عندما أستخدم أحدث إصدار من السقالات، بعد تشغيل الإخراج، انتقل إلى webpack.config. ستؤدي كتابة Node.js إلى الإبلاغ عن خطأ لأن VueLoaderPlugin غير متوافق مع بناء جملة واحد.

• إذا لم تكن بحاجة إلى تحليل ملف .vue واستخدام بناء جملة كائن خيار المكون مباشرة، فلن تكون هناك حاجة لتكوين أداة تحميل vue إضافية.

باختصار،

• يوصى بعدم استخدام رد الفعل عند الاختبار بالنسبة لمشروع مُدعم ، استخدم مشروع رد فعل يقوم بتكوين webpack.config.js من البداية

• إذا لم تكن بحاجة إلى تحليل ملف .vue واستخدام ملف vue مباشرة بناء جملة كائن خيار المكون، ليست هناك حاجة إلى تكوين إضافي لمحمل vue.

أخيرًا، للمقارنة، يتم استخدام مكونات React لمشروع vue في مشاريع التفاعل، ويتم استخدام مكونات vue في مشاريع التفاعل.

تم نسخ هذه المقالة من: https://juejin.cn/post/7083303446161391623

المؤلف: bigtree.