├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js ├── nginx.conf ├── prod.env.js └── test.env.js ├── index.html ├── package.json ├── public ├── logo-120.png ├── logo-144.png ├── logo-152.png ├── logo-192.png ├── logo-384.png └── logo-48.png ├── src ├── assets │ ├── js │ │ └── bootstrap.min.js │ ├── logo.png │ └── stylesheets │ │ ├── app.css │ │ └── markdown.css ├── components │ ├── Footer.vue │ ├── Header.vue │ ├── Item.vue │ ├── ItemList.vue │ ├── NodeItem.vue │ ├── NodeList.vue │ ├── Pagination.vue │ ├── RepliesList.vue │ ├── ReplyItem.vue │ ├── Sider.vue │ ├── Spinner.vue │ └── TabHeader.vue ├── main.js ├── router.js ├── store │ ├── actions │ │ ├── api.js │ │ ├── node.js │ │ ├── reply.js │ │ └── topic.js │ ├── getters.js │ ├── index.js │ ├── modules │ │ ├── index.js │ │ ├── node.js │ │ ├── reply.js │ │ └── topic.js │ └── mutation-types.js └── views │ ├── App.vue │ ├── Dashboard.vue │ ├── Sites.vue │ ├── TopicDetail.vue │ ├── Wiki.vue │ ├── app.js │ └── createListView.js ├── static └── .gitkeep └── test ├── e2e ├── custom-assertions │ └── elementCount.js ├── nightwatch.conf.js ├── runner.js └── specs │ └── test.js └── unit ├── .eslintrc ├── index.js ├── karma.conf.js └── specs └── Hello.spec.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false, 5 | "env": { 6 | "test": { 7 | "plugins": [ "istanbul" ] 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | extends: 'airbnb-base', 8 | // required to lint *.vue files 9 | plugins: [ 10 | 'html' 11 | ], 12 | // check if imports actually resolve 13 | 'settings': { 14 | 'import/resolver': { 15 | 'webpack': { 16 | 'config': 'build/webpack.base.conf.js' 17 | } 18 | } 19 | }, 20 | // add your custom rules here 21 | 'rules': { 22 | // don't require .vue extension when importing 23 | 'import/extensions': ['error', 'always', { 24 | 'js': 'never', 25 | 'vue': 'never' 26 | }], 27 | // allow debugger during development 28 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | test/unit/coverage 6 | test/e2e/reports 7 | selenium-debug.log 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Ruby China 2 | 3 | > Ruby China 山寨版 (Vue框架) 4 | 5 | ## Demo 6 | 7 | https://hql123.github.io/ 8 | 9 | ## 项目简介 10 | 11 | 这个项目还是以Ruby China为范本搭建的模仿平台,Vue.js框架+Bootstrap框架开发,集成vue-cli + vuex + vue-router + vue-resource,大概还会尝试加入服务端渲染的SSR。这个项目我个人觉得挺适合Vuex的初学者尝试的,功能简单逻辑也不复杂,对于actions、 getters、mutations、modules的单向数据流模式应该都使用得挺清晰的。 12 | 13 | ## 关于项目目录 14 | 15 | 当初写 React 的 Ruby China 山寨版的时候有人提出了 components 是UI组件,功能主要是可复用,纯粹的渲染组件,尽量不掺杂vuex或redux的使用到这里面,我深以为然!于是在这个项目里面可以看到 components 里面所有的组件都是单纯的渲染可复用组件,在 views 的组件里面定义好 vuex 的 state 通过 props 传过去使用,这是一个好习惯呀! 16 | 17 | ## Build Setup 18 | 19 | ``` bash 20 | # install dependencies 21 | npm install 22 | 23 | # serve with hot reload at localhost:8080 24 | npm run dev 25 | 26 | # build for production with minification 27 | npm run build 28 | 29 | # run unit tests 30 | npm run unit 31 | 32 | # run e2e tests 33 | npm run e2e 34 | 35 | # run all tests 36 | npm test 37 | ``` 38 | 39 | ## nginx配置 40 | 41 | ```bash 42 | http { 43 | include mime.types; 44 | default_type application/octet-stream; 45 | server { 46 | listen 9000; 47 | server_name ruby-china.local; 48 | root ../ruby-china/dist/; //项目根目录 49 | index index.html; 50 | location ^~ /static/ { 51 | gzip_static on; 52 | expires max; 53 | add_header Cache-Control public; 54 | } 55 | location / { 56 | try_files $uri $uri/ /index.html; 57 | } 58 | location /api/v3{ 59 | proxy_pass https://ruby-china.org/api/v3; 60 | proxy_redirect off; 61 | proxy_buffering off; 62 | } 63 | } 64 | } 65 | ``` 66 | 67 | ##Vuex数据流 68 | 69 |
70 |
71 |