企业官网建设流程全解析

5分钟搭好 Vue 图片预览：vue-preview 完整安装与上手指南

【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview

vue-preview 是一款 Vue 图片预览插件：把一组缩略图变成可滑动、可缩放的全屏相册。跟着本文操作一遍，你就能把这个仓库装起来、跑起来，并接入自己的 Vue 项目。

它适合什么场景

如果你的页面里有商品图、相册、截图列表这类缩略图，希望用户点一下就能全屏查看，还想自带左滑换图、双指缩放、位置计数这些手势体验，这个插件就是现成的。它底层封装了 PhotoSwipe，移动端和桌面端都能用，一套组件搞定缩放和切换交互。整个技术栈是 Vue 2 + Webpack，源码只有两个文件，装完顺手把源码读完也没负担。

环境要求：三个前置条件

装好之后，在终端跑一条命令确认版本：

node -v && npm -v

Node 版本如果偏高（16 以上），建议先用 nvm 切到 14 再往下走，能省掉一大段编译报错的排查时间。

5分钟跑通：克隆、构建、启动

环境确认后，把仓库克隆下来、装依赖、构建插件产物，一条命令链走完：

# 克隆仓库 git clone https://gitcode.com/gh_mirrors/vu/vue-preview cd vue-preview # 安装依赖 npm install # 构建产物，输出 dist/vue-preview.min.js npm run build

构建完成后，演示页index.html会直接引用这份产物，所以用项目自带的 webpack-dev-server 起个本地服务就能看效果：

npx webpack-dev-server --open

浏览器自动打开后，你会看到仓库自带的两个演示相册。

如果你想在自己的 Vue 项目里用，从 npm 安装后在入口文件注册插件：

npm i vue-preview

import Vue from 'vue' import VuePreview from 'vue-preview' Vue.use(VuePreview)

然后在任意组件里写最小示例——slides数组每项只需要src（大图）、msrc（缩略图）、w/h（大图真实宽高）：

<template> <vue-preview :slides="slides"></vue-preview> </template> <script> export default { data () { return { slides: [ { src: '/img/1.jpg', msrc: '/thumb/1.jpg', alt: '图1', title: '图1', w: 1200, h: 800 }, { src: '/img/2.jpg', msrc: '/thumb/2.jpg', alt: '图2', title: '图2', w: 1200, h: 800 } ] } } } </script>

宽高数据最好填真实值，填错了缩放动画会漂移。

一键验证：装好了应该看到什么

对着验收标准逐条检查：

• 页面上正常渲染出一排缩略图
• 点击任意一张 ✅ 弹出黑色背景的全屏预览，左上角出现1/2这样的位置计数
• 左右滑动或按方向键切换图片，双击可放大
• 按 Esc 或点右上角关闭回到页面，控制台打印一条 close 日志

两条常见的不通过信号：缩略图全空白，通常是忘了npm run build，产物不存在；点击缩略图没反应，多半是slides里漏了w/h字段。

下一步可以做什么

• 定制预览风格：Vue.use(VuePreview, { ... })支持传入选项，比如bgOpacity改背景透明度、tapToClose改点击关闭、captionEl: false隐藏标题栏
• 监听关闭事件：组件提供close事件，适合做埋点或状态清理
• 读源码：src/ 下只有两个核心文件——index.js负责注册插件和初始化 PhotoSwipe，preview.vue负责相册结构，想改默认行为就从这里入手

把预览调成自己喜欢的样子，就是接下来最有趣的部分。

【免费下载链接】vue-previewA Vue Integrated PhotoSwipe Image Preview Plugin项目地址: https://gitcode.com/gh_mirrors/vu/vue-preview