基于 vue2 + vue-router + vuex + ES6 + less + flex.css 重写 vue 版 cnode 社区,使用 webpack 打包

2016-12-09 16:49:17 +08:00
 1340641314

前言

项目灵感的最初来源是@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.git
2.安装nodejs
3.安装依赖:      npm install
4.启动服务:      npm run dev
5.发布代码:      npm run dist

功能

项目目录说明

.
|-- 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 命令创建
.

扫一扫二维码查看效果

5343 次点击
所在节点    分享创造
24 条回复
1340641314
2016-12-09 16:50:00 +08:00
我擦,不能编辑了。管理员求删
1340641314
2016-12-09 16:50:47 +08:00
找到修改的位置了
peneazy
2016-12-09 18:58:33 +08:00
战略 mark
yushiro
2016-12-09 21:27:47 +08:00
不明觉厉,先收藏了
ak47947
2016-12-10 01:05:56 +08:00
不错,学习了
anyforever
2016-12-10 07:52:18 +08:00
挺工整的,看上去不错哦
hanxiV2EX
2016-12-10 09:15:18 +08:00
写的不错👍。
1340641314
2016-12-10 11:22:52 +08:00
@anyforever 谢谢
1340641314
2016-12-10 11:23:14 +08:00
@hanxiV2EX 谢谢
1340641314
2016-12-10 11:23:21 +08:00
@ak47947 谢谢
1340641314
2016-12-10 11:23:31 +08:00
谢谢
1340641314
2016-12-10 11:23:38 +08:00
@peneazy 谢谢
iRiven
2016-12-10 11:47:41 +08:00
加油
hanxiV2EX
2016-12-10 17:25:45 +08:00
@1340641314 本来还想问你布局怎么学的, css 一直学不会,看了你的布局神器 flex.css 感觉好厉害,有空撸一下。
1340641314
2016-12-10 20:44:38 +08:00
@hanxiV2EX 以前要写好多页面,后来总结出来的
VtoEXL
2016-12-11 09:48:28 +08:00
mark 一记,当时学 vue1 , webpack 也是通过 vue-cnode 上手的
1340641314
2016-12-11 10:37:09 +08:00
@VtoEXL 666
Mark24
2016-12-29 11:00:03 +08:00
楼主有木有考虑过,打包成多个页面文件,更适合实际业务。
1340641314
2016-12-29 11:10:15 +08:00
@Mark24 多个页面?不太理解你的意思
Mark24
2016-12-29 13:35:19 +08:00
@1340641314 就是目前 vue 脚手架,默认是打包成一个文件.html 。当网站变大,变复杂,更倾向于,多页面,每个页面自己成为 SPA ,而不是一个网站都打包成一个 index.html.就是这种多页面打包的情况。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/326479

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX