项目作者: hql123

项目描述 :
使用Vue.js框架搭建的ruby china山寨版,集成vue-router+vuex等
高级语言: JavaScript
项目地址: git://github.com/hql123/vue-ruby-china.git


Vue Ruby China

Ruby China 山寨版 (Vue框架)

Demo

https://hql123.github.io/

项目简介

这个项目还是以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

  1. # install dependencies
  2. npm install
  3. # serve with hot reload at localhost:8080
  4. npm run dev
  5. # build for production with minification
  6. npm run build
  7. # run unit tests
  8. npm run unit
  9. # run e2e tests
  10. npm run e2e
  11. # run all tests
  12. npm test

nginx配置

  1. http {
  2. include mime.types;
  3. default_type application/octet-stream;
  4. server {
  5. listen 9000;
  6. server_name ruby-china.local;
  7. root ../ruby-china/dist/; //项目根目录
  8. index index.html;
  9. location ^~ /static/ {
  10. gzip_static on;
  11. expires max;
  12. add_header Cache-Control public;
  13. }
  14. location / {
  15. try_files $uri $uri/ /index.html;
  16. }
  17. location /api/v3{
  18. proxy_pass https://ruby-china.org/api/v3;
  19. proxy_redirect off;
  20. proxy_buffering off;
  21. }
  22. }
  23. }

Vuex数据流



参考文献

Vue.js官方GitHub

Vue.js

Vuex

vue-router 2