반응 프로젝트에서 vue 구성 요소를 실행하는 방법은 무엇입니까? 방법 소개

VUE3.0을 빠르게 시작하는 방법:

이 기사를 학습한 배경은 인터뷰에서 나왔습니다. Vue와 React 구성 요소가 상호 운용되고 재사용되어야 하는지, 어떻게 우아하게 구현해야 하는지에 대한 질문을 받았습니다.

개발자가 수동으로 코드를 전송하는 것을 제외하고. 현재는 두 가지 솔루션만 생각할 수 있습니다.

• 솔루션 1: vue 코드와 반응 코드 변환(구성 요소 라이브러리 동기화)

• 솔루션 2: vue 구성 요소를 React 프로젝트에서 직접 실행하거나 그 반대로 합니다.

먼저 구현을 살펴보겠습니다.

vue 컴포넌트는 반응에서 정상적으로 렌더링되었고, 버튼도 3번 클릭했습니다 . vue의 응답과 렌더링도 정상이었습니다

.

구현 원칙은

vue 정식 버전을 도입하는 것입니다(성능

• <div id="vueApp" />

• 고려한다면 요청 시 도입할 수 있습니다)

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

import Vue from 'vue/dist/vue.min.js' //완전한 버전을 소개합니다. 그렇지 않으면 vue의 구성 요소 개체 구문을 구문 분석할 수 없습니다. 내보내기 기본 클래스 App 확장 구성 요소 {
  생성자(소품) {
    슈퍼(소품)
  }
  
  컴포넌트DidMount() {
    const Foo = {
      템플릿: `
        <div>
          <h1>저는 vue입니다: {{aaa}}</h1>
          <h1>저는 vue입니다: {{aaa}}</h1>
          <h1>저는 vue입니다: {{aaa}}</h1>
          <button @click="aaa++">버튼</button>
        </div>
      `,
      데이터 () {
        반품 {
          아아아: 2222
        }
      }
    }
    newVue({
      렌더링: h => h(Foo),
    }).$mount('#vueApp')
  }

  렌더링() {
    반품 (
      <div>
        <h1>현재 반응 프로젝트 중</h1>
        <h1>현재 반응 프로젝트 중</h1>
        다음은 vue 구성 요소 <div id="vueApp" />를 렌더링합니다.
      </div>
    )
  }
}

참고:

Vue의

구성 요소 옵션 개체만 지원해야 하는 경우에는 webpack을 구성할 필요가 없습니다.

const Foo = { 
    템플릿: ` 
        <div> 
            <h1>저는 vue입니다: {{aaa}}</h1>
            <h1>저는 vue입니다: {{aaa}}</h1> 
            <h1>저는 vue입니다: {{aaa}}</h1> 
            <button @click="aaa++">버튼</button> 
        </div> 
    `, 
    데이터 () { 
        반품 { 
            아아아: 2222 
        } 
    } 
}

고급 버전

여기서 고급 버전은 .vue 파일/구성 요소를 지원해야 함을 의미합니다(위의 데모는 직접 구성 요소 옵션 개체이며 .vue 파일이 없습니다).

예: (위의 데모를 계속 사용하고 몇 줄)

• .vue 파일 가져오기: import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' //정식 버전을 도입하세요. 그렇지 않으면 vue의 구성 요소 개체 구문을 구문 분석할 수 없습니다. "./ Foo.vue"의 Foo;
기본 클래스 내보내기 앱 확장 구성요소 {
  ...
  
  컴포넌트DidMount() {
    newVue({
      렌더링: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

이를 적용하려면 vue-loader

• 공식 웹사이트를 구성해야 합니다: https://vue-loader.vuejs.org/guide/#manual-setup

// webpack.config.js에서 const { VueLoaderPlugin } = require ('vue -로더')

모듈.수출 = {
  모드: '개발',
  모듈: {
    규칙: [
      {
        테스트: /.vue$/,
        로더: 'vue-loader'
      }
    ]
  },
  플러그인: [
    // 마법을 위한 플러그인을 포함했는지 확인하세요.
    새로운 VueLoaderPlugin()
  ]
}

참고:

• 테스트할 때는 React scaffolding 프로젝트를 사용하지 말고 webpack.config.js를 처음부터 구성하는 React 프로젝트를 사용하는 것이 좋습니다 .

• 최신 버전의 scaffolding을 사용할 경우에는 꺼내기를 실행한 후 webpack.config로 이동합니다.

• 구문

• 분석하고 vue의 구성 요소 옵션 객체 구문을 직접 사용할 필요가 없으면 추가 vue-loader를 구성할 필요가 없습니다.

요약하자면,

스캐폴드된 프로젝트의 경우

• .vue 파일을 구문 분석할 필요가 없으면

• 처음부터 webpack.config.js를 구성하는 반응 프로젝트를 사용하는 것이 좋습니다 .

• 컴포넌트 옵션 객체 구문을 사용하면 vue-loader의 추가 구성이 필요하지 않습니다.

마지막으로 비교를 위해 vue 프로젝트는 React 프로젝트에서 사용되며 vue 컴포넌트는 React 프로젝트에서 사용됩니다!

이 문서는 https://juejin.cn/post/7083303446161391623에서 재현됩니다.

작성자: bigtree