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 传过去使用,这是一个好习惯呀!
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
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 耗时 947 ms, Turbolinks 耗时 572 ms ,可以看到同样是首次进入刷新首页, 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 操作优势等。
总之感谢各位~
1
hanxiV2EX 2017-02-08 21:54:21 +08:00
不错哦。
|
2
zhihaofans 2017-02-08 23:51:28 +08:00 via Android
不错,但最后的链接对手机用户有点不友好。。
截图: https://ooo.0o0.ooo/2017/02/08/589b3e6c3706c.png |
3
leefly 2017-02-09 15:46:58 +08:00
vue-routerv -> vue-router
|
4
moxid 2017-02-11 01:04:25 +08:00 via iPhone
我不得不说你真折得起折腾
|