Vue 心痒痒之二用 Vue.js 写的 Ruby China 山寨版

u1452261116 · 发布于 2017年2月08日 · 最后由 mz2test 回复于 2017年3月10日 · 3929 次阅读
24491
本帖已被设为精华帖!

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

Vue刷新主页

Turbolinks刷新主页

分析

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

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

Vue

Vue进入社区页

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

Vue从主题列表进入详情页

Turbolinks进入社区页

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

Turbolinks主题列表进入详情页

分析
操作 Vue Turbolinks
主页进入社区页 479ms 470ms
社区页内部标签切换 411ms 278ms
主题页进入详情页 435ms 360ms

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

总结

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

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

共收到 23 条回复
2 huacnlee 将本帖设为了精华贴 2月08日 13:01
9401

挺想知道vue怎么与后端actioncable一起组合使用的

8509

当前是第一页,再点上一页会出现页数为负,最近也在用 vue 写 ruby china,ui 自己小调了下,等到差不多了也开源出来,先看下楼主的代码学习下。😀

20875

赞一下。我最近也在学习vue,也是拿ruby china练的手。发现vue中没有比较好用的分页组件(类似于react-paginate这样的),楼主demo中也是自己做了简单的处理。所以我就自己参考react-paginate写了一个简单的pagination组件,做了一个npm包,还算好用。楼主可以试试。
github: https://github.com/lokyoung/vuejs-paginate

96

你这数据怎么同步的?

8509

本来想做登录的,但是纯客户端密钥会暴露出来,导致安全问题,有何好的解决办法?

24491

#6楼 @sinchang RubyChina的API貌似用的Auth2的授权验证,类似于授权应用的方式,可以随时登录到论坛关闭这个应用钥匙的,而且Auth2的应用授权需要指定redirect_uri,也就是这个授权只能返回给你固定的域名网址使用,应该不会不安全吧

24491

#2楼 @kai209209 /(ㄒoㄒ)/~~我也不造。。

24491

#3楼 @sinchang 谢谢,我修复一下~

24491

#4楼 @lokyoung 主要RubyChina的接口好像没返回主题总数,所以不好定义页码,于是就采用简单的翻页,上下翻页就可以了

24491

#5楼 @hupengxing 你是说调用API的数据还是指的状态存储的数据?

9401

#8楼 @u1452261116 我知道怎么在rails集成vue的情况下使用,就是不知道怎么在单独独立出去的前端里使用

1

密钥暴露到客户端是有问题的,被别人盗用作恶被禁用的时候连带自己的应用也被禁用。

24491

#15楼 @Rei 咦。。那不是只能自己做个API接口,然后再服务端调用Ruby China的API了咩?

96

@u1452261116 哦,ruby china有API啊,我不知道。

1

#16楼 @u1452261116 我觉得是的,不确定有没有其他方法。

2

反正你最后也只会做一半放弃的

24491

#19楼 @huacnlee 熊生艰难求不拆穿,主要是我我每次想做登录看到Auth2的验证就感觉木有了冲动,我需要酝酿一下这个冲动!

96

@u1452261116 为啥我运行会报错?

$ npm run dev

ruby-china@1.0.0 dev /home/yicheng/workbench/ruby/vue-ruby-china node build/dev-server.js

[HPM] Proxy created: /api/v3 -> https://ruby-china.org

ERROR Failed to compile with 14 errors 3:44:17 PM

error in ./src/views/app.js

https://google.com/#q=import%2Fextensions Unexpected use of file extension "vue" for "./App.vue"
/home/yicheng/workbench/ruby/vue-ruby-china/src/views/app.js:3:17 import App from './App.vue'; ^

✘ 1 problem (1 error, 0 warnings)

Errors: 1 https://google.com/#q=import%2Fextensions

error

ENOENT: no such file or directory, scandir '/home/yicheng/workbench/ruby/vue-ruby-china/node_modules/node-sass/vendor'

@ ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-94798c82!./~/sass-loader!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/views/App.vue 4:14-260 13:2-17:4 14:20-266

4375 saiga 跟风安利,用 Mithril.js 实现的 Homeland Demo 中提及了此贴 2月20日 19:04
96

比较数据是并发的吗?如果不是,做一个并发的测试看看。

21346
9401kai209209 回复

vue与后端actioncable的使用可以参考这个:https://github.com/rlafranchi/pong

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册