精华 用Vue.js编写了cnodejs.org的h5客户端(webapp), 代码已经升级到2.0的语法!
发布于 1 年前 作者 shinygang 34522 次浏览 最后一次编辑是 6 个月前 来自 分享

说明

最近感觉Vue.js很不错,就抽业余时间写了cnodejs社区的webapp,主要技术栈是Vue.js+webpack. 由于是业余时间写的,很多东西都还在完善之中。 目前由我和@yunkou 在一起维护,也欢迎大家提供宝贵点意见让我不断的优化该产品。

代码已经升级到2.0的语法,欢迎pr。

项目源码和线上地址

logo.png 源码地址:https://github.com/shinygang/Vue-cnodejs, 线上访问地址:http://shinygang.github.io/cnodevue/.

运行截图:

1.pic.jpg 2.pic.jpg 3.pic.jpg

联系方式

微信: g-ganggege 邮箱: 429517385@qq.com 个人感觉Vue.js还不错,也希望大家推进Vue社区的发展。

123 回复

vue还不错的,看好

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

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

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

好东西,顶一个!

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

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

@qxl1231 欢迎提bug和改进意见。产品还在不断完善中。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@klausgao 能具体说下不?

赞。最后怎么打包成app呢

为什么iOS向右滑动返回,会重载页面?

@yaojaa 这是webapp,还没打算打包成安装类型的app呢。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@zh-h 哥们,你怎么操作的?没操作出来你说的返回。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

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

@tallman2014 苹果机子最上面有返回键哇,注销的功能还没上呢。后面完善起。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@tallman2014 苹果机子最上面有返回键哇,注销的功能还没上呢。后面完善起。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

下载一份到本地运行的时候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删掉重新装下,多等会。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

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

@wandergis 可能没装对,我同事上次装也是第一次装了不行,第二次才可以的,你可以多试一次。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

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

问个小白问题:Vue.js能像AngularJS那样,实现Restful效果吗?

@wandergis 哈哈,客气了哈,我只是刚好遇到过这样的问题,有问题再交流吧。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@huazhenhz Restful是一种前后端交互规范,和angular或者vue关系不大,都可以这样弄。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@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支持这样写的。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

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

@shinygang OK,多谢告知!

@huazhenhz rest需要服务端定义规范,前端按规范请求接口吧。如果服务端那边没这样规范,前端这样操作是徒劳了。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@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登录吧。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@huazhenhz 建议你看些vue-router文档,是支持这样写的。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

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

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

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

@myy 哥们,咋个操作的,我用qq浏览器不卡啊。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

@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 做客户端啊

…头像好像。

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

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

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

@moxiaobei2 Vue.js很容易上手。

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

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

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

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

请问一个入门的问题,就是如果我是从头开始编写页面, 或者浏览Views/下的vue页面文件,请问,怎样能比较清楚的浏览页面的html元素(查看页面元素和布局位置等),目前代码的部分是比较清楚的一块(javascript部分)。 比较混杂的是 <section id=“page”> <!-- 首页列表 --> <ul class=“posts-list”> <li v-for=“item in topics" v-link=”{name:‘topic’,params:{id:item.id}}"> 这些部分,如果页面元素table, list, li, text等比较多,那想看页面的元素和位置等几乎不太可能了。

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

请问大家是怎么解决此类问题的? 多谢!

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

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

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

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

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

@Jackalchenxuxu 欢迎重构代码、

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

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

太厉害👍。

来自酷炫的 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。周末学习学习

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

@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机制来处理吧。

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

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

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

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

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

已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 处理)点击后替换了路由<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

学习了,好强大的样子<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

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

最近也在看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,先确保环境是对的。

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

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

来自酷炫的 CNodeMD

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

@stop2stare 哥们,当时我做的时候采用了两种方案,首先js能识别的二维码直接js端识别,不行就采用的服务端识别二维码,现在服务器到期服务端识别那个挂了,就没维护了,网页搞二维码识别比较麻烦,感觉没多大必要。<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>

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

学习了,赞赞赞!!!

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

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

@shinygang 大哥,竟然在这里碰到你,十一之前忘了是在哪个博客看到这个项目,由于初学Vue,然后立马clone了一下,看了一下大致的项目结构,然后自己就也搞了一个web端的cnode-vue,人比较笨,花了将近一个月才写完,web端搞完之后还想在搞个移动端的,正在构思中…,再次感谢Vue-cnodejs带给我的启发<br/><br/><a class=“tag” target=“new” href=“https://github.com/BubblyPoker/cnode-vue”>来自 cnode-vue</a>

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

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

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

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

回到顶部