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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2748 天前的主题，其中的信息可能已经有所发展或是发生改变。

一、开发背景

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

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

项目地址：v2ex-vue

二、项目演示

分类页

topic

文章页 & 用户页

article & user

懒加载

路由

首页默认显示最新的帖子

首页 /
全部 /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 https://www.v2ex.com/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：正在找工作，北京有坑的欢迎联系

11 条回复 • 2017-05-18 10:22:32 +08:00

lovelypig5

2017-05-16 14:25:37 +08:00

首次加载 50s，做个压缩，提个公用，开个 gzip 啥的

bw2

2017-05-16 14:52:36 +08:00

@lovelypig5 线上运行的是开发代码，不是编译后的代码。部署的话涉及到跨域，那个 nginx 反向代理配置不知为啥没有生效。搞定了这个，就直接用 nginx 部署了。

bw2

2017-05-16 16:36:23 +08:00

nginx 已经配置好了，速度噌噌噌的往上升 https://47.93.252.247/#/

holy_sin

2017-05-16 18:48:53 +08:00

我上视频了，好棒

sensui7

2017-05-16 21:24:02 +08:00

不是 api 吗,还要跨域???

bw2

2017-05-17 07:10:23 +08:00

@sensui7 你可以在 localhost 下测试一下 V2EX 提供的 API，是不允许跨域的

bw2

2017-05-17 07:54:07 +08:00

@holy_sin 233333333

sivacohan

2017-05-17 08:50:47 +08:00 via Android

lee#chengantech.com

简历发一份吧

bw2

2017-05-17 15:19:16 +08:00

@sivacohan 能保持联系吗？这周还有一个 NodeJS 的项目要做，下周再把简历发给你。

sivacohan

2017-05-17 21:07:15 +08:00 via Android

@bw2

可以啊。用我的 ID 搜微信。

bw2

2017-05-18 10:22:32 +08:00

@sivacohan 好的