vue-rem-webpack-plugin
v0.0.2
Published
Add flexible.js to template
Downloads
4
Readme
vue-rem-webpack-plugin
功能:
- 在Vue-cli项目模板文件内加入flexible.js
- 可配置按设计稿宽度设置rem基数
依赖:
- uglify-js
使用方法:
vue.config.js
const VueRemWebpackPlugin = require('vue-rem-webpack-plugin);
module.exports = {
...
configureWebpack: config => {
config.plugins.push(new VueRemWebpackPlugin({
UIWidth: 375
}));
}
}
public/index.html
<!DOCTYPE html>
<html>
<head>
<title>...</title>
<!-- rem injected -->
</head>
</html>
配置参数:
placeholder: '' flexible插入模板替换位置标示符
rootValue: 100 根节点字体与rem的比例,默认 100px === 1rem
UIWidth: 375 设计稿宽度
minify: true 插入flexible行内代码是否压缩
建议配合“postcss-pxtorem”食用