Skip to content

「ONE · 一个」SPA,Vue版本单页应用

Notifications You must be signed in to change notification settings

sabrinaluo/vue-one

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

VUE-ONE LICENSE MIT

「ONE · 一个」SPA,Vue版本单页应用

Demo URL

http://sabrinaluo.com/vue-one

API

由于没有找到可用的「ONE · 一个」API,所以自己写了一个。

由于没有服务器,所以API服务托管在heroku上。

由于heroku服务器在美国以及sleep policy,所以API 特!别!慢! 😢

当你访问API的时候发生了什么?

  1. 如果你在中国,首先从中国发送请求到美国(heroku);
  2. 如果API处于睡眠状态,heroku需要十秒左右唤醒API;
  3. 然后爬虫从美国到中国(one的官网)爬取内容,把数据暂存在美国
  4. 数据从美国作为“响应”返回中国
  5. 最后你就看到了内容…

笔记

整个项目是一个比较典型的SPA应用,使用了组件,不同路由渲染不同的view,RESTful API等概念。感觉比起作者给出的例子hackernews使用firebase实时数据库,RESTful API更常用

JS

  • 使用了vue-cli生成脚手架
  • 使用了vue-routervue-resource
  • 配合Vue.http.options.rootvue-router使用,在src/stores下可看到相关使用
  • 在路由的定义中,使用了具名路径
  • 在定义App.vue(根组件?)时,要用<div>包住整个组件。因为假如这样启动app,router.start(App, '#app');,其实整个组建不是嵌入到#app之中,而是替换#app这个元素。如果没有一个root元素包裹住组件,可能会影响scope(个人猜测啦,反正不包住会报错这是真的)
  • 以前觉得用不到数据结构,图片轮播carousel其实就是一个循环链表,但我写的时候也没觉得自己写的是链表,可能是因为抽象思维太差啦
  • 组件属性在定义时用camelcase,而在html中引用组件时,要用kebab-case,也就是用-连接各个单词

CSS

  • img下方总是会有大概5px的空白,margin padding怎么改都不管用,原因是img是内联元素,解决方法
img {
    display: block;
}
  • 单行文字,如果超出宽度则在结尾显示...
p {
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Deploy

vue-one目录下克隆远程gh-pages分支,并命名为dist

git clone -b gh-pages git@github.com:sabrinaluo/vue-one dist

Build之前记得改assetsPublicPath

IMPORTANT!

config/index.js中的assetsPublicPath: '/'

  • 在开发环境下应该设为'/',否则localhost:3000将返回404
  • 如果deploy到github的gh-pages分支,也就是说如果项目不是在根目录下被访问而是子目录下,那么应该设为'./',再进行npm run build,然后用build出来的dist文件夹deploy即可正确显示。

其他

我也不知道我为神马这么爱山寨:sweat_smile:

如果你觉得这个repo对你学习vue有帮助,又恰好有点零钱,那么请赞助我买个服务器吧!非常感谢:smile:

Alipay

About

「ONE · 一个」SPA,Vue版本单页应用

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published