webpack3 搭建babel7+jsx 在vue文件中可解析jsx

要在Vue文件中解析JSX，您需要使用Vue中的JSX插件。以下是在Webpack 3中使用Babel 7和JSX编写Vue文件的步骤：

1. 安装必要的依赖：

   npm install vue vue-template-compiler babel-loader @babel/core @babel/preset-env @vue/babel-preset-jsx --save-dev

2. 在webpack配置文件中增加以下规则：

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

3. 在Vue文件中使用JSX

   <template>
     <div>
       <h1>Hello, {name}!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'MyComponent',
     props: {
       name: {
         type: String,
         required: true
       }
     }
   }
   </script>

注意：如果您正在使用Vue CLI，可以通过使用`@vue/babel-preset-app`预设来自动配置Babel。

   // babel.config.js
   module.exports = {
     presets: [
       '@vue/app'
     ]
   }