V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lingxueyu
V2EX  ›  分享创造

使用 Vue.js 写的 RubyChina 山寨版

  •  
  •   lingxueyu · 2017-02-08 20:22:47 +08:00 · 2929 次点击
    这是一个创建于 2829 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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

    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 对比多少有点不公平。而且前端框架的优势也是有很多的,比如前后端分离、共用一套 API 、 DOM 操作优势等。

    总之感谢各位~

    4 条回复    2017-02-11 01:04:25 +08:00
    hanxiV2EX
        1
    hanxiV2EX  
       2017-02-08 21:54:21 +08:00
    不错哦。
    zhihaofans
        2
    zhihaofans  
       2017-02-08 23:51:28 +08:00 via Android
    不错,但最后的链接对手机用户有点不友好。。
    截图: https://ooo.0o0.ooo/2017/02/08/589b3e6c3706c.png
    leefly
        3
    leefly  
       2017-02-09 15:46:58 +08:00
    vue-routerv -> vue-router
    moxid
        4
    moxid  
       2017-02-11 01:04:25 +08:00 via iPhone
    我不得不说你真折得起折腾
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5600 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 06:05 · PVG 14:05 · LAX 22:05 · JFK 01:05
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.