最近在学习Vue.js，因为实践是一种很好的学习方式，所以利用 Vue.js 和 CNodejs.org 提供的 API 搭建了一个Web APP。
访问地址：http://jchehe.github.io/mystatic/vue_cnode/
源码地址：https://github.com/JChehe/vue_cnode
PS: 你要★ Star ★我也不会拒绝哦^_^
访问二维码：
在此，也感谢 @shinygang 的 用Vue.js编写了cnodejs.org的h5客户端(webapp) 项目，我从中也学到了一些知识。
由于经验不足，若各位大大发现应用或代码哪里有可以改进或不完善的地方，欢迎大家在提 issue 或 pr，也可以评论。
本地部署
当然，你也可以在本地部署该项目。
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
截图
- 首页_列表页 -
- 侧边栏 -
- 帖子 -
- 新帖 -
- 个人信息 -
回复 (44)
页面返回后，就跑到顶部去了
我比较想知道是怎么在github上面搭建演示网站
@broven 嘿嘿，证明你很活跃嘛
不错不错，加油加油！I‘m webapp-cnodejs-vue
@1340641314 是选择侧边栏的链接后吗？如果是，之前我也尝试让右侧内容保留原来的位置，但是会有固定定位的头部会有闪动。所以暂时不折腾这里了。
@shinygang 大大来了~ 你的作品让我学习到很多知识再次谢谢大大
@1340641314 就是静态博客嘛，我的是基于Hexo搭建的，你可以了解这方面的知识。 因为这个web app不涉及后台，因此可以把它当作静态资源进行访问了
@1340641314 前提是API是开放的，就好像CNode提供了部分开放的API
@JChehe 我这里也写了一个react版code，但是不晓得怎么像你那样放到线上访问：https://github.com/1340641314/react-cnode
@1340641314 我在Github page 搭建了静态博客https://pages.github.com/，而vue_cnode则放在source目录下，source目录下的文件会在发布到Github前进行“渲染”处理，但是我们配置文件_config.yml中设置了 skip_render: mystatic/**/*，即忽略mystatic文件下的文件，直接发布到github上。
@nprog 用法有什么区别
来自酷炫的 CNodeMD
@nprog 因为我还没尝试过angular不好评价。但是对我目前来说，vue的学习成本不高，比较容易上手。
翻页后游览器退回，读取的是第一页，这个体验有问题
@asfman OK，后续会抽空完善的。 谢谢你的建议
@JChehe \ue00e 期待
@JChehe 我的React版线上访问也弄好了，多谢指教额！
@1340641314 666 赞
性能跟react相比，有优势吗？
@yakczh react的生命周期，感觉要比vue的麻烦来自疯狂的react-cnode
mark
@yakczh 我个人认为：当一个应用没有上一个量级时（即不足够大），应该看不出明显差距吧。
还行
请问一下楼主，你有没有获取到cnode的所有的帖子的数目呢？官方提供的API没见有可以获取总共多少条主题记录的吧？那么没有获得总数怎么进行分页呢？
@Succy 目前的确是没有提供的，你可以想CNode 一样，用省略号。 极端点：可以https://cnodejs.org/api/v1/topics?limit=100000000000000000000
其中limit是无限大==！！ 但这是不正常的做法
第一次进入，好久才进去
进去后，速度就快了
@44886 也许是我代码写得不够好，当然这也和服务器返回的数据有关。另外，页面是放在github上的，这也导致页面相对慢了点。 最后，也谢谢你的体验与建议。
也在学Vue，握爪~~
@JChehe 哦哦，难怪，，，我之前也放了在github 上的，实在太慢了，就搬到百度BAE上了
@44886 哈哈，我主要用于展示的，而且是免费。
@44886 Coding上速度还不错
不错。。我也用vuejs + vue-cli + vue-router + vuex写过一个。 gayhub: https://github.com/beilunyang/cnodejs-vue demo: http://demo.bitibiti.com/cnodejs-vue/#!/
试试
😂
我参照你的方式配置路由一直不成功
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import routerMap from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.use(VueRouter)
var router = new VueRouter()
routerMap(router)
Vue.use(router)
router.start(App, 'app')
报错信息如下 vue.common.js?e881:10008 Uncaught TypeError: plugin.apply is not a function Vue.use @ vue.common.js?e881:10008 (anonymous function) @ main.js?3479:13 (anonymous function) @ app.js:699 webpack_require @ app.js:583 fn @ app.js:107 (anonymous function) @ app.js:637 webpack_require @ app.js:583 (anonymous function) @ app.js:629 (anonymous function) @ app.js:632 可以帮忙看下吗
@Fsoya 你最后那句router.start(App, 'app')换成router.start(Vue.extend(App), '#app')试试
@Succy 试了不行 是Vue.use(router)这报错了
Vue.use = function (plugin) {
/* istanbul ignore if */
if (plugin.installed) {
return;
}
// additional parameters
var args = toArray(arguments, 1);
args.unshift(this);
if (typeof plugin.install === 'function') {
plugin.install.apply(plugin, args);
} else {
plugin.apply(null, args);
}
plugin.installed = true;
return this;
};
plugin.apply(null, args); 这个地方报错的
貌似很不错。容易上手吗？
来自酷炫的 CNodeMD
@dpc761218914 比较容易