前言

使用vue框架仿知乎日报移动端，本项目仅是出于学习目的。主要是学习vue构建SPA页面，以及webpack和vue-router的用法。本项目包含5个单页，使用了自定义组件和自定义指令进行构建。

技术栈

vue2+webpack+vue-router+axios+ES5/6+flex

说明

• 图标库使用 Iconfont-阿里巴巴矢量图标库
• 移动布局采用flex布局
• 使用自定义指令 Chickoutside 完成侧栏显示和隐藏
• 使用自定义指令 Time 完成时间转换
• 使用better-scroll实现上拉加载和下拉刷新

运行

运行时需要本地支持node和npm，相关步骤如下：

• 安装依赖

npm install

• 运行

npm run start

• 打包

npm build

API

• 使用了izzyleung提供的知乎日报-API-分析文档
• 使用了node的request做代理,监听的本地端口如下：

const hostname='127.0.0.1';
const port=8010;//信息代理
const imgPort=8011;//图片代理

若需要更改，可在proxy.js做更改

基本功能

• 首页导航 -- 完成
• 首页侧栏 -- 完成
• 文章详情页 -- 完成
• 主题列表页 -- 完成
• 评论页 -- 完成
• 主编信息页 -- 完成

总结和后续

• 在开发过程中踩了不少坑，明白了vue的基本开发流程和主要思想，估计会做一个详细笔记(挖坑。。。)
• 在这过程中也明白了还是做一个实际的东西比较适合自己去学习，估计以后学习也会尽量做一个实际的东西出来
• 由于在开发过程中使用了代理,无法在githubpage中展示出来(搜索无果),所以应该会搭在服务器里(继续挖坑。。。)
• 本项目也有一些细节代完善，应该会继续更新
• 由于数据来源问题，登陆的相关页面并没有开发，在思考要不要做个架子

参考资料

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇
• Vue.js实战
• 当 better-scroll 遇见 Vue