V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cyrbuzz
V2EX  ›  程序员

终于搭起来...Vue 仿写的实验楼整站,有 20+页面,希望得到一点支持和指教~ヽ(≧∀≦)ノ。

  •  3
     
  •   cyrbuzz ·
    HuberTRoy · 2019-09-29 21:28:57 +08:00 · 4671 次点击
    这是一个创建于 1642 天前的主题,其中的信息可能已经有所发展或是发生改变。

    嗯...

    写了好久了,断断续续的最近一个月终于完成的 V0.1 版本,也没有特别出彩的地方,只是把原网站照着样子实现了出来,从 0 开始,一步步摸索搭建。从不知道怎么做状态管理,不知道...Object,不知道怎么写异步,复用组件,到现在,20+页面,46 个抓取到的 API,终于用 Github Page 搭成了线上演示。嗯...第一次访问的时候有点慢,看 Chrome 分析打包出来的文件并不大,应该是连接 Github 访问的比较慢。

    虽然还有大量细节问题,但...总算是完成了一个阶段~,嘿嘿,希望可以得到各位前辈的支持。

    实例预览(就是低配版原站啦)

    1 2 3

    咦,这里好像有个奇怪的链接

    https://github.com/HuberTRoy/vue-shiyanlou

    不不不,千万不要有手滑Star,不慎Fork,失误watch o( ̄▽ ̄)d 。

    第 1 条附言  ·  2019-09-29 23:17:01 +08:00

    补图~~

    1.png 2.png 1.png

    35 条回复    2019-10-06 14:39:04 +08:00
    justin2018
        1
    justin2018  
       2019-09-29 21:49:04 +08:00   ❤️ 2
    手滑 Star,不慎 Fork 😁
    Applenice
        2
    Applenice  
       2019-09-29 21:52:32 +08:00   ❤️ 1
    好厉害
    shanlan
        3
    shanlan  
       2019-09-29 21:57:59 +08:00
    我就想请教下,这么多 CSS 是怎么练的?
    pinews
        4
    pinews  
       2019-09-29 22:00:10 +08:00   ❤️ 1
    不错,遇到了明日之星
    嗯,图片链接错了。
    cyrbuzz
        5
    cyrbuzz  
    OP
       2019-09-29 22:03:59 +08:00
    @justin2018
    再来一个 watch 就可以召唤神龙,实现愿望,出任 CE...
    拿错剧本了,谢谢支持~。
    cyrbuzz
        6
    cyrbuzz  
    OP
       2019-09-29 22:05:08 +08:00
    @Applenice
    嗯嗯,实验楼的设计很清爽,模仿起来也很爽。
    cyrbuzz
        7
    cyrbuzz  
    OP
       2019-09-29 22:09:10 +08:00
    @shanlan
    呃...走了很多弯路,到现在为止都没有将 CSS 归纳起来。
    样式的话一般不怎么懂的就直接去审查元素看看原来的实现,还不懂就上搜索引擎了。
    比如当时有一个三角形的 CSS 实现,一开始以为用的图片,审查元素里也没找到图片地址,后来用各种姿势在 Google 里是用 border 实现的三角形,然后回头看审查元素也发现了原实现。
    cyrbuzz
        8
    cyrbuzz  
    OP
       2019-09-29 22:12:37 +08:00
    @pinews
    φ(>ω<*) 前辈的一发 Star 或许能成为上 Trending 的关键也说不定(好遥远,逃~)。
    之前在掘金上写了一波总结,直接就用里面的图片啦~(不能贴链接呀)。
    brotherlegend
        9
    brotherlegend  
       2019-09-29 22:32:37 +08:00 via Android
    牛逼,css 我看了会晕
    cyrbuzz
        10
    cyrbuzz  
    OP
       2019-09-29 23:18:01 +08:00
    @pinews
    清了波缓存发现前辈说的是图片裂了= =,一直有缓存没发现会 403...
    cyrbuzz
        11
    cyrbuzz  
    OP
       2019-09-29 23:19:09 +08:00
    @brotherlegend
    呃...我一开始也晕,后来了解盒模型和 flex 布局后就有些缓和了。
    starsriver
        12
    starsriver  
       2019-09-29 23:48:00 +08:00 via Android
    恭喜你打开了搬砖大门,接下来就是看你要不要步入搬砖门槛了。
    laonian
        13
    laonian  
       2019-09-30 00:05:15 +08:00 via Android   ❤️ 1
    优秀
    zsg1994
        14
    zsg1994  
       2019-09-30 09:19:15 +08:00
    有了 flex 布局简单多了
    wdmx007
        15
    wdmx007  
       2019-09-30 09:21:46 +08:00   ❤️ 1
    readme 发现错字: sotre -> store
    LamKingTak
        16
    LamKingTak  
       2019-09-30 09:32:18 +08:00   ❤️ 1
    🐮🍺
    Hopetree
        17
    Hopetree  
       2019-09-30 09:55:43 +08:00   ❤️ 1
    这个跟那个饿了么有的一拼,实验楼的界面是很好看,我目前最喜欢的两个站的界面就是实验楼和少数派

    给你一个建议,可以让你的网站打开至少快几秒钟:1. vue 的组件都使用 cdn,2. router 按需加载

    虽然我也是刚学了点 vue,但是我试过使用 cdn 非常有效
    ResetCode
        18
    ResetCode  
       2019-09-30 10:34:48 +08:00   ❤️ 1
    手滑 star
    cyrbuzz
        19
    cyrbuzz  
    OP
       2019-09-30 10:47:48 +08:00
    @starsriver
    报告,我想搬瓦~。
    cyrbuzz
        20
    cyrbuzz  
    OP
       2019-09-30 10:48:23 +08:00
    @laonian
    既然前辈这么说了,感觉还真挺优秀~。
    cyrbuzz
        21
    cyrbuzz  
    OP
       2019-09-30 10:48:48 +08:00
    @zsg1994
    是的哎,flex 用起来很爽。
    cyrbuzz
        22
    cyrbuzz  
    OP
       2019-09-30 10:49:08 +08:00
    @wdmx007
    已更正,Thanks♪(・ω・)ノ。
    cyrbuzz
        23
    cyrbuzz  
    OP
       2019-09-30 10:49:34 +08:00
    @LamKingTak
    感谢支持~~。
    cyrbuzz
        24
    cyrbuzz  
    OP
       2019-09-30 10:57:02 +08:00
    @Hopetree
    嗯呢,我也很喜欢实验楼清爽的界面,写的时候内容借( tou )鉴( xue )了很多大神写的饿了么,直接扒的源码看怎么实现的,帮助巨大。

    CDN 这个学习到了~,谢谢~。

    router 现在是按需加载的吧,用了懒加载。
    ```
    const __import__ = file => () => import(`@/pages/${file}.vue`)
    ...{
    path: '/',
    name: 'Home',
    component: __import__('home')
    }
    ```
    cyrbuzz
        25
    cyrbuzz  
    OP
       2019-09-30 10:57:27 +08:00
    @ResetCode
    真诚感谢~。
    scyangjian
        26
    scyangjian  
       2019-09-30 13:50:19 +08:00   ❤️ 1
    赞就完事了
    Gladoos
        27
    Gladoos  
       2019-09-30 14:14:14 +08:00   ❤️ 1
    很还原啊
    Frank520
        28
    Frank520  
       2019-09-30 14:36:25 +08:00
    掘金开了防盗链的
    cyrbuzz
        29
    cyrbuzz  
    OP
       2019-09-30 16:19:07 +08:00
    @scyangjian
    Thanks♪(・ω・)ノ
    cyrbuzz
        30
    cyrbuzz  
    OP
       2019-09-30 16:19:47 +08:00
    @Gladoos
    能得到肯定太好了~
    cyrbuzz
        31
    cyrbuzz  
    OP
       2019-09-30 16:20:04 +08:00
    @Frank520
    是的= =,被缓存坑了一把。
    daimubai
        32
    daimubai  
       2019-10-01 21:31:31 +08:00
    你好,这个后端接口也是你写的吗
    cyrbuzz
        33
    cyrbuzz  
    OP
       2019-10-06 11:14:40 +08:00
    @daimubai
    哇...今天才收到提醒,实在抱歉。
    后端转发是我自己写的,地址在:
    https://github.com/HuberTRoy/vue-shiyanlou-backend

    但后端处理了什么内容还是实验楼官方的。
    daimubai
        34
    daimubai  
       2019-10-06 12:35:13 +08:00
    @cyrbuzz 那其他的接口您是怎么获取到的呢。。 新手
    cyrbuzz
        35
    cyrbuzz  
    OP
       2019-10-06 14:39:04 +08:00
    @daimubai
    其他接口是指什么?
    数据是实验楼官方,实验楼官方本身有数据接口( API ),他们没有必要做跨域,但我们自己写前端直接调用的话就会出现跨域问题,所以写了转发。

    整个过程大概是:

    分析官方接口 -> 发现没做跨域不能用 -> 写后端转发。

    我在掘金上写了一些总结,里面有写跨域问题:
    https://juejin.im/post/5d8ec6f0e51d4577ef53de1e
    可以看一下~,共同进步~。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2997 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 14:48 · PVG 22:48 · LAX 07:48 · JFK 10:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.