用Vue.js编写了cnodejs.org的h5客户端(webapp), 代码已经升级到2.0的语法！

vue还不错的，看好

大赞！

@shinygang 其中很多地方需要优化，加油。

@yunkou 恩恩，一起不断的升级，做好维护。

最近也在用vue，这种库的形式，远远比ng react要更顺手 自豪地采用 CNodeJS ionic

好东西，顶一个！

@TakWolf 非常感谢你提的第一个bug，

大赞

太赞!clone下来就可运行,nice ,我也来测试哈

@qxl1231 欢迎提bug和改进意见。产品还在不断完善中。I‘m webapp-cnodejs-vue

@shinygang nvm装了一个4.2.1之后运行起来了，可能就是我的node版本比较高吧，O(∩_∩)O

@shinygang 登录一直403，线上的也是

@shinygang 是的，服务器段是需要对应相应的。我想知道像products/computers/dell这样的url如何能指向目标products/computers/computer.html页面。 比如，我在服务器端采用ASP.NET Web API(我不打算用ASP.NET MVC里的VIEW)，浏览器视图采用.html文件，当用户请求products/computers/dell这个地址时，系统实际上会指向products/computers/computer.html?type=dell地址(服务器端采用ASP.NET Web API 响应products/computers/dell请求，并生成JSON返回给products/computers/computer.html)，但用在浏览器的地址栏里看到的仍然是products/computers/dell，我希望能在浏览器端实现这个效果，而不是在服务器端借助url重写或是服务器端的程序来实现。 记得AngularJS是可以实现这样的效果的。

@wandergis 哈哈，没注意呢，可能今天更新代码影响到了，你先输入复制粘贴token登录吧。I‘m webapp-cnodejs-vue

@huazhenhz 建议你看些vue-router文档，是支持这样写的。I‘m webapp-cnodejs-vue

楼主可以分享一下做这个项目的具体思路吗?

三星Note3，QQ浏览器 6.2.0.1840，很卡。。很卡。。无响应，浏览器退出。。

。。接上，似乎是死循环了，浏览器的历史记录中有无数个 “基于Vue.js的.....”

@myy 哥们，咋个操作的，我用qq浏览器不卡啊。I‘m webapp-cnodejs-vue

@shinygang 可以基于cordova打包app吗

@wandergis 这个没试，你可以自己试一试呗。

@shinygang 可以的，你是用webpack的静态server，肯定是可以打包的

@kylezhang 明显啊，ng你要全部重新学，一套一套的。react你要重新学一半，它不方便操作dom，绝大多数的jq控件就废了。vue和jq配合很好，至少现在用着没遇到特别麻烦的事情。 自豪地采用 CNodeJS ionic

@i5ting 打包哪家强？

@klausgao 扯，ng里有jqlite，react和jq结合很好用

有用到她的.vue组件方式么？ 自豪地采用 CNodeJS ionic

@Alex-fun 有啊，看源码吧。

@shinygang 问个问题 .vue 文件如何代码高亮 有相关插件么？ 例如vsc的， 一堆黑字 好没feel

@Alex-fun sublime有插件，名字叫：vue-syntax-highlight-master，其他编辑器不太清楚。

很顺滑

用 react native 做客户端啊

@moxiaobei2 哈哈，我后面加一个，确实这个很重要。

今天试了一下，已经修复了滑动返回的问题，很赞！很支持，前段技术栈发展太快啦。

@zh-h 恩恩，谢谢提改进。

请问一个入门的问题，就是如果我是从头开始编写页面， 或者浏览Views/下的vue页面文件，请问，怎样能比较清楚的浏览页面的html元素（查看页面元素和布局位置等），目前代码的部分是比较清楚的一块（javascript部分）。 比较混杂的是 这些部分，如果页面元素table, list, li, text等比较多，那想看页面的元素和位置等几乎不太可能了。

当然如果是一个简单的页面，从头写，可以先写好html元素的，静态的，然后再一步步修改为vue动态的组件。。但是复杂的页面，不熟悉的旁人浏览器来就困难了。

请问大家是怎么解决此类问题的？ 多谢！

下拉加载的时候接口调用可以优化的..
你是 page=1 limit=10 page=1 limit=20.. 到后面我看了几千条你每次拉数据就拉几千条哇？ 不是可以page=1 limit=10 page=2 limit=10的吗

怎么实现ajax跨域的，好像没有jsonp诶，cnode的api是怎么实现的？

太厉害👍。

来自酷炫的 CNodeMD

建议pakage.json里面写 "engines": { "node": "4.2.1" }, 要不用高版本的打开有问题

@simplerxing 好的，谢谢提醒。

请教楼主，首页和list页面的loading怎么require进去的呢？我看到components里的loading.vue，但是在index页没有看到它被require进去呀

@DoranYun 哥们，页面默认那个loding是加在样式里面的，loading.vue这个loading不是页面的加载loading，是提交数据的时候那个缓冲提示。

@shinygang 谢谢，看到了；

我尝试改写时遇到一个小坑，我在单独的sass文件里用相对路径引入了一张图片，在vue组件中如果在style中使用sass的@import 加入这个sass文件会导致找不到图片报错，在script标签中使用js import就能正常使用。。

@DoranYun 哥们，你在style 标签上加lang='sass‘试一试，让他失败为sass语言。

@shinygang 这个有，我找到原因了，因为sass @import本质上会把import进来的样式文件合并进来，所以路径就不对了。。

谢谢分享

不错！我也喜欢Vue.js。周末学习学习

@Alex-fun 切换动画后期优化，最近公司的事情忙，就没来得及，之前是直接用webpack压缩的，遇到些问题。赶紧gulp和webpack搭配也不是坏事，各自做各自的强项。

请教下作者用什么IDE开发的。那种IDE最好。 1、vue 后缀在其他IDE，都是纯文本状态，没有智能色彩标注看的很难受。 2、webpack 服务端怎么调试请教， 客户端我可以用Google断点， server.js 怎么调试, 最原始的console.log 么。

@libinqq 问题1：我用的sublime,有专门的高亮插件，叫:vue-syntax-highlight-master， 问题2：我没太明白你的意思，webpack只是工程构建打包压缩之类用的，你服务器和这个关系不大啊，一般服务端都是健全的log机制来处理吧。

请问一下，是用什么框架打包成app呢？还有后台的数据是如何交互的，是采用json还是用到node.js中的socket?

@YuKaiChan 我没有打包，这个不清楚，与后台交互都是ajax的。

@shinygang 好的谢谢

已star，很好； 怎么登陆？ 本人node 0.12，webstorm 10出现的问题： 怎么minify打包发布完成整个流程？还是打包压缩发布不在项目考虑范围之内，需要自己写？ npm run dist/build只会成为'NODEENV=development/production gulp'然后失败； 能用的只有gulp webpack，而且dist出的内容缺index.html并不能运行，需要补足，而且没有minify； 最新版gulp clean使用arrow function，但运行时并没有babel支持(升级至4.2.4解决）

@w10036w 登录用cnode这边提供的token，node版本是v4.2.1，这个package.json里面已经注明了。工程的打包压缩都在gulp和webpack的时候已经处理。dist目录是生产环境目录，我这边是没有把dist目录放到git里面，你可以复制外面的index.html到对应的文件夹。babel支持是有的，你拉取最新代码和升级你的node版本。上面的一些错和你的node版本有很大的关系。

很好的vue入门 示例源代码，正在学习研究中，很感谢。

在评论回复中发现 @xxx （其对应链接因为href直接渲染，没有v-link 处理）点击后替换了路由I‘m webapp-cnodejs-vue

学习了，好强大的样子I‘m webapp-cnodejs-vue

@shinygang 只有最后一个是升级版本解决的。。。 不过之前用的系统是win，估计和这个有关。。。窝还是老实用mac吧。。。

学习学习

Mark

类似 jQuery 的 $.ajax 写法是怎样实现的？没发现引入支持这种写法的模块啊

验证二维码提示跨域啊。提了issue。 我最近也在写vue 的cnode。https://github.com/stop2stare/cnode-vue

来自酷炫的 CNodeMD

@aisin 在webpack.config.js里面有引入zepto的模块。有问题直接提pr吧。

@stop2stare 哥们，当时我做的时候采用了两种方案，首先js能识别的二维码直接js端识别，不行就采用的服务端识别二维码，现在服务器到期服务端识别那个挂了，就没维护了，网页搞二维码识别比较麻烦，感觉没多大必要。I‘m webapp-cnodejs-vue

学习了,赞赞赞！！！

@chrisho 2.0准备等正式发布后才入手，你可以先尝试，多看看API！

@shinygang 大哥，竟然在这里碰到你，十一之前忘了是在哪个博客看到这个项目，由于初学Vue，然后立马clone了一下，看了一下大致的项目结构，然后自己就也搞了一个web端的cnode-vue，人比较笨，花了将近一个月才写完，web端搞完之后还想在搞个移动端的，正在构思中...，再次感谢Vue-cnodejs带给我的启发来自 cnode-vue

@BubblyPoker 请问登录验证用vue-resource怎么写的呢，我怎么会是401 (Unauthorized)

帖子里的线上访问地址不行。github上的链接是可以的

@klausgao 能具体说下不？

赞。最后怎么打包成app呢

为什么iOS向右滑动返回，会重载页面？

@yaojaa 这是webapp，还没打算打包成安装类型的app呢。I‘m webapp-cnodejs-vue

@zh-h 哥们，你怎么操作的？没操作出来你说的返回。I‘m webapp-cnodejs-vue

哇，好东西，支持大神，用了一下，我的iphone上不能后退，还有就是登陆页面进入之后，无法返回，重新来

666

研究一下，

@tallman2014 苹果机子最上面有返回键哇，注销的功能还没上呢。后面完善起。I‘m webapp-cnodejs-vue

@tallman2014 苹果机子最上面有返回键哇，注销的功能还没上呢。后面完善起。I‘m webapp-cnodejs-vue

下载一份到本地运行的时候node-sass报错，搞定node-sass之后运行node server.js发现

dyld: lazy symbol binding failed: Symbol not found: _libsass_version
  Referenced from: /Users/WangMing/Documents/Vue-cnodejs/node_modules/node-sass/vendor/darwin-x64-47/binding.node
  Expected in: flat namespace

想问下你的node版本是多少，我用的nvm管理的node版本是最新的5.1.0

@wandergis 我用的node V4.2.1,node-sass不是很好装，你把node_modules删掉重新装下，多等会。I‘m webapp-cnodejs-vue

@shinygang 那个我已经装好了，但是就是在执行node server的时候报的上面的错，我换成跟你一样的版本试试

@wandergis 可能没装对，我同事上次装也是第一次装了不行，第二次才可以的，你可以多试一次。I‘m webapp-cnodejs-vue

@shinygang 好的好的，谢谢你耐心回答，刚好看看你这个项目学习学习vue和H5

问个小白问题：Vue.js能像AngularJS那样，实现Restful效果吗？

@wandergis 哈哈，客气了哈，我只是刚好遇到过这样的问题，有问题再交流吧。I‘m webapp-cnodejs-vue

@huazhenhz Restful是一种前后端交互规范，和angular或者vue关系不大，都可以这样弄。I‘m webapp-cnodejs-vue

@huazhenhz

express或者restify或者moajs都可以非常容易的实现rest

/**
 * Auto generate RESTful url routes.
 *
 * URL routes:
 *
 *  GET    /deliveries[/]        => delivery.list()
 *  GET    /deliveries/new       => delivery.new()
 *  GET    /deliveries/:id       => delivery.show()
 *  GET    /deliveries/:id/edit  => delivery.edit()
 *  POST   /deliveries[/]        => delivery.create()
 *  PATCH  /deliveries/:id       => delivery.update()
 *  DELETE /deliveries/:id       => delivery.destroy()
 *
 */

router.get('/new', $.new);  
router.get('/:id/edit', $.edit);

router.route('/')
  .get($.list)
  .post($.create);

router.route('/:id')
  .patch($.update)
  .get($.show)
  .delete($.destroy);

@shinygang 记得AngularJS可以实现浏览器地址栏里的Restful模式的Url。 比如，products/computers/dell，不知用Vue能实现这样的效果吗？

@huazhenhz 可以的，vue-router支持这样写的。I‘m webapp-cnodejs-vue

记得express是服务器端运作的。我希望能在浏览器端实现这样的效果。

@shinygang OK，多谢告知！

@huazhenhz rest需要服务端定义规范，前端按规范请求接口吧。如果服务端那边没这样规范，前端这样操作是徒劳了。I‘m webapp-cnodejs-vue

....头像好像。

不错啊

From Noder

@shinygang 我用QQ浏览器直接打开：http://shinygang.github.io/cnodevue/

@myy 哥们，我用QQ浏览器打开是正常的啊。

@shinygang 。。。好吧，可能是我人品有问题吧~~

mark

vue.js 还是react native更容易上手？或者哪个更好一些。

@moxiaobei2 Vue.js很容易上手。

@shinygang我用ionic搞过一个测试的app,比较吃力，而且不兼容。现在我们公司在研究react native，听说搞原生的也要求他们会。。。 您这个项目列表页没“回到顶部”功能，体验度不好。

@anjostar 这个我专门这样处理的，而且使用的用户也不回拉到几千条这样子。最开始我是你那种方案，但是这个方案有个bug：用户在某一页停顿的时候，有人评论了其他页面的专题，专业下拉下一页的时候会存在重复数据了。

@Jackalchenxuxu 这个google浏览器调试模式开启的时候可以看你的页面。，至于页面元素就直接在你想看的元素右键有个“审查元素”。 总之，用好google浏览器调试模式，一切皆有可能。

@shinygang 百度贴吧的客户端就是这个鬼样子，上拉刷新，结果显示出来的还是原来的帖子。

@shinygang， 多谢！ 我实验了一下，感觉很不错。界面的部分理解变得清晰了很多。

@Jackalchenxuxu 欢迎重构代码、

@dlutwuwei cnode服务端做了允许跨域的操作，你可以看cnode的源码。

不打算做上页面切换动画吗？ 还有为何用gulp来压缩打包，感觉你这样配不够自动化

再请教个小白问题。 每个模板页面都有个route data (transition){ 我想问的是，是那里触发的， route 好像是执行的起始点， 我想知道是那里触发了data (transition)， transition 回调对象，对象是什么对象，transition = Object {to: Route, from: Object}， 看起来想路由对象，是vue的插件么。

我知道了，要学习vue-router。 要看这个文档 http://router.vuejs.org/zh-cn/pipeline/hooks.html#transition-object

@shinygang 那么你是如何发布上线的，webapp也要发布，然后别人下载安装呀？

@YuKaiChan 没有发布安装，直接网址访问的。

最近也在看vue, 从楼主这个项目的源码中学到了很多, 多谢. 另外,下拉加载那个问题太耗流量了, 如果滑动几页, 每次都全部重新加载就好几兆了, 后面会越来越慢. 但如果只更新页数总共才几百K , 然后每次更新的时候做一个重复检查不是更好? 想看最新的回复帖子就让他手动刷新去吧, 哈哈

请问一下，我把工程在本地运行的时候，报了下面的错误 ERROR in The node API for babel has been moved to babel-core. @ multi main webpack: bundle is now VALID.

@shanshantoyou 你看下你安装的babel和babel-core，先确保环境是对的。

你好，我现在卡在微信滑动后动重载的问题，我用的是vue2.0，你有尝试过吗？？vue-router2的版好像并没有那么灵活？

比较起来,vuejs还是容易上手的

大神。麻烦问一下vue-router　history 模式build之后服务器后端要怎么配置。apache配置按官网来不对啊。求教

@shinygang 大神，vue-router history模式怎么配置服务器后端。按官网来不对啊

赞一个

mark

这就是bug

内容来自->vue2-cnode

@shinygang 作者你好，为什么user-info.vue文件里的那段代码

this.$router.push({
 name: 'login',
  query: {
   redirect: encodeURIComponent(this.$route.path)
}
 });

不是应该导航到：http://localhost:8020/login?redirect=%2Flist吗？为什么在浏览器中显示的是：http://localhost:8020/login?redirect=```%25```2Flist呢？```%25```不是代表‘%’号么？我不太理解，能否解释下.

make From Noder