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;
}
}
}
Vuex数据流
参考文献
-----------------------我是乖巧求指教的分割线一下内容纯属碎碎念-------------------------------
比较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 对比多少有点不公平。
