我用 Vue2 全家桶重写「daza.io」的前端

V2EX = way to explore

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

现在注册

已注册用户请登录

爱意满满的作品展示区。

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

文章固定链接： https://daza.io/articles/58303

在发布第一版的 daza.io 的时候 Vue 2 已经发布了，但当时的进度已经快完成了，所以就没有立即升级到 Vue 2 。

在把用 Vue 1 写的版本全部推翻重写的时候参考了大量项目，并且更好的理解了 Vuex 等技术。

欢迎大家通过首页的 DaoVoice 按钮给我提建议和反馈。

主页：https://daza.io 接口：https://api.daza.io

截图

技术栈

使用了变态严格的 airbnb 的规范进行代码检查，所以整个项目的代码可读情还是很高的

vue 2
vue-router 2
vuex 2
vue-resource
marked
highlight.js
simplemde
...

功能

Markdown 支持
七牛图片上传支持
Vue 与 jQuery 的混用
等等

获取源码

https://github.com/lijy91/daza-frontend https://github.com/lijy91/daza-backend https://github.com/lijy91/daza-ios https://github.com/lijy91/daza-android

讨论组

如果你对 daza.io 感兴趣，或者对我使用的技术有兴趣，欢迎加入讨论组。

第 1 条附言 · 2017-01-11 11:49:08 +08:00

感谢各位的吐槽，现在将引用的第三方库全部指向了 https://staticfile.org （之前全部合并进 vendor.js 里了），现在访问速度应该是比较正常了。

Vue

vuex

重写

代码

36 条回复 • 2017-01-14 20:14:59 +08:00

realpg

2017-01-08 12:30:49 +08:00

东北人表示无法直视你网站这个名字……

kimwang

2017-01-08 13:00:09 +08:00

感觉不错，收藏了慢慢看。

Kilerd

2017-01-08 13:18:45 +08:00

搞不懂你们为什么要用 js 前段框架，明明可以用传统的那种方式工作的。

打开你的网站，就当当 js 和 css 就跑了 2 M 。又不上 CDN 。

如果是手机，我绝对不会打开这样的网站。

这大概就是为什么以前 100M 流量都绰绰有余，现在几个 G 都随随便便没了。

murmur

2017-01-08 13:19:54 +08:00

单从第一页看 bootstrap+内容管理系统+cdn 完美符合要求以后还可以自己玩换肤

lijy91

2017-01-08 13:52:12 +08:00 via iPhone

@murmur 用的并不是 bootstrap

lijy91

2017-01-08 13:53:36 +08:00 via iPhone

@Kilerd 只能说明我的前端优化技术还不到家。

murmur

2017-01-08 13:53:40 +08:00

@lijy91 然而我说这个需求 bootstrap 做前端后台上个 wordpress 简直完美啊

mimzy

2017-01-08 15:30:52 +08:00

@realpg 我懂你的点 hhh

ferrum

2017-01-08 16:32:59 +08:00

感觉这种以内容为主的网站， SEO 很重要啊。

请问楼主如何解决 SEO 的问题？

scnace

2017-01-08 16:51:24 +08:00 via Android

@Kilerd 100m 就有点过分了🌚🌚

lijy91

2017-01-08 17:19:46 +08:00

@ferrum 准备上服务端渲染！！

shakespaces

2017-01-08 17:20:43 +08:00 via Android

@realpg 233333 你不说我还没联想

carlton

2017-01-08 17:49:55 +08:00

首页进入好慢, 包的体积太大了, vendor 包竟然 1M 多, 感觉你应该哪里压缩出问题了. 然后可以基于 vue-router 做按需加载的

scarlex

2017-01-08 17:58:39 +08:00

我加载完网站花了 22 秒

XiaoxiaoPu

2017-01-08 18:00:20 +08:00

@lijy91 https://daza.io/static/vendor/semantic/dist/semantic.css 忘了压缩了

jsq2627

2017-01-08 18:25:50 +08:00

http://checkgzipcompression.com/

juneszh

2017-01-08 18:39:39 +08:00

楼主尝试新生事物的积极心态还是要给予鼓励的

我们前几个月也用 Vue 来完成了一个社交项目

但是我觉得有个观点必需提出

当今流行的 JS 框架的出现并不是为了重现以前很简单就能完成并且已有很多成熟架构的东西

所以前面会有那么多人吐槽

WebAPP 或者 HybridApp 才是主要的表现舞台更能发挥他们的价值

livelazily

2017-01-08 19:17:52 +08:00

网页没开启 Gzip, Semantic css 没用 min 版

toddlt

2017-01-08 21:06:49 +08:00

@realpg 就服你

shiye

2017-01-08 21:24:35 +08:00

你这个首页给我优化可以搞到总体积 200k

lijy91

2017-01-08 21:28:45 +08:00 via iPhone

@shiye 欢迎给提 PR ！

shiye

2017-01-08 21:52:20 +08:00

@lijy91 要把对 Semantic-UI 和 jquery 的依赖去掉才行，不过你自己弄个博客闹着玩，不需要费这么大劲优化

afwefww

2017-01-08 22:25:17 +08:00

网站好漂亮，可是有一点点慢。我这里是小水管，花了 1.4 分钟下载了 3.4MB 素材才完全加载完首页（好一点的网络应该不会这么慢）。

但是同样条件下打开这个网站只需要不到 4s （我这里网络环境太差 ><），仅下载不到 100KB 数据就可打开首页：

http://suo.im/nPdwN

afwefww

2017-01-08 22:31:02 +08:00

补充：我这里打开本论坛首页需要 16s ，下载 800KB 内容。仅供参考。

sox

2017-01-08 22:34:36 +08:00

@Kilerd https://infernojs.org/about

> Inferno started as an idea two years ago, to see if a UI library could really improve the experience, battery, memory usage and performance on mobile devices. At the time we really struggled to get good performance on any UI library/framework at the time – it simply wasn't happening, **we spent a huge amount of time writing lots of vanilla JavaScript code and it did the job – but it was a mess.**

mingyun

2017-01-08 22:56:40 +08:00

厉害了

nfroot

2017-01-09 01:20:42 +08:00

@Kilerd 我来回答！

之前用火车头把几十万页面数据采出来（备份），发现严重的问题就是页面太大了，严重影响了采集速度。

那时候我就想，要是能用前端框架，其他内容都不用重复载入（指 JS,CSS,多页面共用 HTML ，前面那个最大的影响也是.net 生成的一个很大的没用的隐藏 input 数据字段），那该多好啊……（能节省流量，载入速度也上几个层次，国内小 VPS 这么贵，国外那么慢，意义还是很大的）

后来……发现前端框架这么好，但是复杂度也高，还要学最新的 JS 以及一堆附加的东西，完全不是我一个 JS 新手能玩得转的……

如果不是重度用户或者前端程序员，要简单粗暴用上来真不是那么容易的事情。花费这么大精力去学习，或许有点代价太高。

何况一升级版本又出来一大堆不兼容的东西。

但是对于重度用户和前端程序员来说，确实强大好用，让他们折腾去吧。