vue-cli项目里面使用jsx/react组件的正确设置方法

小孩才做选择题，大人说我全要。

ant motion 的动效很不错，但自己的项目是基于vue-cli的，换react明显不现实。

需求就是这样出现。

废话不多说，解决方案就在这了。

涉及修改2个文件babel.config.js和vue.config.js

• babel.config.js 文件中presets 的 @vue/app, 替换为

  [
      '@vue/app',
      {
          jsx: false,
      }
  ],
  

  参考文档
  https://cli.vuejs.org/zh/config/#babel
  https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app

• vue.config.js 中增使用自制的jsx文件解析配置

  configureWebpack(){
      return {
          module: {
              rules: [
                  {
                      test: /\.jsx$/,
                      use: [
                          {
                              loader: 'babel-loader',
                              options: {
                                  presets: [
                                      [
                                          "@babel/preset-react",
                                          {
                                              pragma:"React.createElement",
                                          }
                                      ]
                                  ],
                                  plugins: [
                                      [`@babel/plugin-proposal-decorators`, { legacy: true }]
                                  ]
                              }
                          }
                      ],
                      include: path.resolve(__dirname, 'src'),
                      exclude: path.resolve(__dirname, "node_modules/"),
                  }
              ]
  
          }
      }
  }
  

  安装依赖

  yarn add -D @babel/preset-react  react react-dom
  

---

• https://github.com/akxcv/vuera

  此外还可以通过第三方的库来实现，具体没使用过，自行研究