用 Vue 全家桶二次开发 V2EX 社区

一、开发背景

为了全面的熟悉 Vue+Vue-router+Vuex+axios 技术栈，结合 V2EX 的开放 API 开发了这个简洁版的 V2EX。 在线预览

API 来自官方以及djyde的整理。

项目地址：v2ex-vue

二、项目演示

分类页

文章页 & 用户页

懒加载

路由

首页默认显示最新的帖子

• 首页 /
• 全部 /topic
• 分类 /topic/:name
• 文章 /article/:id
• 用户 /user/:name

三、项目优势

• 界面设计简洁
• 沉浸式的阅读体验
• 可以按分类 /文章 /用户浏览
• 在文章页显示用户评论
• 图片使用懒加载模式
• 总之，实现了你看帖所需要的一切
• 项目基于 Vue 全家桶
• 适配移动端
• 有完善的文档注释
• 有疑问欢迎提交 issue
• 感兴趣的欢迎给颗 star ^_^
• ...

四、项目缺陷

• 不支持翻页（没有找到翻页的 API ）
• 在线演示首次加载较慢（为了能跨域显示最新内容，直接用 npm run dev 部署的）
• 打算使用 nginx 部署，但是在代理的时候遇到了问题（ https 部署成功，反向代理失败）
• 配置文件在下面，希望大家帮忙看看问题在哪
• ...

 server { listen 80; listen 443; server_name localhost; ssl on; ssl_certificate /etc/nginx/ssl/nginx.crt; ssl_certificate_key /etc/nginx/ssl/nginx.key; location /api/ { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass api/; } } 

五、项目安装

项目兼容 IE9+，使用项目前，请确保安装好了 NodeJS。

 git clone https://github.com/bergwhite/v2ex-vue.git // 克隆项目 cd v2ex-vue // 进入项目目录 npm install // 安装依赖 npm run dev // 运行项目 

六、解决方案

6.1 跨域方案

本地开发中，通过配置代理表实现跨域

 config/index.js ------------------- proxyTable: { '/api': { target: 'https://www.v2ex.com', changeOrigin: true, pathRewrite: { '^/api': '/api' } } } 

6.2 Vuex 支持 IE

直接引入 Vuex 无法在 IE 中显示，引入 babel-polyfill 来兼容 IE

 npm install babel-polyfill --save-dev // 安装 babel-polyfill src/main.js --------------- import 'babel-polyfill' // 在 vue 主文件中导入 

PS：正在找工作，北京有坑的欢迎联系