1、使用vue-cli创建项目
vue create my-app
2、安装lib-flexible与postcss-pxtorem依赖
npm install lib-flexible -S
npm install postcss-pxtorem -D
安装成功后,在package.json文件可找到依赖相关版本信息,如图所示
3、在main.js引入 lib-flexible
import "lib-flexible/flexible";
4、找到目录 :node_modules/lib-flexible/flexible.js ,修改flexible.js; (不要直接搜索,搜不到的)(配置移动端适配跳过这一步骤)
5、在根路径中 (与 main.js 平级) 创建 .postcssrc.js 文件
// postcss 配置文件
module.exports = {
// 配置需要使用的postcss插件
plugins: {
'postcss-pxtorem': {
rootValue: 144, // 这里应该 UI 图的十分之一
propList: ['*']
}
}
}
6、经过上面的步骤就全部配置好了,接下来就可以根据UI图写了