Vue.js 友人帐之 RubyChina 仿写

1,544 阅读3分钟
原文链接: www.jianshu.com

Demo (hql123.github.io)

项目地址github.com/hql123/vue-…

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