vue 写的功能最齐全的 cnode 社区网站

react 版开发之后开发的 vue 版， 其实 vue 版跟 react 版结构基本上是没多大变化的，只是语法上不同。

这是目前 react 版和 vue 版功能最齐全的第三方 cnode 版本了！

如果你是刚接触 react 或 vue 这恰好是一个好机会

react 版 cnode点这里

源码 github

在线预览

技术栈

"vue": "^2.5.2", "vue-router": "^3.0.1", "vuex": "^3.0.1", "iview": "^2.10.1", "axios": "^0.17.1", "moment": "^2.20.1", "webpack": "^3.6.0", "simplemde": "^1.11.2", "highlight": "^9.12.0", "scss": "", "ES6": "", "flex": "", 

开发目录

. ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── logo.png │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── webpack.dev.conf.js │ └── webpack.prod.conf.js ├── config │ ├── dev.env.js │ ├── index.js │ └── prod.env.js ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue # 视图入口 │ ├── api # API 配置文件 │ │ └── index.js │ ├── assets # 处理静态资源文件目录 │ │ ├── images │ │ │ ├── app-qrcode.png │ │ │ ├── github.svg │ │ │ └── not-match.gif │ │ └── scss │ │ ├── _variable.scss │ │ ├── media.scss │ │ └── style.scss │ ├── components │ │ ├── footer │ │ │ └── Footer.vue # 底部组件 │ │ ├── header │ │ │ └── Header.vue # 头部组件 │ │ ├── msg │ │ │ └── Msg.vue # 未读消息和已读消息列表组件 │ │ ├── sidebar │ │ │ └── Sidebar.vue # 侧边栏组件 │ │ └── topics-list │ │ └── TopicsList.vue # 话题列表组件 │ ├── main.js # 程序入口文件 │ ├── router │ │ └── index.js # 路由配置 │ ├── store │ │ └── index.js # 状态管理 │ └── views │ ├── 404 │ │ └── 404.vue # 404 页 │ ├── collections │ │ └── Collections.vue # 收藏页 │ ├── index │ │ └── Index.vue # 主页 │ ├── login │ │ └── Login.vue # 登录页 │ ├── messages │ │ └── Messages.vue # 未读消息页 │ ├── release │ │ └── Release.vue # 发布 /编辑页 │ ├── topic │ │ └── Topic.vue # 查看话题详情页 │ └── user │ └── User.vue # 用户详情页 /个人主页 └── static # 静态资源目录 └── images ├── 11.png ├── 22.png ├── 33.png └── 44.png 

API 清单 x 15

• [√] 主题首页
• [√] 主题详情
• [√] 新建主题
• [√] 编辑主题
• [√] 收藏主题
• [√] 取消收藏主题
• [√] 用户所收藏的主题
• [√] 新建评论
• [√] 为评论点赞
• [√] 用户详情 /个人主页
• [√] 登录
• [√] 获取未读消息数
• [√] 获取已读和未读消息
• [√] 标记全部已读
• [√] 标记单个消息为已读

启动程序

# install dependencies npm install # serve with hot reload at localhost:3888 npm start # build for production with minification npm run build 

结语

• CNode 主题详情是使用 markdown 写的，样式可以使用 github-markdown-css。
• CNode 提供的 API 获取主题没有返回总条数导致不能算出总页数, 所以我写死了 250 页。
• 大部分功能都需要登录的，所以游客只能进行浏览，如果感兴趣的可以尝试登录, 不会保存你的 accesstoken, 欢迎监督。
• 发布话题和评论使用的 markdown 编辑器 simplemde
• 因为托管在 github 上，所以首次打开的速度会稍微慢一点，之后基本上是秒开。
• 这应该是一个很好的学习机会，Vue 转 react，react 转 Vue 都很好上手。

学到东西不要忘了给个 star 哦，谢谢!

...

License

MIT