Question

有什么方法可以将Vue组件实现到react项目中吗？我已经尝试过vuera和react-vue-loader，但我无法使其正常工作，而且我不知道我使用它们是否错误或无法完成。有任何建议或想法吗？

webpack配置文件

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
 resolve: {
    modules: ['src','node_modules'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
          test: /\.vue$/,
          loader: 'vue-loader'
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
        ],
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ],
  externals: {
    react: "React"
  }
};

babel配置文件

{
    "presets": [
        "@babel/preset-env","@babel/preset-react",
    ],
    "plugins": ["vuera/babel",
         [
                "@babel/plugin-proposal-decorators",
                    {
                        "legacy": true
                    }
                ],
                "@babel/plugin-proposal-class-properties",

    "@babel/plugin-syntax-dynamic-import"
    ]
}

反应成分文件

import React, { Component } from "react";
import MyVueComponent from './MyVueComponent.vue'
class Test extends Component {

  render() {

    return (
      <div>
      <MyVueComponent />
      </div>
    );
  }
}

我用过vuera。我收到此错误： TypeError：无法读取解析时未定义的属性“ parseComponent”（路径/node_modules\vue-loader\node_modules@vue\component-compiler-utils\dist\parse.js:14:23）

内部的Vue组件起反应

0 个答案: