最近在学习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
截图
- 首页_列表页 -
- 侧边栏 -
- 帖子 -
- 新帖 -
- 个人信息 -
页面返回后,就跑到顶部去了
我比较想知道是怎么在github上面搭建演示网站
我竟然上截屏了😂
来自酷炫的 CNodeMD
@broven 嘿嘿,证明你很活跃嘛
不错不错,加油加油!<br/><br/><a class=“form” href=“https://github.com/shinygang/Vue-cnodejs”>I‘m webapp-cnodejs-vue</a>
@1340641314 是选择侧边栏的链接后吗?如果是,之前我也尝试让右侧内容保留原来的位置,但是会有固定定位的头部会有闪动。所以暂时不折腾这里了。
@shinygang 大大来了~ 你的作品让我学习到很多知识~再次谢谢大大~
@1340641314 就是静态博客嘛,我的是基于Hexo搭建的,你可以了解这方面的知识。 因为这个web app不涉及后台,因此可以把它当作静态资源进行访问了
@JChehe 跨域怎么解决?
@JChehe 先搜索看看
@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上。
比angular.js顺手吗
来自酷炫的 CNodeMD
@JChehe 晚上回去试试
@nprog 因为我还没尝试过angular不好评价。但是对我目前来说,vue的学习成本不高,比较容易上手。
翻页后游览器退回,读取的是第一页,这个体验有问题
@asfman OK,后续会抽空完善的。 谢谢你的建议
@JChehe \ue00e 期待
@JChehe 我的React版线上访问也弄好了,多谢指教额!
@1340641314 666 赞
性能跟react相比,有优势吗?
@yakczh react的生命周期,感觉要比vue的麻烦<br><br>来自疯狂的<a href=“https://github.com/1340641314/react-cnode” target="_blank">react-cnode</a>
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/#!/
试试
@beilunyang 不错哦,PC端的
😂
我参照你的方式配置路由一直不成功
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 比较容易