基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
发布于 1 年前 作者 1340641314 4224 次浏览 来自 分享

前言

项目灵感的最初来源是@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

功能

  • [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文件
|   |-- util                         // 公共的js方法
|   |-- app.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件,加载各种公共组件
|-- .babelrc                         // ES6语法编译配置
|-- webpack.config.js                // 程序打包配置
|-- server.js                        // 开发时使用的服务器
|-- README.md                        // 项目说明
|-- package.json                     // 配置项目相关信息,通过执行 npm init 命令创建
.

扫一扫二维码查看效果

扫一扫二维码查看效果

36 回复

很漂亮,没用ui框架吗

@zannet 自己写的,不需要

界面风格我挺喜欢的,good!<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@shinygang 还是你的666

我想问一句,你们这么有时间写的,上班不忙吗?

@huangyanxiong01 断断续续写了两个月。。。 <br>来自<a href=“https://lzxb.github.io/vue-cnode/” target="_blank">vue-cnode手机版</a>

@hfuuss 谢谢 <br>来自<a href=“https://lzxb.github.io/vue-cnode/” target="_blank">vue-cnode手机版</a>

@1340641314 请问你们现在为什么都在用vue2.0?react淘汰了吗?我用react写了一个,感觉你说的返回记录滚动条位置和数据都没有遇到问题。首先就是记录滚动条位置是在每次这个页面注销的时候记录一下scrollTop。至于第二个数据还原的话,react把数据放在redux的store里面,组件被加载进来的话会自动从store读取相应的数据,不需要重新请求。我看了一下你这个貌似从底栏切换的话,每次都要重新加载首页

@lumia2046 1.使用vue,没使用react,是为了照顾其他的人,因为react的jsx语法,学习成本相对来说比较高 2.以前也是将这些数据存储在redux或者vuex中,但是实际使用起来比较麻烦 3.至于每次从底部切换的时候,都会重新加载数据,这是他的机制决定的,可以看看这里的:https://github.com/lzxb/vue-cnode/issues/4

@lumia2046 其实主要还是因为vue的指令之类的,和后台套模板的方式比较类似,和后台人员解释起来相对来说比较简单。如果只是我一个人开发,react和vue的区别不是特别大,但是要带着后台一起玩,或者让后台自己玩,只能选择vue或者angularjs这样的框架。以前使用react开发过两个项目,总体还是后台还是比较抵触的,vue的话,在一场技术讨论中,后台的也是支持使用vue的

不是用cli生成的吗,正好可以用来学习,谢谢

@lumia2046 会降低后台对前端页面的掌控力 <br>来自<a href=“https://lzxb.github.io/vue-cnode/” target="_blank">vue-cnode手机版</a>

@FlyerJay 不是,自己搭的,所以没有热替换这些 <br>来自<a href=“https://lzxb.github.io/vue-cnode/” target="_blank">vue-cnode手机版</a>

我在用你的react版的哈哈, <br><br>来自<a href=“https://lzxb.github.io/react-cnode/” target="_blank">react-cnode手机版</a>

@wugy0103 那个是非常老的版本了,感觉写得并不好。现在在开发一个vue的缓存插件哈哈

不错不错,clone楼主的源码学习中

@1340641314 登录的accessToken从哪得到?

@JustforNode 设置底部的Access Token

@JustforNode 首页 未读消息 新手入门 API 关于 设置 退出

这里的设置

@1340641314 请问,在回复话题时,reply-box是如何显示和隐藏的?我做的时候,用true和false控制,但是只能在初始化时加载,初始化后再点回复话题按钮,为什么不会刷新reply-box这块呢?

重新刷新主题

source vue-cnode mobile 2.0

@JustforNode 你可以看下这个文件https://github.com/lzxb/vue-cnode/blob/master/src/pages/topic/vid/reply-box.vue 发布成功后,会往父组件发布事件

@1340641314 点击回复话题的按钮,reply-box显示,再点击一次,reply-box隐藏,这个是如何实现的? 我看到的代码是用item.comment的true和false控制的,但是我实际做的时候,改变item.comment的值后,为什么不会重新渲染reply-box组件了呢

@JustforNode 我是使用if的指令的,不知道你是不是使用show指令的,具体可以看下官方对这两个指令的描述

source vue-cnode mobile 2.0

6666,很强大,,正好在上手vue2,太棒了,,感谢作者分享

正在愁,如何能在页面后退时还原数据和滚动条位置这一问题。还发了个帖子,没想到楼主都踩平这个坑了,谢谢分享

@chanywn 这个只是实现得比较简单粗暴,没实现插件化

我用微信没点一下上面的标签切换页面都会被微信拦截提示~

@nasaplayer 域名没交保护费,你懂的

@1340641314 我有个域名备案了是https的,算是交保护费了吗 大腿

@nasaplayer 不晓得。。。我只是懒得申诉

回到顶部