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

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2429 days ago, the information mentioned may be changed or developed.

嗯...

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

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

实例预览（就是低配版原站啦）

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

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

不不不，千万不要有手滑Star，不慎Fork，失误watch o(￣▽￣)ｄ。

Supplement 1 · Sep 29, 2019

补图~~

楼整站

不不

Vue

fork

35 replies • 2019-10-06 14:39:04 +08:00

justin2018

Sep 29, 2019

手滑 Star，不慎 Fork 😁

Applenice

Sep 29, 2019

好厉害

shanlan

Sep 29, 2019

我就想请教下，这么多 CSS 是怎么练的？

pinews

Sep 29, 2019

不错，遇到了明日之星
嗯，图片链接错了。

cyrbuzz

Sep 29, 2019

@justin2018
再来一个 watch 就可以召唤神龙，实现愿望，出任 CE...
拿错剧本了，谢谢支持~。

cyrbuzz

Sep 29, 2019

@Applenice
嗯嗯，实验楼的设计很清爽，模仿起来也很爽。

cyrbuzz

Sep 29, 2019

@shanlan
呃...走了很多弯路，到现在为止都没有将 CSS 归纳起来。
样式的话一般不怎么懂的就直接去审查元素看看原来的实现，还不懂就上搜索引擎了。
比如当时有一个三角形的 CSS 实现，一开始以为用的图片，审查元素里也没找到图片地址，后来用各种姿势在 Google 里是用 border 实现的三角形，然后回头看审查元素也发现了原实现。

cyrbuzz

Sep 29, 2019

@pinews
φ(>ω<*) 前辈的一发 Star 或许能成为上 Trending 的关键也说不定（好遥远，逃~）。
之前在掘金上写了一波总结，直接就用里面的图片啦~（不能贴链接呀）。

brotherlegend

Sep 29, 2019 via Android

牛逼，css 我看了会晕

cyrbuzz

Sep 29, 2019

@pinews
清了波缓存发现前辈说的是图片裂了= =，一直有缓存没发现会 403...

cyrbuzz

Sep 29, 2019

@brotherlegend
呃...我一开始也晕，后来了解盒模型和 flex 布局后就有些缓和了。

starsriver

Sep 29, 2019 via Android

恭喜你打开了搬砖大门，接下来就是看你要不要步入搬砖门槛了。

laonian

Sep 30, 2019 via Android

优秀

zsg1994

Sep 30, 2019

有了 flex 布局简单多了

wdmx007

Sep 30, 2019

readme 发现错字： sotre -> store

LamKingTak

Sep 30, 2019

🐮🍺

Hopetree

Sep 30, 2019

这个跟那个饿了么有的一拼，实验楼的界面是很好看，我目前最喜欢的两个站的界面就是实验楼和少数派

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

虽然我也是刚学了点 vue，但是我试过使用 cdn 非常有效

ResetCode

Sep 30, 2019

手滑 star

cyrbuzz

Sep 30, 2019

@starsriver
报告，我想搬瓦~。

cyrbuzz

Sep 30, 2019

@laonian
既然前辈这么说了，感觉还真挺优秀~。

cyrbuzz

Sep 30, 2019

@zsg1994
是的哎，flex 用起来很爽。

cyrbuzz

Sep 30, 2019

@wdmx007
已更正，Thanks♪(･ω･)ﾉ。

cyrbuzz

Sep 30, 2019

@LamKingTak
感谢支持~~。

cyrbuzz

Sep 30, 2019

@Hopetree
嗯呢，我也很喜欢实验楼清爽的界面，写的时候内容借（ tou ）鉴（ xue ）了很多大神写的饿了么，直接扒的源码看怎么实现的，帮助巨大。

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

router 现在是按需加载的吧，用了懒加载。
```
const __import__ = file => () => import(`@/pages/${file}.vue`)
...{
path: '/',
name: 'Home',
component: __import__('home')
}
```

cyrbuzz

Sep 30, 2019

@ResetCode
真诚感谢~。

scyangjian

Sep 30, 2019

赞就完事了

Gladoos

Sep 30, 2019

很还原啊

Frank520

Sep 30, 2019

掘金开了防盗链的

cyrbuzz

Sep 30, 2019

@scyangjian
Thanks♪(･ω･)ﾉ

cyrbuzz

Sep 30, 2019

@Gladoos
能得到肯定太好了~

cyrbuzz

Sep 30, 2019

@Frank520
是的= =，被缓存坑了一把。

daimubai

Oct 1, 2019

你好，这个后端接口也是你写的吗

cyrbuzz

Oct 6, 2019

@daimubai
哇...今天才收到提醒，实在抱歉。
后端转发是我自己写的，地址在：
https://github.com/HuberTRoy/vue-shiyanlou-backend

但后端处理了什么内容还是实验楼官方的。

daimubai

Oct 6, 2019

@cyrbuzz 那其他的接口您是怎么获取到的呢。。新手

cyrbuzz

Oct 6, 2019

@daimubai
其他接口是指什么？
数据是实验楼官方，实验楼官方本身有数据接口（ API ），他们没有必要做跨域，但我们自己写前端直接调用的话就会出现跨域问题，所以写了转发。

整个过程大概是：

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

我在掘金上写了一些总结，里面有写跨域问题：
https://juejin.im/post/5d8ec6f0e51d4577ef53de1e
可以看一下~，共同进步~。