基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区，使用webpack打包
前言
项目灵感的最初来源是@shinygang来自的Vue-cnodejs， 感谢 cnodejs 社区提供的API。 github： 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 + vuex + 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 dist
功能
- 首页列表，上拉加载
- 主题详情，回复，点赞
- 消息列表
- 消息提醒
- 个人主页
- 用户信息
- 登录
- 退出
- 关于
- 页面后退，数据还原
- 页面后台，滚动位置还原
- ajax请求拦截器
- 页面跳转，不再执行此页面的ajax请求回调方法
- 启动图
项目目录说明
. |-- 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文件 | |-- util // 公共的js方法 | |-- app.vue // 页面入口文件 | |-- main.js // 程序入口文件，加载各种公共组件 |-- .babelrc // ES6语法编译配置 |-- webpack.config.js // 程序打包配置 |-- server.js // 开发时使用的服务器 |-- README.md // 项目说明 |-- package.json // 配置项目相关信息，通过执行 npm init 命令创建 .
扫一扫二维码查看效果
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
