技术栈

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（本地运行 访问：//localhost:8080）

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

说明

· 目前只做了第一个版本，还存在一些需要进行优化的细节问题，后续会继续进行维护更新。如果发现什么问题，也欢迎跟我联系反馈。

· 如果觉得做的还行，对您有所帮助，欢迎“start”一下。

开发中遇到的一些问题

· 多个子组件循环，父组件如何处理加载状态（精选页面）

每个子组件加载完后是同`this.$emit`通知父组件，父组件判断所有子组件加载完成后隐藏loading。

· 

跳转页面后active标记

· 

最开始使用url.indexOf来处理，后来直接发现vue-router的exact属性更好用。

· 

调用第三方api接口时跨域的问题

· 

1. 本地使用proxyTbale

    在config/index.js中添加配置：

    '/api': {        target: '//api.zhuishushenqi.com',        changeOrigin: true,        pathRewrite: {                

            '^/api': ''

        }   

    }

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

    nginx中配置：

    location /api/ {

            proxy_pass //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;          //增加的内容

}                                           //增加的内容

访问地址

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！