使用vue开发的具有翻书效果的页面

用vue写的具有翻书效果的页面

可快速使用，直接拿dist文件，修改json数据，就可以使用你的一套网站内容 项目在线效果

想要看看项目的效果是怎样的？来吧——传送门

封面效果

内容区效果 项目如何使用

一、直接使用 如果你直接使用这个，你只需要下载[dist]这个文件夹，然后找到static-data-data.json 你只需要修改data.json里面的数据，就可以直接使用该项目，无需启动项目，无需添加html，无需修改css,只需浏览器打开即可用

data.json中字段含义

frontCover: { logo: 'Wf', //封面log字段 title: '这是笔记本', //封面标题 content: '青春纪念手册', //封面内容 year: '2019' }, content: [{ isTitle: true, //是否是内容标题 isFront: true, //是否正向翻页 pre: 'first', //上一页索引名 cur: 'ref_1', //当前页索引名 next: 'ref_1_1', //下一页索引名 chapter: '第一章', //如果是标题，则代表标题章节，否则可为空 title: '这是第一章标题', //如果是标题，则代表标题题目，否则可为空 content: '' //如果不是标题，则代表内容，否则可为空 }, { ... }

*注意如果内容第一页的pre必须是first,最后一页的next必须是last,中间的每列索引可以自定义

二、开发环境使用

如果你想添加功能，请下载项目，然后根据需要修改组件 ### 首先下载项目依赖包，使用方命令。 npm install ### 服务器热部署，运行项目 npm run dev ### 项目的构建命令 npm run build ###以下命令来查看依赖关系.然后再根据具体情况划分代码块. npm run build --report