项目灵感的最初来源是@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 命令创建
.
1
1340641314 OP 我擦,不能编辑了。管理员求删
|
2
1340641314 OP 找到修改的位置了
|
3
peneazy 2016-12-09 18:58:33 +08:00 via Android
战略 mark
|
4
yushiro 2016-12-09 21:27:47 +08:00 via iPhone
不明觉厉,先收藏了
|
5
ak47947 2016-12-10 01:05:56 +08:00 via iPhone
不错,学习了
|
6
anyforever 2016-12-10 07:52:18 +08:00
挺工整的,看上去不错哦
|
7
hanxiV2EX 2016-12-10 09:15:18 +08:00 via iPhone
写的不错👍。
|
8
1340641314 OP @anyforever 谢谢
|
9
1340641314 OP @hanxiV2EX 谢谢
|
10
1340641314 OP @ak47947 谢谢
|
11
1340641314 OP 谢谢
|
12
1340641314 OP @peneazy 谢谢
|
13
iRiven 2016-12-10 11:47:41 +08:00 via Android
加油
|
14
hanxiV2EX 2016-12-10 17:25:45 +08:00 via iPhone
@1340641314 本来还想问你布局怎么学的, css 一直学不会,看了你的布局神器 flex.css 感觉好厉害,有空撸一下。
|
15
1340641314 OP @hanxiV2EX 以前要写好多页面,后来总结出来的
|
16
VtoEXL 2016-12-11 09:48:28 +08:00
mark 一记,当时学 vue1 , webpack 也是通过 vue-cnode 上手的
|
17
1340641314 OP @VtoEXL 666
|
18
Mark24 2016-12-29 11:00:03 +08:00
楼主有木有考虑过,打包成多个页面文件,更适合实际业务。
|
19
1340641314 OP @Mark24 多个页面?不太理解你的意思
|
20
Mark24 2016-12-29 13:35:19 +08:00
@1340641314 就是目前 vue 脚手架,默认是打包成一个文件.html 。当网站变大,变复杂,更倾向于,多页面,每个页面自己成为 SPA ,而不是一个网站都打包成一个 index.html.就是这种多页面打包的情况。
|
21
1340641314 OP @Mark24 明白了,其实也不一定要打包成多个页面,现在每个页面都是异步加载的,并不是把所有的页面都打包成一个 js
|
22
Mark24 2016-12-30 02:09:20 +08:00
@1340641314 再请教下,问题 1:Vue 中的组件异步懒加载,和打包结构有关么?看了下, vue2 的文档,异步组件部分,只提到了,在声明组件时使用 resolve => require(['./components/xxxx.vue'],resolve)语法。是不是不论我如何打包(一个或者多个),只要组件是这样子声明,组件就可以异步加载?问题 2:组件的懒加载可以观察么?在本地把 一个非常简单的不涉及请求的 demo ( https://github.com/Mark24Code/vue-tutorial ),所有组件变成懒加载写法,似乎无论从“网络 internet ” js 加载,还是“ Sources 资源”里面对 vue 、 js 文件的加载,都是瞬间的,并没有看到随着点击而出现。在这边有疑问,异步加载是不可观察的么? 问题 3 :想知道如何才能做好异步加载,资料比较少,老司机带带我~~
|
23
Mark24 2016-12-30 02:14:33 +08:00
|
24
1340641314 OP @Mark24 他这个是把所有组件都打包到了一个 js 里面,你可以看下这个文件: https://github.com/lzxb/vue-cnode/blob/master/src/config/routes.js
|