置顶 用Vue.js编写了cnodejs.org的h5客户端(webapp)
发布于 1 个月前 作者 shinygang 8991 次浏览 来自 分享

说明

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

项目源码和线上地址

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社区的发展。

97 回复

vue还不错的,看好

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

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

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

好东西,顶一个!

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

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

@qxl1231 欢迎提bug和改进意见。产品还在不断完善中。

I‘m webapp-cnodejs-vue

赞。最后怎么打包成app呢

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

@yaojaa 这是webapp,还没打算打包成安装类型的app呢。

I‘m webapp-cnodejs-vue

@zh-h 哥们,你怎么操作的?没操作出来你说的返回。

I‘m webapp-cnodejs-vue

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

@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是服务器端运作的。我希望能在浏览器端实现这样的效果。

@huazhenhz rest需要服务端定义规范,前端按规范请求接口吧。如果服务端那边没这样规范,前端这样操作是徒劳了。

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

@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更容易上手?或者哪个更好一些。

@shinygang我用ionic搞过一个测试的app,比较吃力,而且不兼容。现在我们公司在研究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的吗

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

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

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

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

怎么实现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 没有发布安装,直接网址访问的。

回到顶部