{"id":13536322,"url":"https://github.com/lzxb/vue-cnode","last_synced_at":"2025-05-16T18:10:24.626Z","repository":{"id":91436981,"uuid":"62640405","full_name":"lzxb/vue-cnode","owner":"lzxb","description":"基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区，使用webpack2打包","archived":false,"fork":false,"pushed_at":"2018-10-26T01:42:08.000Z","size":1839,"stargazers_count":1117,"open_issues_count":0,"forks_count":312,"subscribers_count":75,"default_branch":"master","last_synced_at":"2025-04-12T17:46:30.180Z","etag":null,"topics":["cnodejs","vue","vue-cnode","vue-cnodejs","vue-components","vue-demo","vue-js","vue-router","vue-router2","vue-ui","vue2","vue2-demo","vuejs","vuejs2","vuex","vuex-router-sync","vuex2"],"latest_commit_sha":null,"homepage":"","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/lzxb.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,"roadmap":null,"authors":null}},"created_at":"2016-07-05T13:48:08.000Z","updated_at":"2025-01-19T09:31:18.000Z","dependencies_parsed_at":"2023-05-15T13:00:37.694Z","dependency_job_id":null,"html_url":"https://github.com/lzxb/vue-cnode","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Fvue-cnode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Fvue-cnode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Fvue-cnode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzxb%2Fvue-cnode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lzxb","download_url":"https://codeload.github.com/lzxb/vue-cnode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254582907,"owners_count":22095518,"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":["cnodejs","vue","vue-cnode","vue-cnodejs","vue-components","vue-demo","vue-js","vue-router","vue-router2","vue-ui","vue2","vue2-demo","vuejs","vuejs2","vuex","vuex-router-sync","vuex2"],"created_at":"2024-08-01T09:00:37.118Z","updated_at":"2025-05-16T18:10:24.610Z","avatar_url":"https://github.com/lzxb.png","language":"Vue","readme":"\n## 此项目除了正常的bug修复，不再进行功能更新\n如果对状态管理感兴趣，可以看下 [Tms](https://github.com/FollowmeTech/tms)，文档更齐全\n\n### 前言\n\n项目灵感的最初来源是[@shinygang](https://github.com/shinygang/Vue-cnodejs)来自的Vue-cnodejs，\n感谢[cnodejs](https://cnodejs.org/)社区提供的API。\ngithub：[https://github.com/lzxb/vue-cnode](https://github.com/lzxb/vue-cnode)\n### 感悟\n```\n在vue-cnode升级vue2的时候，在公司内部已经有两个正式项目使用vue2，\n遇到的一个最难的问题，就是如何能在页面后退时还原数据和滚动条位置，\n虽然vue2内置了keep-alive组件，vue-router也提供了scrollBehavior方法进行设置，\n但是仍然无法满足需求，后来阅读vue-router的源码发现，\n每个页面都会自动在history.state对象中存储一个对应的key值，\n便利用这个特性实现了页面后退时，数据和滚动条还原，\n不过目前只是实现了页面的顶级组件还原，\n如果需要对顶级组件下的子组件实现数据还原，\n可以利用$options._scopeId来实现。\n哈哈，具体如何实现就要靠大家自己发挥想象力了\n```\n\n### 技术栈\n```\n基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区，使用webpack打包\n```\n\n### 使用项目\n```\n1.克隆项目：      git clone https://github.com/lzxb/vue-cnode.git\n2.安装nodejs\n3.安装依赖：      npm install\n4.启动服务：      npm run dev\n5.发布代码：      npm run build\n```\n\n### 功能\n- [x] 首页列表，上拉加载\n- [x] 主题详情，回复，点赞\n- [x] 消息列表\n- [x] 消息提醒\n- [x] 消息标记为已读\n- [x] 个人主页\n- [x] 用户信息\n- [x] 登录\n- [x] 退出\n- [x] 关于\n- [x] 页面后退，数据还原\n- [x] 页面后退，滚动位置还原\n- [x] ajax请求拦截器\n- [x] 页面跳转，不再执行此页面的ajax请求回调方法\n- [x] 启动图\n\n\n\n### 项目目录说明\n```\n.\n|-- config                           // 项目开发环境配置\n|   |-- index.js                     // 项目打包部署配置\n|-- src                              // 源码目录\n|   |-- components                   // 公共组件\n|       |-- content.vue              // 页面内容公共组件\n|       |-- data-null.vue            // 数据为空时公共组件\n|       |-- footer.vue               // 底部导航栏公共组件\n|       |-- header.vue               // 页面头部公共组件\n|       |-- index.js                 // 加载各种公共组件\n|       |-- loading.vue              // 页面数据加载公共组件\n|   |-- config                       // 路由配置和程序的基本信息配置\n|       |-- config.js                // 配置项目的基本信息\n|       |-- routes.js                // 配置页面路由\n|   |-- css                          // 各种css文件\n|       |-- common.css               // 全局通用css文件\n|   |-- iconfont                     // 各种字体图标\n|   |-- images                       // 公共图片\n|   |-- less                         // 各种less文件\n|       |-- common.less              // 全局通用less文件\n|       |-- config.less              // 全局通用less配置文件\n|   |-- lib                          // 各种插件\n|       |-- route-data               // 实现页面后退数据还原，滚动位置还原\n|   |-- mixins                       // 各种全局mixins\n|       |-- pull-list.js             // 上拉加载\n|   |-- pages                        // 各种页面组件\n|       |-- about                    // 关于\n|       |-- index                    // 首页\n|       |-- login                    // 登录\n|       |-- my                       // 我的主页，和消息列表\n|       |-- signout                  // 退出\n|       |-- topic                    // 主题详情，主题新建\n|       |-- user                     // 查看用户资料\n|   |-- store                        // vuex的状态管理\n|       |-- index.js                 // 加载各种store模块\n|       |-- user.js                  // 用户store\n|   |-- template                     // 各种html文件\n|       |-- index.html               // 程序入口html文件\n|   |-- utils                        // 公共的js方法\n|   |-- app.vue                      // 页面入口文件\n|   |-- main.js                      // 程序入口文件，加载各种公共组件\n|-- .babelrc                         // ES6语法编译配置\n|-- webpack.config.js                // 程序打包配置\n|-- server.js                        // 开发时使用的服务器\n|-- README.md                        // 项目说明\n|-- package.json                     // 配置项目相关信息，通过执行 npm init 命令创建\n.\n```\n\n### [扫一扫二维码查看效果](http://lzxb.github.io/vue-cnode/)\n [![扫一扫二维码查看效果](https://github.com/lzxb/vue-cnode/raw/master/shot/QR-code.png)](http://lzxb.github.io/vue-cnode/)\n","funding_links":[],"categories":["应用实例","Vue","Awesome-CNode"],"sub_categories":["Vue"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flzxb%2Fvue-cnode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flzxb%2Fvue-cnode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flzxb%2Fvue-cnode/lists"}