4 步跑通 Vue-preview图片预览不再手写弹窗【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview跟着这份指南10 分钟完成 Vue-preview 安装看到一个能滑动、能缩放的图片预览组件。全程就几条命令不用记概念跟着做就行。它到底能干嘛点一下缩略图进全屏左右滑动换下一张体验就像刷照片墙双指捏合放大看细节桌面端滚轮同样可以左上角计数器随时告诉你第 2 张 / 共 5 张关闭预览时触发close事件方便你回写页面状态底层是 Vue.js 组件 PhotoSwipe 看大图引擎手势、缩放、动画全是现成的你只管喂数据。动手前 30 秒检查Node.js 10 或 12推荐 12node-sass 4.x 只支持到这个版本段验证node -vnpm 6 及以上验证npm -vgit验证git --versionVue-preview 安装从克隆到看到图片克隆仓库 这一步只是把代码拉到本地完成后当前目录会多出一个 vue-preview 文件夹。git clone https://gitcode.com/gh_mirrors/vu/vue-preview cd vue-preview装依赖 ⏳把 webpack、node-sass 等开发依赖装齐。node-sass 要现场编译原生模块这一步最慢别慌就这一步。npm install用 yarn 的话换成yarn install即可。构建插件 跑一次构建脚本入口 src/index.js 会被 webpack.config.js 打包成dist/vue-preview.min.js产物可以直接被页面引用。npm run build结束后dist/目录里应该能看到这个文件没有就往上翻构建报错。打开演示页用浏览器直接打开 index.html不需要起服务——页面已经引用了 Vue CDN 脚本和刚构建出的插件。你会看到两张图片墙。点任意缩略图进全屏滑一下换图、双指捏一下放大、左上角看位置桌面端按方向键换图Esc 退出。到这里预览效果已经跑通了。挪进自己的项目图片预览插件 怎么用压缩起来就三件事引脚本、注册组件、喂数据。Vue-preview 配置方法没有玄学核心就是 slides 数组。script srcvue.min.js/script script srcdist/vue-preview.min.js/script div idapp vue-preview :slidesslides closeonClose/vue-preview /divVue.use(VuePreview) new Vue({ el: #app, data: { slides: [ { src: a_big.jpg, msrc: a_thumb.jpg, w: 1200, h: 900, title: 第一张 } ] } })每个 slide 五个字段src大图、msrc缩略图、w/h大图宽高、title说明文字。构建产物是 UMD 格式VuePreview直接挂在全局上换成你的图床地址就能跑。跑不通先看这里 ️npm install 卡在 node-sass它只兼容 Node ≤12。nvm install 12 nvm use 12之后删掉 node_modules 重装。打开 index.html 白屏多半是没构建或路径不对确认dist/vue-preview.min.js存在再看浏览器控制台有没有 404。缩略图全是裂图演示用的 flickr 图床在部分网络下访问不了把 index.html 里的src/msrc换成你自己的图片地址。再跑不通就把node -v和完整报错贴到仓库 issue 区比盲猜快得多。下一步想调样式或加自定义按钮去翻 src/preview.vue 看 pswp 容器是怎么挂载的循环模式、下载按钮这类进阶选项在 PhotoSwipe 官方文档里有完整清单。现在打开你自己的项目页面把两张演示图换成你的图今晚就能看到图片墙亮起来。【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
