如何 10 分钟跑通 Vue 图片预览插件vue-preview 安装到 PhotoSwipe 手势缩放【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-previewvue-preview 把 PhotoSwipe 包成了 Vue 2 的图片预览插件传一个图片数组点缩略图即弹出全屏灯箱支持双指缩放和滑动换图。做移动端看图功能的 Vue 项目用它比从零手写灯箱省至少两天。安装前的环境自查动手前花 30 秒对一遍这份清单后面 90% 的报错都栽在版本上。Node.js 8 ~ 11推荐 10node-sass 4 在 Node 12 以上编译必挂npm 5 以上Node 自带习惯 yarn 1.x 的等价替换即可Vue 2.5 及以上插件只支持 Vue 2Vue 3 项目别用Git 任意稳定版克隆仓库用从零到跑通清单都打勾下面四个小节走完就是完整的 Vue 图片预览安装流程。拉取代码先把仓库拉到本地。项目很轻插件逻辑集中在 src 目录的两个文件里后面排障你会直接看它们。git clone https://gitcode.com/gh_mirrors/vu/vue-preview cd vue-preview做完后你应该看到目录下有 index.html、webpack.config.js、package.jsonsrc 里有 index.js 与 preview.vue。装依赖代码就位后接下来把依赖一次装齐——PhotoSwipe 是运行时依赖会随命令装好其余全是构建工具。npm install或yarn install做完后 node_modules 生成且命令无红字报错即成功最常见的失败是 node-sass 编译错误说明 Node 版本偏高按清单换版本重装。打包生成构建产物完成上一步后接下来产出构建产物项目没有 serve 脚本demo 页 index.html 直接引用 dist/vue-preview.min.js必须先打包。npm run build做完后终端打印 webpack 打包摘要dist 目录里多出一个 vue-preview.min.js。启动本地服务验证产物就绪接下来起个本地静态服务打开 demo 页这是最快的验证方式。python3 -m http.server 8080Windows 上没有 python3 的换成python -m http.server 8080。做完后打开 http://localhost:8080你应该看到 Gallery one、Gallery two 两组缩略图点任意一张黑底全屏灯箱弹出顶部显示图片计数左右有切换按钮。最小可运行示例跑通 demo 只是热身。回到你自己的 Vue 项目需要写的代码就下面两段注意 w、h 必须填原图真实像素PhotoSwipe 手势缩放和切换动画都靠它们计算填错了手势会跳帧。入口注册一行// main.js import VuePreview from vue-preview Vue.use(VuePreview)组件里传一个数组即可这是最短的调用template vue-preview :slidesslides/vue-preview /template script export default { data () { return { slides: [{ src: big.jpg, // 原图 msrc: thumb.jpg, // 缩略图 w: 1200, h: 900, // 原图真实像素 alt: demo }] } } } /script页面上出现一排缩略图点任意一张大图从缩略图位置放大弹出——看到这个由小及大的过渡动画就代表这套图片预览配置生效了。延伸方向与三个高频卡点验证通过之后想继续折腾先记住下面三条能避开绝大多数坑。点缩略图没反应先查 slides 里 w、h 是否漏填再看控制台 dist/vue-preview.min.js 是否 404。想调 PhotoSwipe 观感背景透明度、点击关闭等安装时直接透传Vue.use(VuePreview, { bgOpacity: 0.85, tapToClose: true })选项就是 PhotoSwipe 原生选项。页面要放多组互不干扰的画廊一个组件渲染一个画廊放几个vue-preview就传几份 slides。【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考