脚本宝典收集整理的这篇文章主要介绍了

Vue.js开发的读书WebAPP

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前言

初学Vue.js,官网的文档写的很清楚,看着不难。俗话说:光说不练假把式。程序猿学个新东西还是要敲出来看看效果比较好。最开始是想搞个音乐类的,毕竟天天都会听歌,但发现搞音乐类的太多了,我再搞个多没意思。考虑了一下,还是搞个看书的吧,这个还是很少有人搞的。找了找发现只有追书神器的api暴露出来了,起点之类的api找不到。最终效果因为api数据的限制,参考了起点中文网app、起点中文网web端,以及追书神器web端,再加上自己的一些想法搞出来的。项目中的小图标使用的是阿里巴巴的矢量图标库Iconfont

技术栈

Vue2 + vuex + vue-router + webpack + ES6 + axios + sass

源码地址

https://github.com/XNAL/ReadMore

项目运行

git clone https://github.com/XNAL/ReadMore
cd ReadMore
npm install

npm run dev(本地运行 访问:http://localhost:8080)

npm run build (部署上线 生成的dist文件夹放到服务器中即可:需要配置代理,如使用nginx,可参考下面问题中的配置)

说明

  • 目前只做了第一个版本,还存在一些需要进行优化的细节问题,后续会继续进行维护更新。如果发现什么问题,也欢迎跟我联系反馈。
  • 如果觉得做的还行,对您有所帮助,欢迎“start”一下。

开发中遇到的一些问题

  • 多个子组件循环,父组件如何处理加载状态(精选页面)
每个子组件加载完后是同`this.$emit`通知父组件,父组件判断所有子组件加载完成后隐藏loading。
  • 跳转页面后active标记

最开始使用url.indexOf来处理,后来直接发现vue-routerexact属性更好用。
  • 调用第三方api接口时跨域的问题

1. 本地使用proxyTbale

    在config/index.js中添加配置:
    
    '/api': {
        target: 'http://api.zhuishushenqi.com',
        changeOrigin: true,
        pathRewrite: {                
            '^/api': ''
        }   
    }
    

2. 部署服务器后通过nginx代理

    nginx中配置:
    
    location /api/ {
            proxy_pass http://api.zhuishushenqi.com/;
        }

3. 调用接口时只需要以`/api`开头就可以
  • 服务器部署后vue-router的虚拟路由在刷新时出现404页面

修改nginx配置:

location / {
        try_files $uri $uri/ @router;          //增加的内容
        root /home/don/book;
        index index.html;
}
    
location @router {                          //增加的内容
    rewrite ^.*$ /index.html last;          //增加的内容
}                                           //增加的内容

访问地址

图片描述

部分截图

我的书架

图片描述图片描述

精选

图片描述

分类

Vue.js开发的读书WebAPP-脚本宝典
Vue.js开发的读书WebAPP-脚本宝典
图片描述

排行

图片描述

书籍详情

图片描述

看书

Vue.js开发的读书WebAPP-脚本宝典
Vue.js开发的读书WebAPP-脚本宝典
Vue.js开发的读书WebAPP-脚本宝典
图片描述

搜索

Vue.js开发的读书WebAPP-脚本宝典
图片描述

总结

以上是脚本宝典为你收集整理的

Vue.js开发的读书WebAPP

全部内容,希望文章能够帮你解决

Vue.js开发的读书WebAPP

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过