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('#vueApp') } 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,改几行)
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을 구성할 필요가 없습니다.
// 在 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() ] }
고급 버전
고급 버전은 다음을 의미합니다:import Foo from "./Foo.vue";
지금 적용하려면 다음이 필요합니다. vue-loader를 구성하려면
Note
테스트할 때 다음을 권장합니다. , 리액트 스캐폴딩 프로젝트는 사용하지 마세요
, 스크래치를 사용하세요 webpack.config.js리액트 프로젝트 구성 현재 최신 버전의 스캐폴딩을 사용하고 있는데 Eject 실행 후 작성시 오류가 납니다. VueLoaderPlugin은 oneOf
스캐폴드 프로젝트를 테스트할 때 React를 사용하지 않는 것이 좋습니다. webpack.config.js를 처음부터 구성하는 React 프로젝트를 사용하세요 .vue 파일을 구문 분석하고 vue의 구성 요소 옵션 개체 구문을 직접 사용할 필요가 없으면 vue-loader | 를 구성할 필요가 없습니다|
마지막으로 vue 프로젝트에서 반응 구성 요소를 사용하는 것과 구성의 차이점을 비교해 보겠습니다. 반응 프로젝트에서 vue 구성 요소를 사용합니다! | webpack.config.js의 로더를 구성해야 하나요?
vue 프로젝트에서 반응 구성 요소를 사용하는 경우예
, babel-loader 구성,
.jsx 파일 컴파일🎜을 구성해야 하며 babel-loader 옵션에 특히 주의해야 합니다. 🎜🎜🎜🎜 반응 중 vue 구성 요소 🎜🎜🎜no🎜가 프로젝트에서 사용됩니다. .vue 파일을 구문 분석할 필요가 없고 vue의 🎜comComponent 옵션 개체🎜 구문을 직접 사용할 경우 추가 구성이 필요하지 않습니다. 🎜vue-loader🎜. .vue 파일🎜을 지원해야 하는 경우 vue-loader🎜🎜🎜🎜🎜🎜를 구성해야 합니다. 이 문서는 https://juejin.cn/post/7083303446161391623🎜🎜저자: bigtree🎜🎜🎜에서 복제되었습니다. 프로그래밍 관련 지식이 있으면 🎜프로그래밍 비디오🎜를 방문하세요! ! 🎜위 내용은 반응 프로젝트에서 vue 구성 요소를 실행하는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!