使用 Vue.js 写的 RubyChina 山寨版

Demo ( https://hql123.github.io)

项目地址 （ https://github.com/hql123/vue-ruby-china ）

基于 Vue2.0 仿写的 RubyChina ，目前实现模块：

• RubyChina 主页
• 主题列表类型切换
• 节点列表
• 根据节点切换主题列表
• 主题详情
• 主题评论列表

这个项目简单使用了 Vuex 和 vue-routerv ，适合我们这样的初学者！但是由于是初学，所以代码有很多不尽如人意的地方，请大家多多包涵~

项目简介

这个项目还是以 Ruby China 为范本搭建的模仿平台， Vue.js 框架+Bootstrap 框架开发，集成 vue-cli + vuex + vue-router + vue-resource ，大概还会尝试加入服务端渲染的 SSR 。这个项目我个人觉得挺适合 Vuex 的初学者尝试的，功能简单逻辑也不复杂，对于 actions 、 getters 、 mutations 、 modules 的单向数据流模式应该都使用得挺清晰的。

关于项目目录

当初写 React 的 Ruby China 山寨版的时候有人提出了 components 是 UI 组件，功能主要是可复用，纯粹的渲染组件，尽量不掺杂 vuex 或 redux 的使用到这里面，我深以为然！于是在这个项目里面可以看到 components 里面所有的组件都是单纯的渲染可复用组件，在 views 的组件里面定义好 vuex 的 state 通过 props 传过去使用，这是一个好习惯呀！

Build Setup

# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 

nginx 配置

http { include mime.types; default_type application/octet-stream; server { listen 9000; server_name ruby-china.local; root ../ruby-china/dist/; //项目根目录 index index.html; location ^~ /static/ { gzip_static on; expires max; add_header Cache-Control public; } location / { try_files $uri $uri/ /index.html; } location /api/v3{ proxy_pass https://ruby-china.org/api/v3; proxy_redirect off; proxy_buffering off; } } } 

参考文献

Vue.js 官方 GitHub

Vue.js

Vuex

vue-router 2

以下内容纯属碎碎念~

比较 Vue 与 Turbolinks 渲染的速度

首屏速度（主页）

Vue

Turbolinks

分析

减去空白时间后， Vue 耗时 947 ms, Turbolinks 耗时 572 ms ，可以看到同样是首次进入刷新首页， Turbolinks 大幅领先了。

换页速度（主页进入社区页、社区页内部标签切换、主题列表进入详情页）

Vue

Turbolinks

分析

| 操作 | Vue | Turbolinks | | :-------- | --------: | :--: | | 主页进入社区页 | 479ms | 470ms | | 社区页内部标签切换 | 411ms | 278ms | | 主题页进入详情页 | 435ms | 360ms |

以上表格数据我们可以看到，在换页速度中， Turbolinks 占了小幅领先优势。

总结

当初我写了一个 React 版本的 RubyChina ，功能和现在这个是一样的，放到 Ruby China 论坛上的时候，有个大神帮忙做了客户端渲染速度和服务端渲染的对比，当时也是这么一个情况，首屏速度落后一倍，换页速度大概百分之八十,前端渲染在初始化的时候花在 js 上面的时间远远大于服务端，大神解释是因为 Turbolinks 执行 js 的时间更少，秘诀是把 AJAX 响应逻辑隐藏在服务端，只有调用的时候才需要浏览器解析。 Ruby China 本身是使用 Rails 框架搭载的，评论有人说最后总结出来前端渲染比服务端渲染慢，这压根么有意义。我想说：存在即真理。 从表面数据来看 Turbolinks 比 Vue 、 React 这俩种前端框架渲染速度快，但是我们可以看到 Vue 、 React 主要实在 scripts 上面花费了进一倍的时间，这对于前端框架来说跟不需要在 scripts 上面花时间的 Turbolinks 对比多少有点不公平。而且前端框架的优势也是有很多的，比如前后端分离、共用一套 API 、 DOM 操作优势等。

总之感谢各位~