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'
]
},