【koa + vue + es6 + node】全家桶前后端分离项目实战（4）？

接着前面的课题，今天主要说一下前端部分的内容。整个demo的前端部分很简单，就两个页面：一个是64卦的搜索列表页，一个是详情页。所以这篇文章是前端比较熟悉的技术 —— vue脚手架。

我在下面重点介绍一下页面的文件结构：

|- src
    |- assets
        |- css
            |- common.scss
            |- flex.css
    |- components
        |- Detail.vue
        |- Mobile.vue
        |- Vessel.vue
    |- router
        |- index.js
    |- App.vue
    |- main.js

UI框架用的是cube-ui，很轻量级，也很好用。这里的Vessel.vue是列表组件，Detail.vue是详情组件。

觉得前端这一块是比较基础的内容，新手对这块也算轻车熟路了。但是不提一下又显得整个项目的介绍不够完整。但是我实在觉得这个例子前端部分过于简单，拿不出什么亮点单独点评。

顺便说一下移动端的布局吧，这也是我在移动端常用的一种rem布局方式。如下，控制根目录的大小实现各种移动设备的适配。

今天前端部分的内容到这里结束了，整个项目的介绍也接近尾声。接下来是最后一篇：前段端项目如何部署。

总结

今天这篇文章主要介绍了前端页面的文件结构以及rem布局的适配问题。因为该项目前端用3个简单的页面做示范，过于简单，我就不做过多的分析了，新手一看就懂。

另外我建了一个QQ群，群号码是：1103713567（全栈开发跳板群）。方便大家一起交流前端方面或者项目方面的问题。