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

基于 vue + vue-router + vuex + ES6 + less + superagent + flex.css 重写 vue 版 cnode 社区

  •  
  •   1340641314 ·
    lzxb · 2016-09-18 10:59:20 +08:00 · 3248 次点击
    这是一个创建于 3007 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue-cnode

    基于 vue + vue-router + vuex + ES6 + less + superagent + flex.css 重写 vue 版 cnode 社区

    demo

    demo

    下载

      git clone https://github.com/lzxb/vue-cnode.git
      cd vue-cnode
      npm install (安装依赖模块)
      npm install webpack -g (没有安装 webpack 的需要安装)
    

    运行( nodejs 6.0+)

      npm run dev (开发版本访问: http://localhost:3000/)
      npm run dist (发布生产版本)
    
    

    功能

      1.登录退出
      2.列表分页,查看帖子
      3.发帖,回复帖子
      4.我的消息
      5.个人中心
      6.查看别人的资料
      7.生成离线缓存清单
    

    感受

    由于之前使用 react 写过 react-cnode ,
    再使用 vue 写 vue-cnode 时便能够很快入手。
    vue 模板的方式对比 react 的 jsx 方式,虽然入手简单,但是图灵表达能力不足,
    由于公司很多的后台管理系统之前都是基于 bootstrap + jQuery ,
    所以 vue 我更乐意推荐后台使用,直接在页面中引入,无需繁琐的配置,快速上手开发
    如果在移动端做一个完整的 webApp ,我比较倾向于使用 react 开发,
    因为以后有机会还是可以玩玩 react native
    

    定个小目标

    在完成 react-cnode 和 vue-cnode 之后,下一步学习计划是使用 electron + react 再写一个 electron-cnode ,
    至于为什么不选择 vue 的原因很简单,因为在写 react-cnode 的时候,对 redux 理解不深,所以想加深对 redux 的理解,
    在完成 electron-cnode 之后,如果没有新的技术爆发,估计是使用 react native 再写一个 RN-cnode
    

    题外话

    因为我是把 vue-cnode 是放在 git pages 上面,因为觉得访问速度比较慢,便将 vue-cnode 打包成一个离线缓存的 webApp ,
    发现了 html-webpack-plugin 并没有将 manifest 的服务器路径设置进去,于是第一次给老外 pull 代码便自然而然的发生了。
    如果你的打包生产版本发现 manifest 的文件路径不对,不要惊慌,自己手动修改一下 html-webpack-plugin 的代码即可
    附上我 pull 的代码,对着修改即可:
    https://github.com/ampedandwired/html-webpack-plugin/pull/434/commits/a7133de5d9ecedf1c2dee337ea391a954dda9ffe
    
    6 条回复    2016-09-18 21:37:27 +08:00
    gggso
        1
    gggso  
       2016-09-18 11:08:43 +08:00
    图灵表达能力。。。是啥意思
    1340641314
        2
    1340641314  
    OP
       2016-09-18 11:18:57 +08:00   ❤️ 1
    @gggso
    可能有误导,引用一下其他文章的说法:
    开发者对于用模板还是 JSX 有很多的争执。一方面,模板更接近 HTML - 它能更好地反映你的 app 的语义结构,并且易于思考视觉上的设计、布局和样式。另一方面,模板作为一个 DSL 也有它的局限性 - 相比之下 JSX/hyperscript 的程序本质使得它们具有图灵完备的表达能力。

    作为一个兼顾设计和开发的人,我喜欢用模板来写大部分的界面,但在某些情况下我也希望能拥有 JSX/hyperscript 的灵活性。举例来说,当你想在一个组件中程序化的处理其子元素时,基于模板的 slot 机制会显得比较有局限性。

    那么,为什么不能同时拥有它们呢?在 Vue 2.0 中,你可以继续使用熟悉的模板语法,但当你觉得受限制的时候,你也可以直接写底层的 virtual-DOM 代码,只需用一个 render 函数替换掉 template 选项。你甚至可以直接在你的模板里使用一个特殊的 <render> 标签来嵌入渲染函数!一个框架,两全其美。
    surfire91
        3
    surfire91  
       2016-09-18 18:32:38 +08:00
    看标题名词好多,快要赶超 Java 了 :doge
    blanu
        4
    blanu  
       2016-09-18 18:45:39 +08:00 via iPhone
    thx ,最近在做论坛,非常有帮助。想用 Vue 2.0 写一遍。
    1340641314
        5
    1340641314  
    OP
       2016-09-18 21:37:06 +08:00
    @surfire91 其实并没有什么卵用
    1340641314
        6
    1340641314  
    OP
       2016-09-18 21:37:27 +08:00
    @blanu 等 vue2 出正式版了,再继续学习
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3210 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 04:35 · PVG 12:35 · LAX 20:35 · JFK 23:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.