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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1880 天前的主题，其中的信息可能已经有所发展或是发生改变。

嗯...

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

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

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

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

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

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

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

补图~~

楼整站

不不

Vue

fork

35 条回复 • 2019-10-06 14:39:04 +08:00

justin2018

2019-09-29 21:49:04 +08:00

手滑 Star，不慎 Fork 😁

Applenice

2019-09-29 21:52:32 +08:00

好厉害

shanlan

2019-09-29 21:57:59 +08:00

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

pinews

2019-09-29 22:00:10 +08:00

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

cyrbuzz

2019-09-29 22:03:59 +08:00

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

cyrbuzz

2019-09-29 22:05:08 +08:00

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

cyrbuzz

2019-09-29 22:09:10 +08:00

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

cyrbuzz

2019-09-29 22:12:37 +08:00

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

brotherlegend

2019-09-29 22:32:37 +08:00 via Android

牛逼，css 我看了会晕

cyrbuzz

2019-09-29 23:18:01 +08:00

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

cyrbuzz

2019-09-29 23:19:09 +08:00

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

starsriver

2019-09-29 23:48:00 +08:00 via Android

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

laonian

2019-09-30 00:05:15 +08:00 via Android

优秀

zsg1994

2019-09-30 09:19:15 +08:00

有了 flex 布局简单多了

wdmx007

2019-09-30 09:21:46 +08:00

readme 发现错字： sotre -> store

LamKingTak

2019-09-30 09:32:18 +08:00

🐮🍺

Hopetree

2019-09-30 09:55:43 +08:00

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

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

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

ResetCode

2019-09-30 10:34:48 +08:00

手滑 star

cyrbuzz

2019-09-30 10:47:48 +08:00

@starsriver
报告，我想搬瓦~。

cyrbuzz

2019-09-30 10:48:23 +08:00

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

cyrbuzz

2019-09-30 10:48:48 +08:00

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

cyrbuzz

2019-09-30 10:49:08 +08:00

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

cyrbuzz

2019-09-30 10:49:34 +08:00

@LamKingTak
感谢支持~~。

cyrbuzz

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

2019-09-30 10:57:27 +08:00

@ResetCode
真诚感谢~。

scyangjian

2019-09-30 13:50:19 +08:00

赞就完事了

Gladoos

2019-09-30 14:14:14 +08:00

很还原啊

Frank520

2019-09-30 14:36:25 +08:00

掘金开了防盗链的

cyrbuzz

2019-09-30 16:19:07 +08:00

@scyangjian
Thanks♪(･ω･)ﾉ

cyrbuzz

2019-09-30 16:19:47 +08:00

@Gladoos
能得到肯定太好了~

cyrbuzz

2019-09-30 16:20:04 +08:00

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

daimubai

2019-10-01 21:31:31 +08:00

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

cyrbuzz

2019-10-06 11:14:40 +08:00

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

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

daimubai

2019-10-06 12:35:13 +08:00

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

cyrbuzz

2019-10-06 14:39:04 +08:00

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

整个过程大概是：

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

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