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

[1340641314]

vue-cnode

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

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

[gggso]

图灵表达能力。。。是啥意思

[1340641314]

@gggso
可能有误导，引用一下其他文章的说法：
开发者对于用模板还是 JSX 有很多的争执。一方面，模板更接近 HTML - 它能更好地反映你的 app 的语义结构，并且易于思考视觉上的设计、布局和样式。另一方面，模板作为一个 DSL 也有它的局限性 - 相比之下 JSX/hyperscript 的程序本质使得它们具有图灵完备的表达能力。

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

那么，为什么不能同时拥有它们呢？在 Vue 2.0 中，你可以继续使用熟悉的模板语法，但当你觉得受限制的时候，你也可以直接写底层的 virtual-DOM 代码，只需用一个 render 函数替换掉 template 选项。你甚至可以直接在你的模板里使用一个特殊的 <render> 标签来嵌入渲染函数！一个框架，两全其美。

[surfire91]

看标题名词好多，快要赶超 Java 了 :doge

[blanu]

thx ，最近在做论坛，非常有帮助。想用 Vue 2.0 写一遍。

[1340641314]

@surfire91 其实并没有什么卵用

[1340641314]

@blanu 等 vue2 出正式版了，再继续学习