lzxb/vue-cnode

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

此项目除了正常的bug修复，不再进行功能更新

如果对状态管理感兴趣，可以看下 Tms，文档更齐全

前言

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

功能

• 首页列表，上拉加载
• 主题详情，回复，点赞
• 消息列表
• 消息提醒
• 消息标记为已读
• 个人主页
• 用户信息
• 登录
• 退出
• 关于
• 页面后退，数据还原
• 页面后退，滚动位置还原
• ajax请求拦截器
• 页面跳转，不再执行此页面的ajax请求回调方法
• 启动图

项目目录说明

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

扫一扫二维码查看效果

vue-cnode's Issues

实现滚动位置还原时报Unexpected token import的异常

你好，我想在项目里实现页面后退数据还原，滚动位置还原的效果，结果报错，错误提示为：VM30878:3 Uncaught SyntaxError: Unexpected token import

我的具体做法如下：
1、将lib文件夹复制到项目里；
2、在webpack配置文件里的resolve的alias配置route-data；
3、在main.js里添加import {scrollRecord} from 'route-data'以及Vue.directive('scroll-record', scrollRecord)

在没有引入route-data时没有该错误，如
import Vue from 'vue'
import VueRouter from 'vue-router'
可以正常运行

import Vue from 'vue'
import VueRouter from 'vue-router'
import {scrollRecord} from 'route-data'
报异常VM30878:3 Uncaught SyntaxError: Unexpected token import

打包报如下错误，请问怎么解决

ERROR in main.js from UglifyJs
Unexpected token: operator (>) [./src/main.js:35,0][main.js:41035,90]
请问怎么解决

大兄弟，我遇到个问题，能帮我解决一下嘛，谢谢了

http://www.vue-js.com/topic/589a7d98a9c1282817afc1a0
这是我在vue论坛问的，但是现在也不知道为什么。如果有时间帮我一下，这问题困扰挺久了

Readme项目目录说明的目录树是用什么生成的？

是哪个npm包吗？

首页异步获取的数据建议缓存

每次切换回首页都会获取一次最新的帖子 虽然能及时获取新帖子 但是增加了等待时间 降低了体验
建议把数据保存在本地 然后用主动刷新替代自动的

content的css样式在哪？

cnodeAPI把那些content加进来渲染好后，发现没有CSS样式，这时候哪里找通用的css样式，因为content是每个人发的内容，所以，自己好像写不了额、

你好，我想问下关于页面后退数据还原及滚动条位置还原怎么实现？

你好，我想问下关于页面后退数据还原及滚动条位置还原怎么用结合scrollBehavior,我按照官网的配置方法进行了scrollBehavior的配置,发现在后退是没有办法获取到scrollBehavior的值(值为null)所以想问下您,怎么实现！

npm run dev is not to work?

webpack :compiled successfully.

vuet滚动加载返回列表页的默认位置

vuet滚动加载返回列表页，点击其中一条数据查看，再点击返回列表，默认又回到第一条数据位置了，请问如何修改

关于页面title的问题

如果想实现：每个路由URL都有自己的页面title，该如何做啊？麻烦指导下思路~

切换Tab栏可以记录位置吗？

比方说从“精华”选项下拉然后切换“分享”选项，在回退到“精华”选项，记录下“精华”选项的位置而不重新加载

关于post请求的问题

请问为什么你的post请求失败了还有返回值，而我发送的post请求失败了就直接跳到错误处理代码了？
例如发布主题的post请求：
我的代码：

async createTopic (context) {
  const data = { accesstoken: context.state.accessToken, ...context.state.topicForm}
  try {
    const res = await axios({
        method: 'post',
        url: '/topics',
        data: data
     })
    context.commit(types.CREATE_TOPIC, res)
  } catch (error) {
    // 请求失败没有返回res对象，直接跳到这里
    console.log(error)
  }
}

你的代码：

async create () {
  const res = await http.post(`/topics`, {
      ...this.state
  })
  if (res.success) {
    this.reset()
       this.app.$router.push({
         path: `/topic/${res.topic_id}`
       })
    } else {
       // 请求失败的res: {success: false, error_msg: "频率限制：当前操作每天可以进行 7 次"}
       utils.toast(res.error_msg)
    }
    return res
}

index.html 改变路径访问不到

您好，我运行你的项目时npm run dev 然后访问127.0.0.1:3000是没问题的。
但是我把index.html移动到src目录下，然后访问127.0.0.1:3000/src这样就有问题，请问可以帮忙看看吗？谢谢

可以支持多页面的项目吗？

目前的项目是用vue的非单页应用

v2.1貌似就已经实现了子组件还原

https://gist.github.com/yyx990803/faebe22e8763f5b17572b35ed96f52fe#conditional-keep-alive

repeat pages

通过vuex和router是否也可以记录滚动位置呢

如题，没做测试，只是想法。

发帖后跳转到具体的topic点击顶部导航栏回退按钮会回到发帖页面

从前辈的源码中学到了很多，首先向前辈说声谢谢您。
一个小体验问题，发帖后跳转到自己的文章再回退仍是发帖页面晚辈感觉体验不太友好。

能支持多入口页面吗？

类似多个有些关联的系统，比如说a，b，c，d四个入口html，四个系统，使用一个环境，有些插件，组件可以共享使用，
谢谢

缓存的数据如果有改变，怎么更新呢？

列表页和详情页都有缓存数据，但是缓存的数据变了呢，比如说在列表点赞收藏后，个数就变了，然后进入到详情，在返回列表，怎么更新列表数据？

这个demo，怎么登陆呢 token是啥？（想测下评论后数据变化，怎么处理的）

顺便说下，楼主有换工作打算吗，tencent欢迎你

我想问下你在总结中提到的页面后退数据还原及滚动条位置还原的方法

import mint-ui 报错

项目引入mint-ui提示Module build failed: Error: Couldn't find preset "es2015-rollup" relative to directory

关于滚动条定位的问题

现在好像route-data这个文件删了，没找到现在滚动条是如何定位的？

Error in beforeCreate hook: "TypeError: Cannot read property '_options' of undefined"

[Vue warn]: Error in beforeCreate hook: "TypeError: Cannot read property '_options' of undefined"

found in

vue.js:529 TypeError: Cannot read property '_options' of undefined
    at VueComponent.beforeCreate (vuet.js:362)

加注释打包报错

在main.js 单独一行加上注释 // 或者/**/，为什么npm打包就会报错呢，该如何解决

触摸不流畅

建议使用Fastclick或者vue-touch

README.md中发布代码的命令有误

经过自己测试，发布代码的命令应该是："npm run build"，而不是"npm run dist"，用"npm run dist"会报错，后来我看到“package.json”文件“scripts”中的发布代码的字段是“build”不是“dist”

回复的小尾巴似乎有点问题

问题帖子：
https://cnodejs.org/topic/586e392abcf66127778bd2eb

"content": "<div class=\"markdown-text\"><p><a href=\"/user/dianjie\">@dianjie</a> 你666</p>\n<p>&lt;br&gt;来自&lt;a href=“<a href=\"https://lzxb.github.io/vue-cnode/\">https://lzxb.github.io/vue-cnode/</a>” target=&quot;_blank&quot;&gt;vue-cnode手机版&lt;/a&gt;</p>\n</div>"

发表不支持图片吗？

看帖子里面是有图片的，但是发表那里没有看见可以传图片

var { vid } = this.$route.params 中的 {vid}是什么意思呢？

如题：var { vid } = this.$route.params 中的 {vid}是什么意思呢？

生产模式进不了首页

用了npm run dist后，打开index.html无法进入首页。