V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
1340641314
V2EX  ›  分享创造

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

  •  2
     
  •   1340641314 ·
    lzxb · 2016-12-09 16:49:17 +08:00 · 5326 次点击
    这是一个创建于 2890 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    项目灵感的最初来源是@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 命令创建
    .
    

    扫一扫二维码查看效果

    扫一扫二维码查看效果

    24 条回复    2016-12-30 08:43:22 +08:00
    1340641314
        1
    1340641314  
    OP
       2016-12-09 16:50:00 +08:00
    我擦,不能编辑了。管理员求删
    1340641314
        2
    1340641314  
    OP
       2016-12-09 16:50:47 +08:00
    找到修改的位置了
    peneazy
        3
    peneazy  
       2016-12-09 18:58:33 +08:00 via Android
    战略 mark
    yushiro
        4
    yushiro  
       2016-12-09 21:27:47 +08:00 via iPhone
    不明觉厉,先收藏了
    ak47947
        5
    ak47947  
       2016-12-10 01:05:56 +08:00 via iPhone
    不错,学习了
    anyforever
        6
    anyforever  
       2016-12-10 07:52:18 +08:00
    挺工整的,看上去不错哦
    hanxiV2EX
        7
    hanxiV2EX  
       2016-12-10 09:15:18 +08:00 via iPhone
    写的不错👍。
    1340641314
        8
    1340641314  
    OP
       2016-12-10 11:22:52 +08:00
    @anyforever 谢谢
    1340641314
        9
    1340641314  
    OP
       2016-12-10 11:23:14 +08:00   ❤️ 1
    @hanxiV2EX 谢谢
    1340641314
        10
    1340641314  
    OP
       2016-12-10 11:23:21 +08:00
    @ak47947 谢谢
    1340641314
        11
    1340641314  
    OP
       2016-12-10 11:23:31 +08:00
    谢谢
    1340641314
        12
    1340641314  
    OP
       2016-12-10 11:23:38 +08:00
    @peneazy 谢谢
    iRiven
        13
    iRiven  
       2016-12-10 11:47:41 +08:00 via Android
    加油
    hanxiV2EX
        14
    hanxiV2EX  
       2016-12-10 17:25:45 +08:00 via iPhone
    @1340641314 本来还想问你布局怎么学的, css 一直学不会,看了你的布局神器 flex.css 感觉好厉害,有空撸一下。
    1340641314
        15
    1340641314  
    OP
       2016-12-10 20:44:38 +08:00
    @hanxiV2EX 以前要写好多页面,后来总结出来的
    VtoEXL
        16
    VtoEXL  
       2016-12-11 09:48:28 +08:00
    mark 一记,当时学 vue1 , webpack 也是通过 vue-cnode 上手的
    1340641314
        17
    1340641314  
    OP
       2016-12-11 10:37:09 +08:00
    @VtoEXL 666
    Mark24
        18
    Mark24  
       2016-12-29 11:00:03 +08:00
    楼主有木有考虑过,打包成多个页面文件,更适合实际业务。
    1340641314
        19
    1340641314  
    OP
       2016-12-29 11:10:15 +08:00
    @Mark24 多个页面?不太理解你的意思
    Mark24
        20
    Mark24  
       2016-12-29 13:35:19 +08:00
    @1340641314 就是目前 vue 脚手架,默认是打包成一个文件.html 。当网站变大,变复杂,更倾向于,多页面,每个页面自己成为 SPA ,而不是一个网站都打包成一个 index.html.就是这种多页面打包的情况。
    1340641314
        21
    1340641314  
    OP
       2016-12-29 13:40:02 +08:00
    @Mark24 明白了,其实也不一定要打包成多个页面,现在每个页面都是异步加载的,并不是把所有的页面都打包成一个 js
    Mark24
        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 :想知道如何才能做好异步加载,资料比较少,老司机带带我~~
    Mark24
        23
    Mark24  
       2016-12-30 02:14:33 +08:00
    @1340641314 补充环境信息:

    "vuex": "^2.0.0"
    "webpack": "^1.13.2"
    1340641314
        24
    1340641314  
    OP
       2016-12-30 08:43:22 +08:00
    @Mark24 他这个是把所有组件都打包到了一个 js 里面,你可以看下这个文件: https://github.com/lzxb/vue-cnode/blob/master/src/config/routes.js
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3684 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 46ms · UTC 00:50 · PVG 08:50 · LAX 16:50 · JFK 19:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.