webpack3 搭建babel7+jsx 在vue文件中可解析jsx需要 webpack配置及.babel文件配置 和 所需依赖版本

下面是webpack3配置babel7和jsx以在vue文件中解析jsx的步骤：

1. 安装依赖：

   npm install webpack@3.x babel-core@7.x babel-loader@8.x babel-preset-env@1.x babel-preset-react@6.x vue-loader@13.x vue-template-compiler@2.x --save-dev

2. 在webpack配置文件中添加以下代码：

   module.exports = {
     // ...
     module: {
       rules: [
         {
           test: /\.jsx?$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['env', 'react']
             }
           }
         },
         {
           test: /\.vue$/,
           loader: 'vue-loader'
         }
       ]
     }
     // ...
   }

3. 在项目根目录下添加.babelrc文件，并添加以下代码：

   {
     "presets": ["env", "react"]
   }

4. 在vue文件中添加以下代码来使用jsx：

   <template>
     <div>
       <h1>Hello, {{ name }}!</h1>
       <MyComponent />
     </div>
   </template>

   <script>
   import MyComponent from './MyComponent.jsx';

   export default {
     data() {
       return {
         name: 'World'
       };
     },
     components: {
       MyComponent
     }
   };
   </script>

注意：需要使用`.jsx`作为文件扩展名。

希望这些步骤可以帮助到你。