Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lzxb/vue-cnode
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区，使用webpack2打包
https://github.com/lzxb/vue-cnode
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
Last synced: 6 days ago
JSON representation
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区，使用webpack2打包
- Host: GitHub
- URL: https://github.com/lzxb/vue-cnode
- Owner: lzxb
- Created: 2016-07-05T13:48:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-26T01:42:08.000Z (over 6 years ago)
- Last Synced: 2025-01-13T10:05:22.283Z (13 days ago)
- 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
- Language: Vue
- Homepage:
- Size: 1.75 MB
- Stars: 1,118
- Watchers: 76
- Forks: 313
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue - vue-cnode - cnode?style=social) - 重写vue版cnode社区 (应用实例)
- awesome-cnode - vue-cnode - cnode.svg?label=%E2%98%85) 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区，使用webpack2打包 [@lzxb](https://github.com/lzxb) [😎](https://lzxb.name/vue-cnode) (Awesome-CNode / Vue)
- awesome-github-vue - vue-cnode - 重写vue版cnode社区 (应用实例)
- awesome-github-vue - vue-cnode - 重写vue版cnode社区 (应用实例)
- awesome - vue-cnode - 重写vue版cnode社区 (应用实例)
README
## 此项目除了正常的bug修复，不再进行功能更新
如果对状态管理感兴趣，可以看下 [Tms](https://github.com/FollowmeTech/tms)，文档更齐全
### 前言
项目灵感的最初来源是[@shinygang](https://github.com/shinygang/Vue-cnodejs)来自的Vue-cnodejs，
感谢[cnodejs](https://cnodejs.org/)社区提供的API。
github：[https://github.com/lzxb/vue-cnode](https://github.com/lzxb/vue-cnode)
### 感悟
```
在vue-cnode升级vue2的时候，在公司内部已经有两个正式项目使用vue2，
遇到的一个最难的问题，就是如何能在页面后退时还原数据和滚动条位置，
虽然vue2内置了keep-alive组件，vue-router也提供了scrollBehavior方法进行设置，
但是仍然无法满足需求，后来阅读vue-router的源码发现，
每个页面都会自动在history.state对象中存储一个对应的key值，
便利用这个特性实现了页面后退时，数据和滚动条还原，
不过目前只是实现了页面的顶级组件还原，
如果需要对顶级组件下的子组件实现数据还原，
可以利用$options._scopeId来实现。
哈哈，具体如何实现就要靠大家自己发挥想象力了
```
### 技术栈
```
基于vue2 + vue-router + vuet + ES6 + less + flex.css重写vue版cnode社区，使用webpack打包
```
### 使用项目
```
1.克隆项目： git clone https://github.com/lzxb/vue-cnode.git
2.安装nodejs
3.安装依赖： npm install
4.启动服务： npm run dev
5.发布代码： npm run build
```
### 功能
- [x] 首页列表，上拉加载
- [x] 主题详情，回复，点赞
- [x] 消息列表
- [x] 消息提醒
- [x] 消息标记为已读
- [x] 个人主页
- [x] 用户信息
- [x] 登录
- [x] 退出
- [x] 关于
- [x] 页面后退，数据还原
- [x] 页面后退，滚动位置还原
- [x] ajax请求拦截器
- [x] 页面跳转，不再执行此页面的ajax请求回调方法
- [x] 启动图
### 项目目录说明
```
.
|-- config // 项目开发环境配置
| |-- index.js // 项目打包部署配置
|-- src // 源码目录
| |-- components // 公共组件
| |-- content.vue // 页面内容公共组件
| |-- data-null.vue // 数据为空时公共组件
| |-- footer.vue // 底部导航栏公共组件
| |-- header.vue // 页面头部公共组件
| |-- index.js // 加载各种公共组件
| |-- loading.vue // 页面数据加载公共组件
| |-- config // 路由配置和程序的基本信息配置
| |-- config.js // 配置项目的基本信息
| |-- routes.js // 配置页面路由
| |-- css // 各种css文件
| |-- common.css // 全局通用css文件
| |-- iconfont // 各种字体图标
| |-- images // 公共图片
| |-- less // 各种less文件
| |-- common.less // 全局通用less文件
| |-- config.less // 全局通用less配置文件
| |-- lib // 各种插件
| |-- route-data // 实现页面后退数据还原，滚动位置还原
| |-- mixins // 各种全局mixins
| |-- pull-list.js // 上拉加载
| |-- pages // 各种页面组件
| |-- about // 关于
| |-- index // 首页
| |-- login // 登录
| |-- my // 我的主页，和消息列表
| |-- signout // 退出
| |-- topic // 主题详情，主题新建
| |-- user // 查看用户资料
| |-- store // vuex的状态管理
| |-- index.js // 加载各种store模块
| |-- user.js // 用户store
| |-- template // 各种html文件
| |-- index.html // 程序入口html文件
| |-- utils // 公共的js方法
| |-- app.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- .babelrc // ES6语法编译配置
|-- webpack.config.js // 程序打包配置
|-- server.js // 开发时使用的服务器
|-- README.md // 项目说明
|-- package.json // 配置项目相关信息，通过执行 npm init 命令创建
.
```
### [扫一扫二维码查看效果](http://lzxb.github.io/vue-cnode/)
[](http://lzxb.github.io/vue-cnode/)