前言

在之前的两篇文章中，我们分析了网站搭建和几个重要页面的Vue文件编写，如果没看过前两篇文章的建议看一下，今天我们继续分析其他页面的编写过程。

1. Vue2.0+Webpack搭建完整简书网站系列教程（1）

2. Vue2.0+Webpack完整案例之搭建简书网站（2）

附上GIthub地址，感兴趣的可以自行clone或者fork到本地运行。

Github地址

Login.vue

首先我们来看看简书网站的登录页面，如下图所示。

登录页面

我们分析下登录页的构成。

1. 登录页logo

2. 注册/登录切换

3. 用户名和密码输入框，如果是注册，则多一个邮箱/电话号码输入框。

4. 注册/登录按钮

5. 底部显示信息

• Login.vue的template

通过以上的分析，我们得到Login.vue的template部分代码如下。

首先是登录时，form表单的内容。

登录时form表单

然后是注册时的form表单内容。

注册时form表单内容

由于Login.vue的style部分代码比较长，大家可以自行下载项目到本地后仔细阅读。

Bonus.vue

Bonus.vue是精选页面，一年总共12个月，每个月会选出一篇优美的文章，这里我也模仿着做出了一个页面，如下所示，只展示了三个月的文章，后面几个月类似。

Bonus.vue页面展示

我们分析下Bonus.vue页面的构成，一年中的十二个月每个月由一个ul的li构成，总共4列，每个具体的li包含以下内容。

1. 代表每个月特色的背景图

2. 一首短诗的标题

3. 具有每个月特色的内容
   

• Bonus.vue的template

根据以上的分析，我们得出Bonus.vue的template内容如下。

Bonus.vue的template部分代码

同样，Bonus.vue的style部分代码比较多，感兴趣的可以自行下载至本地运行，然后仔细阅读。

WriteArticle.vue

WriteArticle.vue是写文章的页面，集成了Vue富文本编辑器，可以用来写出一篇精美格式的文章，页面布局如下图所示。

WriteArticle.vue页面

WriteArticle.vue页面很简单，主要包括文章发布结果的提示信息，以及Vue富文本编辑器VueQuillEditor。

WriteArticle.vue的template部分代码如下。

WriteArticle.vue的template部分代码

Download.vue

模仿简书网站的样式，做了一个下载页，页面内容如下图所示。

Download.vue页面

当然，我并没有开始真正的App，因此这个页面只是显示了几张图片而已，因此其template部分的代码也会比较简单。

Download.vue的template部分代码

总结

至此，我用了三篇文章来具体分析了简书网站每个页面的构成，以及涉及到的代码，有很多地方的style部分代码由于篇幅原因可以自行运行再仔细阅读。

在接下来的文章中，我会讲到如何用Express进行服务端搭建，并针对一个具体的功能，讲到前端和后端的交互，这样就可以简单的实现一个全栈了。

后续内容，敬请期待~