1.蓝湖切图

1. 蓝湖官网下载PS插件直接安装好（蓝湖官网主页以后点击右上角的下载）
2. 打开PS导入分好图层的psd
3. 窗口->扩展功能->蓝湖->登录

4. 选择设计大小，项目名称
5. 选择形状图层标记为切图（注意不要选文字，文字会变成图片放上去，不会显示大小和字体）

6.点击上传蓝湖

7.还可以导出为代码

可以看到原来设计图是加粗的，生成代码并没有加粗，所以生成的代码还是不要直接使用，作为参考就行

2.适配（postcss-px-to-viewport）

1. 下载 npm install postcss-px-to-viewport --save-dev
2. 根目录下建 postcss.config.js

module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            unitToConvert: 'px',
            viewportWidth: 1920,
            unitPrecision: 5,
            propList: ['*'],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /node_modules/,
            landscapeUnit: 'vw',
        }
    }
}

启动项目

npm i

npm run serve