教你使用vue-cli快速构建的小说阅读器

项目介绍

主要页面

1、首页home.vue分类展示书籍，幻灯片展示热门推荐

2、搜索search.vue，上拉加载更多

3、书籍详情book.vue加入书架、立即阅读，展示评论，同类书籍推荐

4、书籍内容read.vue，获取目录，存储翻阅的章节位置，

5、书架bookrack.vue，获取加入书架的书单

技术栈

vue、vue-cli、axios、vue-router、vuex、localStorege

分成底部导航 跟 主视图容器 router-view

首页tabbar/Home

小说楼层单独定义了组件 components/sub/item , home循环楼层分类名称，并将楼层分类id传给item组件 :booklistId='{id:item._id}' , item组件用 props: ["booklistId"] 接收分类id, 并根据分类id获取对应的数据

item.vue

mouted: this.getlist(this.booklistId.id);methods: getlist(id) { //每个分类id下对应的数据 子组件接收父组件传过来的id 获取对应的数据  bootd(id).then(res => {  var arrdata = res.data.data;  arrdata.map(item => {   this.booklist.push(item.book);  });  }); }

小说详情页components/book/Book.vue

加入书架/立即阅读(yuedu.vue)组件

book.vue

computed: {  ...mapState(['calbook','shuajiabook']) //书籍信息 书架数据[]  },  methods:{  addbook(){   this.flag=!this.flag   var book= this.calbook; // calbook 是store里存储的书籍信息【 SHEFLBOOK 】   var carbook = JSON.parse(window.localStorage.getItem('book') || '{}')   if(!this.flag){ //加入书架    carbook[book._id] = {     cover: book.cover,     flag:!this.flag,     title: book.title,     lastChapter:book.lastChapter,     id: book._id,     author:book.author,     chapterIndexCache: 0,     bookSource: 0,     pageIndexCache: 0,    }    this.setbook(false)    window.localStorage.setItem('book', JSON.stringify(carbook))   }else{    delete carbook[book._id]    this.setbook(true) //设置的布尔值    window.localStorage.setItem('book', JSON.stringify(carbook))   }  } }

立即阅读时进入小说章节 `this.$router.push({name:'read',params:{id:this.booklinks}})`

目录组件 components/sub/mulu.vue

点击目录时，路由跳转进入 read.vue 页面(小说详细章节)，并且将默认目录显示出来，书籍id通过路由传给 mulu.vue

book.vue

<router-link :to="{name:'read',params:{id:this.books._id,showMulu:true}}" class="mulu" tag="p">

read.vue包含mulu组件，默认目录隐藏，通过路由传参决定是否显示目录