配置vue的jsx写法以及postcss

vue官方学习网站： https://cn.vuejs.org/

1.安装必要的插件

安装 postcss-loader autoprefixer babel-loader babel-core

cnpm install postcss-loader autoprefixer  babel-loader babel-core

2.在根目录下创造两个文件

.babelic和postcss.config.js

//postcss.config.js
const autoprefixer = require('autoprefixer')

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

上面代码的作用：经过stylus预处理css后，postcss用一系列的组件来优化，autoprefixer就是其中之一进行后处理
注：给一些需要自动加浏览器前缀的css属性加前缀
如：webkit（谷歌，Safari）-moz-（火狐），-ms-（IE）,-o-（Opera）
常见浏览器前缀

//.babelic 文件
{
  "presets":[
    "env"
  ],
  "plugins":[
    "transform-vue-jsx"
  ]
}

注："transform-vue-jsx"用来转化vue里面的jsx代码，因为vue和jsx支持的jsx代码有一定的区别，所以需要转换

3.安装上面提到的三个插件

命令行输入

cnpm install babel-preset-env babel-plugin-transform-vue-jsx autoprefixer --save

4.在webpack.config.js中配置jsx文件需要的插件

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

注：babel-loader用来处理jsx文件

5.在wbpack.config.js中配置stylus文件的地方加入一个新的对象，用来处理sourceMap生成的数据

{
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    //这里是新加进来的对象
                    {
                       loader: 'postcss-loader',
                       options: {
                           sourceMap: true,
                       }
                    },
                    'stylus-loader'
                ]
            },