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

[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

功能

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

扫一扫二维码查看效果

[1340641314]

我擦，不能编辑了。管理员求删

[1340641314]

找到修改的位置了

[peneazy]

战略 mark

[yushiro]

不明觉厉，先收藏了

[ak47947]

不错，学习了

[anyforever]

挺工整的，看上去不错哦

[hanxiV2EX]

写的不错👍。

[1340641314]

@anyforever 谢谢

[1340641314]

@hanxiV2EX 谢谢

[1340641314]

@ak47947 谢谢

[1340641314]

谢谢

[1340641314]

@peneazy 谢谢

[iRiven]

加油

[hanxiV2EX]

@1340641314 本来还想问你布局怎么学的， css 一直学不会，看了你的布局神器 flex.css 感觉好厉害，有空撸一下。

[1340641314]

@hanxiV2EX 以前要写好多页面，后来总结出来的

[VtoEXL]

mark 一记，当时学 vue1 ， webpack 也是通过 vue-cnode 上手的

[1340641314]

@VtoEXL 666

[Mark24]

楼主有木有考虑过，打包成多个页面文件，更适合实际业务。

[1340641314]

@Mark24 多个页面？不太理解你的意思

[Mark24]

@1340641314 就是目前 vue 脚手架，默认是打包成一个文件.html 。当网站变大，变复杂，更倾向于，多页面，每个页面自己成为 SPA ，而不是一个网站都打包成一个 index.html.就是这种多页面打包的情况。

[1340641314]

@Mark24 明白了，其实也不一定要打包成多个页面，现在每个页面都是异步加载的，并不是把所有的页面都打包成一个 js

[Mark24]

@1340641314 再请教下，问题 1:Vue 中的组件异步懒加载，和打包结构有关么？看了下， vue2 的文档，异步组件部分，只提到了，在声明组件时使用 resolve => require(['./components/xxxx.vue'],resolve)语法。是不是不论我如何打包（一个或者多个），只要组件是这样子声明，组件就可以异步加载？问题 2:组件的懒加载可以观察么？在本地把 一个非常简单的不涉及请求的 demo （ https://github.com/Mark24Code/vue-tutorial ），所有组件变成懒加载写法，似乎无论从“网络 internet ” js 加载，还是“ Sources 资源”里面对 vue 、 js 文件的加载，都是瞬间的，并没有看到随着点击而出现。在这边有疑问，异步加载是不可观察的么？ 问题 3 ：想知道如何才能做好异步加载，资料比较少，老司机带带我~~

[Mark24]

@1340641314 补充环境信息：

"vuex": "^2.0.0"
"webpack": "^1.13.2"

[1340641314]

@Mark24 他这个是把所有组件都打包到了一个 js 里面，你可以看下这个文件： https://github.com/lzxb/vue-cnode/blob/master/src/config/routes.js