【小彬学vue系列专栏】 003 | 要有效率，于是有了导航

1.不太靠谱的浏览器书签

小彬在开发中一直都需要查阅不同网站的资料，久而久之就会积累一些高频的查阅网站，如果把这些网站网址都存放在Chrome浏览器的书签中，由于”安全上网“，浏览器的书签信息经常不能在多终端很好的同步，那自己保存为笔记吧，感觉又觉得太土不妥，怎么办呢？自己动手丰衣足食，开发一个。小彬准备采用坚果云+vue构建的静态页面形式，实现这个需求。

2.多终端同步利器

坚果云就类似百度云盘，可以多终端同步文件，但没有百度云那么拜金主义，百度云的普通用户和人民币玩家的待遇判若云泥，谁用谁知道。相比而言，坚果云就好太多了，虽然它有收费的服务但免费提供的空间、上传流量和速度已经够用了，小彬在这里也只是借用它同步一个几KB的html文件而已。

3.你的名字？

vue 项目的构建分为三个部分：HTML 部分 + JS 部分 + CSS 部分，在上个「时代」，前端开发是要求将这三个部分拆分成三个文件，并通过在 html 中引入 css 文件和 js 文件来的方式，组织前端开发的。

「话说天下大势，分久必合，合久必分」

前端也逃不过这个「命运」的轮回。vue中文件的组织方式是在一个文件中同时写 html、css、js代码，这个被他们美称为：「单文件」

4.实现小小需求

小彬前端使用 ElementUI 提供的「NavMenu 导航菜单」、「Card卡片」、「Rate评分」这三个组件的组合，配合响应式布局实现需求。简洁、美观，朴素中透露出的专注感正符合小彬的美学。

源码地址