基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
来源:互联网 发布:什么是编程语言 编辑:程序博客网 时间:2024/05/16 09:47
前言
http://www.vue-js.com/topic/587c16c4a9c1282817afc059
项目灵感的最初来源是[@shinygang](https://github.com/shinygang/Vue-cnodejs)来自的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.git2.安装nodejs3.安装依赖: npm install4.启动服务: npm run dev5.发布代码: 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 命令创建.
扫一扫二维码查看效果
0 0
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- vue2.x Cnode社区是基于vue、vue-router、vuex、axios、es6开发
- 搭建vue2.0+vuex+vue-router+babel+webpack环境
- 使用 vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析
- 使用vue2、vuex、vue-router、axios等重写饿了么点餐系统
- 使用 vue2+Vuex+Router 重写饿了么点餐系统和 vue 插件简析
- 使用vue2、vuex、vue-router、axios等重写饿了么点餐系统
- 使用vue2.0 vue-router vuex 模拟ios7操作
- 使用vue2.0 vue-router vuex 模拟ios7操作
- Vue2.0 + vue-router + Vuex实战演练
- vue+webpack+vue-router+vuex+vue-resource简单实例
- Vue2.0 项目实战案例及Demo,基于vue2.0+vuex+vue-router+axios实现
- Vue2.0 框架配置:vue-cli + vue-router + vuex
- VUE 全家桶,vue2-vue-router-vuex-axios
- VUE 全家桶,vue2-vue-router-vuex-axios
- VUE 全家桶,vue2-vue-router-vuex-axios
- 六个通用寄存器的特定用途
- Linux的第二天(安装Eclipse和FFmpeg)
- POJ 3249 Test for Job
- 没GPU也能玩梵高作画:Ubuntu tensorflow CPU版
- Castle Windsor 学习-----Installer的几种安装方式
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- 前端面试小记
- 一天一算法:day01二叉树打印
- 北邮OJ-96. 矩阵幂-12计院上机B
- linux命令入门(ubuntu)
- [BZOJ1500]维修数列 Treap
- 机器学习-决策树(理解+代码)
- ROS专题----tf和tf2坐标变换
- 软件测试 功能测试 java求前一天