Vue - 配置vue的jsx写法以及postcss

安装：

npm i postcss-loader autoprefixer babel-loader babel-core

有可能我们的node_modules中已经安装了上面的一些包。

我们在工程目录根目录创建：

.babelrc
postcss.config.js

如果有就不需要创建。
一个是给babel用的，一个是个postcss用的。

在postcss.config.js中写：

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer()
  ]
}

这个方法做什么用呢？
postcss是帮我们后处理我们的CSS的，也就是说CSS已经编译完成了，通过stylus编译为CSS之后，我们再通过postcss去优化我们的css代码。

SASS等工具：源代码 -> 生产环境 CSS
PostCSS：源代码 -> 标准 CSS -> 生产环境 CSS

优化的过程就是通过一系列的组件去优化。那么我们现在使用的组件是autoprefixer。
autoprefixer会处理，需要加浏览器前缀的CSS属性，帮我们加上那些前缀。

Vue也可以支持写jsx的代码。我们可以通过.babelrc去配置。
首先安装包：

npm i babel-preset-env babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx

在 webpack.config.js 中去加上这部分的配置。

module->rules中去添加：

    {
        test: /\.jsx$/,
        use: [
          'babel-loader'
        ],
      }, 

    {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          {
             loader: 'postcss-loader',
             options: {
               sourceMap: true,   // 我们使用stylus-loader,它会给我们自动生成sourceMap
             }
          },
          'stylus-loader'
        ],
      },