米娜桑~ ~我又来了！！这次又很作的用了 Vue 写了个 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

分析

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

总结

Vue 的渲染速度还是比不上 Turbolinks。另外跟 React 对比的话，在同样的技术背景（功能差不多，代码都是我敲的），都用了状态管理器的情况下，我没怎么感觉出来 Vue 和 React 的速度差别 ORZ。。大概是因为我写的渣吧，React 的渲染分析在我上一个帖子中大神已经帮我做了个数据对比，我这边就不贴出来了，总之结果是一致的，首屏速度落后一倍，换页速度大概百分之八十，不过就跟当初的评论一样，React 和 Vue 等前端框架存在的意义就是前后端分离、共用一套 API、DOM 操作优势等，毕竟在初始化 js 的时候 scripts 的速度就已经落后了 Turbolinks 一倍以上了呀~但是对于前端框架来说 scripts 肯定是负担最重的了，于是我觉得其实完全没有哪个比较好，哪个比较不好，用一个万金油的话来解释就是存在即真理，我们需要学习更多更丰富的新技术以供我们在往后各种各样的代码场景下选择合适的工具~

感谢各位~感谢大神们~看到大神那么认真帮我分析了，我才有动力又写了个 Vue 版的！所以精神的力量的伟大的！积极的动力来源于认可~再次感谢！！！