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;
    }
  }
}

Vuex数据流

参考文献

---

Vue.js官方GitHub

Vue.js

Vuex

vue-router 2

Paste_Image.png

-----------------------我是乖巧求指教的分割线一下内容纯属碎碎念-------------------------------

---

比较Vue与Turbolinks渲染的速度

---

首屏速度（主页）

---

Vue

---

Vue刷新主页

Turbolinks

---

Turbolinks刷新主页

分析

---

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

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

---

Vue

---

Vue进入社区页

Vue从默认标签切换到优质帖子

Vue从主题列表进入详情页

Turbolinks

---

Turbolinks进入社区页

Turbolinks从默认标签切换到优质帖子

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 对比多少有点不公平。