{"id":13536429,"url":"https://github.com/microzz/vue-cnode","last_synced_at":"2025-05-08T20:56:19.565Z","repository":{"id":202365342,"uuid":"88171522","full_name":"microzz/vue-cnode","owner":"microzz","description":"🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js","archived":false,"fork":false,"pushed_at":"2017-04-19T09:06:03.000Z","size":242,"stargazers_count":252,"open_issues_count":6,"forks_count":62,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-31T18:11:15.928Z","etag":null,"topics":["axios","cnode","css3","html5","sass","scss","vue","vue-cnode","vue-router","vue2","vuejs","vuejs2","vuex","vuex2","webpack"],"latest_commit_sha":null,"homepage":"https://microzz.com/vue-cnode/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microzz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-04-13T14:06:42.000Z","updated_at":"2025-01-03T08:23:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"0dd8c052-1551-4dab-b04e-24009c86d798","html_url":"https://github.com/microzz/vue-cnode","commit_stats":null,"previous_names":["microzz/vue-cnode"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-cnode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-cnode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-cnode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microzz%2Fvue-cnode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microzz","download_url":"https://codeload.github.com/microzz/vue-cnode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253149409,"owners_count":21861718,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","cnode","css3","html5","sass","scss","vue","vue-cnode","vue-router","vue2","vuejs","vuejs2","vuex","vuex2","webpack"],"created_at":"2024-08-01T09:00:39.138Z","updated_at":"2025-05-08T20:56:19.545Z","avatar_url":"https://github.com/microzz.png","language":"Vue","readme":"# Vue.js打造一个开源的CNode社区\n\nVue.js打造一个开源的CNode社区，实现了浏览、发帖、收藏、回复、点赞、个人中心等等功能。\n\n## 源代码\n源代码地址：👉 https://github.com/microzz/vue-cnode\n\n欢迎大家star和fork😄\n\n## 预览\n在线预览地址：👉 https://microzz.com/vue-cnode/\n\n\n## 技术栈\r* **Vue2.0**：前端页面展示。\r\n* **Vuex**：Vuex，实现不同组件间的状态共享\n* **vue-router**：页面路由切换\n* **axios**：一个基于 `Promise` 的 HTTP 库，向后端发起请求。\r* **Express**、**Koa2**：因为vue-cli生成的项目是基于**express**的，所以在开发阶段我使用的是它，但是真正上线生产环境我换成了**Koa2**。\n* **Moment.js**：一个时间处理的库，方便对时间进行格式化成需要的格式，如主题、回复时间显示\"* 分钟前、* 小时前、*天前\"等等。\r* **ES6**、**ES7**：采用ES6语法，这是以后的趋势。箭头函数、Promise等等语法很好用。\n* **localStorage**：保存用户信息。\n* **Canvas**：页面顶部小雪花效果。\r* **Webpack**：vue-cli自带Webpack，但是需要自己改造一下，比如要对需要安装sass相关loader，vue-cli已经配置好了webpack，你只需要安装依赖就可以，使用的时候只需要`\u003cstyle lang=\"scss\"\u003e\u003c/style\u003e`。\n* **SASS**(**SCSS**)：用SCSS做CSS预处理语言，有些地方很方便，个人很喜欢用。(详看👉[SASS用法指南](https://microzz.com/2017/03/18/sass/))\r* **flex**：flex弹性布局，**简单**适配手机、PC端。\r* **CSS3**：CSS3过渡动画及样式。\n\n## 总结\r1. 组件状态多了用Vuex管理很方便，引用 Redux 的作者 Dan Abramov 的话说就是：\n\u003e Flux 架构就像眼镜：您自会知道什么时候需要它。\r\r2. 事先一定要先想好整个页面组成，怎样去分组件开发，这样在开发阶段会事半功倍。\n3. Moment.js在Vue中用ES6的方式引入会有问题，可以尝试在main.js尝试这样`import moment from 'moment'` `Vue.prototype.moment = moment;`给Vue的原型上添加moment，这样就可以在Vue的实例中随意使用它了。\n4. 项目结构如下图\n\n![Vue-CNode by microzz.com](https://github.com/microzz/preview/blob/master/vue_cnode.png?raw=true)\n\n\r\n\n## 时间轨迹\n* **4.13**：基本功能完成，后续完成登录后的操作。\n\n* **4.14**：完成登录以及侧边栏。\n\n* **4.15**：增加收藏\n\n* **4.16**：加入回复、单条回复、点赞。项目完成。\n\n\n## About\r源代码地址：👉 [GitHub](https://github.com/microzz/vue-cnode)\r\r个人网站：👉 [microzz.com](https://microzz.com/)\r\rGitHub：👉 [microzz](https://github.com/microzz)\n\n## Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8080\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n```\n\n\n","funding_links":[],"categories":["Demo示例","Vue","Awesome-CNode"],"sub_categories":["Vue"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrozz%2Fvue-cnode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrozz%2Fvue-cnode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrozz%2Fvue-cnode/lists"}