จะรันส่วนประกอบ vue ในโปรเจ็กต์ react ได้อย่างไร การแนะนำวิธีการ

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: ความเป็นมาของการเรียนรู้

บทความนี้มาจากการสัมภาษณ์ ฉันถูกถาม ว่าส่วนประกอบ vue และ react จำเป็นต้องทำงานร่วมกันและนำกลับมาใช้ใหม่ได้อย่างไร

ยกเว้นว่านักพัฒนาจะโอนรหัสด้วยตนเอง ปัจจุบัน ฉันคิดได้เพียงสองโซลูชันเท่านั้น

• โซลูชันที่ 1: แปลงโค้ด vue และโค้ดตอบกลับ (การซิงโครไนซ์ไลบรารีส่วนประกอบ)

• โซลูชันที่ 2: ปล่อยให้คอมโพเนนต์ vue ทำงานโดยตรงในโปรเจ็กต์ React และในทางกลับกัน

มาดูการนำไปใช้งานกันก่อน

คอมโพเนนต์ vue ถูกเรนเดอร์ตามปกติ และฉันก็ คลิกปุ่ม 3 ครั้ง การตอบสนองและการเรนเดอร์ของ vue ก็เป็นเรื่องปกติเช่น

กัน

หลักการนำไปใช้งานคือ

• การแนะนำ vue เวอร์ชันเต็ม (หากคุณพิจารณาถึงประสิทธิภาพ คุณสามารถแนะนำได้ตามความต้องการ)

• รอจนกระทั่งสเตจ ComponentDidMount เมานต์ <div id="vueApp" /> จากนั้น

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

import Vue จาก 'vue/dist/vue.min.js' //แนะนำเวอร์ชันที่สมบูรณ์ มิฉะนั้น ไวยากรณ์อ็อบเจ็กต์ส่วนประกอบของ vue จะไม่สามารถแยกวิเคราะห์ได้ ส่งออกคลาสเริ่มต้น App ขยาย Component {
  ตัวสร้าง (อุปกรณ์ประกอบฉาก) {
    ซุปเปอร์(อุปกรณ์ประกอบฉาก)
  -
  
  ส่วนประกอบDidMount() {
    const ฟู = {
      แม่แบบ: `
        <div>
          <h1>ฉันคือวิว: {{aaa}}</h1>
          <h1>ฉันคือวิว: {{aaa}}</h1>
          <h1>ฉันคือวิว: {{aaa}}</h1>
          <button @click="aaa++">ปุ่ม</button>
        </div>
      -
      ข้อมูล () {
        กลับ {
          อ๋อ: 2222
        -
      -
    -
    นิววิว({
      แสดงผล: h => h(Foo),
    }).$เมานท์('#vueApp')
  -

  แสดงผล() {
    กลับ (
      <div>
        <h1>ขณะนี้อยู่ในโครงการตอบโต้</h1>
        <h1>ขณะนี้อยู่ในโครงการตอบโต้</h1>
        ต่อไปนี้จะแสดงผลคอมโพเนนต์ vue <div id="vueApp" />
      </div>
    -
  -
}

หมายเหตุ:

หากคุณต้องการสนับสนุนออบเจ็กต์ตัวเลือกคอมโพเนนต์ของ vue เท่านั้น คุณไม่จำเป็นต้องกำหนดค่า webpack

อ็อบเจ็กต์ตัวเลือกคอมโพเนนต์ของ Vue อ้างถึง:

const Foo = { 
    แม่แบบ: ` 
        <div> 
            <h1>ฉันคือวิว: {{aaa}}</h1>
            <h1>ฉันคือวิว: {{aaa}}</h1> 
            <h1>ฉันคือวิว: {{aaa}}</h1> 
            <button @click="aaa++">ปุ่ม</button> 
        </div> 
    - 
    ข้อมูล () { 
        กลับ { 
            อ๋อ: 2222 
        - 
    - 
}

เวอร์ชันขั้นสูง

เวอร์ชันขั้นสูงในที่นี้อ้างถึง: จำเป็นต้องรองรับไฟล์/ส่วนประกอบ .vue (การสาธิตด้านบนเป็นออบเจ็กต์ตัวเลือกส่วนประกอบโดยตรง ไม่มีไฟล์ .vue)

ตัวอย่างเช่น: (ใช้การสาธิตด้านบนต่อไปและเปลี่ยน a ไม่กี่บรรทัด)

• เพื่อนำเข้าไฟล์ .vue: import Foo from "./Foo.vue";

นำเข้า Vue จาก 'vue/dist/vue.min.js' // แนะนำเวอร์ชันเต็ม มิฉะนั้น ไวยากรณ์อ็อบเจ็กต์ส่วนประกอบของ vue ไม่สามารถแยกวิเคราะห์การนำเข้าได้ ฟูจาก "./ Foo.vue";
แอปคลาสเริ่มต้นส่งออกขยายส่วนประกอบ {
  -
  
  ส่วนประกอบDidMount() {
    นิววิว({
      แสดงผล: h => h(Foo),
    }).$เมานท์('#vueApp')
  -

  -
}

เพื่อให้สิ่งนี้มีผล คุณต้องกำหนดค่า

• เว็บไซต์อย่างเป็นทางการของ vue-loader: https://vue-loader.vuejs.org/guide/#manual-setup

// ใน webpack.config.js const { VueLoaderPlugin } = need ('vue -ตัวโหลด')

โมดูล.ส่งออก = {
  โหมด: 'การพัฒนา'
  โมดูล: {
    กฎ: [
      -
        ทดสอบ: /.vue$/,
        ตัวโหลด: 'vue-loader'
      -
    -
  -
  ปลั๊กอิน: [
    // อย่าลืมรวมปลั๊กอินสำหรับเวทย์มนตร์ด้วย
    ใหม่ VueLoaderPlugin()
  -
}

หมายเหตุ:

• ขอแนะนำว่าเมื่อทำการทดสอบ อย่าใช้โปรเจ็กต์ react scaffolding แต่ให้ใช้โปรเจ็กต์ react ที่กำหนดค่า webpack.config.js ตั้งแต่เริ่มต้น

• เมื่อฉันใช้ scaffolding เวอร์ชันล่าสุด หลังจากรัน eject แล้ว ให้ไปที่ webpack.config การเขียนในนั้นจะรายงานข้อผิดพลาดเนื่องจาก VueLoaderPlugin เข้ากันไม่ได้กับไวยากรณ์ oneOf

• หากคุณไม่ต้องการแยกวิเคราะห์ไฟล์ .vue และใช้ไวยากรณ์อ็อบเจ็กต์อ็อบเจ็กต์คอมโพเนนต์ของ vue โดยตรง ก็ไม่จำเป็นต้องกำหนดค่า vue-loader เพิ่มเติม

โดยสรุป

• ขอแนะนำว่าคุณอย่าใช้การตอบสนองเมื่อทำการทดสอบ สำหรับโปรเจ็กต์แบบนั่งร้าน ให้ใช้โปรเจ็กต์การตอบสนองที่กำหนดค่า webpack.config.js ตั้งแต่เริ่มต้น

• หากคุณไม่ต้องการแยกวิเคราะห์ไฟล์ .vue และใช้ vue โดยตรง ไวยากรณ์อ็อบเจ็กต์คอมโพเนนต์ของตัวเลือก ดังนั้นจึงไม่จำเป็นต้องกำหนดค่าเพิ่มเติมของ vue-loader

สุดท้ายนี้ สำหรับการเปรียบเทียบ คอมโพเนนต์ vue project React จะถูกใช้ในโปรเจ็กต์ react และคอมโพเนนต์ vue จะถูกใช้ในโปรเจ็กต์ react

บทความนี้ทำซ้ำจาก: https://juejin.cn/post/7083303446161391623

ผู้แต่ง: bigtree