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

react 프로젝트에서 vue 구성 요소를 실행하는 방법은 무엇입니까? 다음 글에서는 React 프로젝트에서 Vue 컴포넌트를 실행하는 방법을 예제를 통해 소개하겠습니다. 도움이 되셨으면 좋겠습니다.

이 기사의 배경은 인터뷰에서 나왔습니다. Vue와 React 구성 요소가 상호 운용되고 재사용되어야 한다면 어떻게 우아하게 구현할 수 있습니까?

개발자가 코드를 수동으로 전송하는 경우는 제외됩니다. 현재 생각나는 솔루션은 딱 2가지

• 옵션 1: vue 코드와 React 코드의 상호 변환(컴포넌트 라이브러리 동기화)

• 옵션 2:Vue 컴포넌트를 React 프로젝트에서 직접 실행하도록 하고, 그 반대도 가능 반대로 할 수 있습니다.

[관련 권장사항: Redis video tutorial, vuejs tutorial]

먼저 구현 효과를 살펴보겠습니다

vue 컴포넌트는 reat에서 정상적으로 렌더링되었으며, 저도 click 버튼을 3번 누르면 vue의 응답과 렌더링도 정상

구체적으로 구현하는 방법은 무엇인가요?

구현 원칙

• vue 정식 버전 도입(성능을 고려한다면 필요에 따라 도입 가능)

• commentDidMount 단계까지 기다렸다가 <div id></div>new Vue(..).$mount('#vueApp')<div id="vueApp"></div>后

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

import Vue from 'vue/dist/vue.min.js' // 引入完整版，否则不能解析vue的组件对象语法
export default class App extends Component {
  constructor(props) {
    super(props)
  }
  
  componentDidMount() {
    const Foo = {
      template: `
        <div>
          <h1>我是vue : {{aaa}}</h1>
          <h1>我是vue : {{aaa}}</h1>
          <h1>我是vue : {{aaa}}</h1>
          <button @click="aaa++">按钮</button>
        </div>
      `,
      data () {
        return {
          aaa: 2222
        }
      }
    }
    new Vue({
      render: h => h(Foo),
    }).$mount(&#39;#vueApp&#39;)
  }

  render() {
    return (
      <div>
        <h1>当前是react项目内</h1>
        <h1>当前是react项目内</h1>
        以下将渲染vue组件
        <div id="vueApp" />
      </div>
    )
  }
}

注意：

如果只需支持vue的组件选项对象的话，那么不用配置webpack，就完了

vue的组件选项对象 指的是：

const Foo = { 
    template: ` 
        <div> 
            <h1>我是vue : {{aaa}}</h1>
            <h1>我是vue : {{aaa}}</h1> 
            <h1>我是vue : {{aaa}}</h1> 
            <button @click="aaa++">按钮</button> 
        </div> 
    `, 
    data () { 
        return { 
            aaa: 2222 
        } 
    } 
}

高级版

此处高级版指的是：需要支持 .vue文件/组件（上面的demo，直接是组件选项对象，没有.vue文件）

比如：（继续用上面的demo，改几行）

• 改成了引入.vue文件： import Foo from "./Foo.vue";

import Vue from 'vue/dist/vue.min.js' // 引入完整版，否则不能解析vue的组件对象语法
import Foo from "./Foo.vue";
export default class App extends Component {
  ...
  
  componentDidMount() {
    new Vue({
      render: h => h(Foo),
    }).$mount('#vueApp')
  }

  ...
}

의

이후 참고:

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

vue의 구성 요소 옵션 개체는 다음을 참조합니다.

• // 在 webpack.config.js 内
  const { VueLoaderPlugin } = require('vue-loader')
  
  module.exports = {
    mode: 'development',
    module: {
      rules: [
        {
          test: /.vue$/,
          loader: 'vue-loader'
        }
      ]
    },
    plugins: [
      // make sure to include the plugin for the magic
      new VueLoaderPlugin()
    ]
  }

  고급 버전

  고급 버전은 다음을 의미합니다: .vue 파일/구성 요소를 지원해야 합니다(위의 데모는 직접 구성 요소 옵션 개체이며 .vue 파일이 없습니다)
  • 예: (계속 사용 위의 데모를 보고 몇 줄만 변경)

  .vue 파일 가져오기로 변경됨: import Foo from "./Foo.vue";
  rrreee

  • 지금 적용하려면 다음이 필요합니다. vue-loader를 구성하려면

  공식 웹사이트: https: //vue-loader.vuejs.org/guide/#manual-setup

  rrreee

  • Note

  • 테스트할 때 다음을 권장합니다. , 리액트 스캐폴딩 프로젝트는 사용하지 마세요

    , 스크래치를 사용하세요 webpack.config.js
  리액트 프로젝트 구성 현재 최신 버전의 스캐폴딩을 사용하고 있는데 Eject 실행 후 작성시 오류가 납니다. VueLoaderPlugin은 oneOf의 구문과 호환되지 않기 때문에 webpack.config.js .vue 파일을 구문 분석하고 vue의 구성 요소 옵션 개체 구문을 직접 사용할 필요가 없다면 vue를 구성할 필요가 없습니다. -loader 추가요약를 구성할 필요가 없습니다webpack.config.js의 로더를 구성해야 하나요?

  	스캐폴드 프로젝트를 테스트할 때 React를 사용하지 않는 것이 좋습니다. webpack.config.js를 처음부터 구성하는 React 프로젝트를 사용하세요 .vue 파일을 구문 분석하고 vue의 구성 요소 옵션 개체 구문을 직접 사용할 필요가 없으면 vue-loader
  	마지막으로 vue 프로젝트에서 반응 구성 요소를 사용하는 것과 구성의 차이점을 비교해 보겠습니다. 반응 프로젝트에서 vue 구성 요소를 사용합니다!

  vue 프로젝트에서 반응 구성 요소를 사용하는 경우

  예

  , babel-loader 구성,

  .jsx 파일 컴파일🎜을 구성해야 하며 babel-loader 옵션에 특히 주의해야 합니다. 🎜🎜🎜🎜 반응 중 vue 구성 요소 🎜🎜🎜no🎜가 프로젝트에서 사용됩니다. .vue 파일을 구문 분석할 필요가 없고 vue의 🎜comComponent 옵션 개체🎜 구문을 직접 사용할 경우 추가 구성이 필요하지 않습니다. 🎜vue-loader🎜. .vue 파일🎜을 지원해야 하는 경우 vue-loader🎜🎜🎜🎜🎜🎜를 구성해야 합니다. 이 문서는 https://juejin.cn/post/7083303446161391623🎜🎜저자: bigtree🎜🎜🎜에서 복제되었습니다. 프로그래밍 관련 지식이 있으면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜

  위 내용은 반응 프로젝트에서 vue 구성 요소를 실행하는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!