推荐在页面布局以及细节开发完成的时候启用, 进行局部微调操作
npm i sketch-plugin
const SketchPlugin = require('sketch-plugin');
module.exports = {
//...
plugins: process.env.VUE_APP_MODE === 'local' ? [
new SketchPlugin(),
] : []
//...
}
- 在项目根目录创建sketch文件夹, 用于存放sketch图片
- 点击toggle按钮唤起调试面板
- 输入sketch文件夹下的完整图片名称(如: 视觉稿.png), 按回车进行视觉稿加载
- 此处可以是网络在线图片(oss)
- 不能加载本地路径图片 如: file:///User/.....
- 调整视觉稿的位置, 以观察字体以及间距相关大小
- 打开/关闭视觉稿 右上角(toggle按钮)/ctrl+option+x
- 微调视觉稿位置 ↑/↓ 按钮