如何利用Vue+Element做个小页面如何利用Vue+Element做个小页面

前言
项目结构
MarkDown编辑器
消息模块

消息导航
内容代码（消息）
设置模块

总结

前言直接看效果，干啥慢慢猜~

文章图片

项目结构

文章图片

这个的话可以看到分了一些组件嘛。然后总体还是vue+elementui 后面活下来了再用uniapp做移动端嘛。

MarkDown编辑器这个是咱们比较主要的功能嘛。
也是用了meavon这个开源的Markdown组件嘛。

文章图片

然后是文章上传嘛，这里有个弹窗嘛。

文章图片

代码如下

#center {margin-top: 5%; width: 96%; height: 96%; border: 1px; }img {margin: auto; margin-left: 30%; height: 40%; width: 40%; position: relative; top: 10%; }input {width: 85%; height: 30px; border-width: 2px; border-radius: 5px; border-color: #00c4ff; border-bottom-color: #2C7EEA; color: #586e75; font-size: 15px; }

这次的前端代码其实是完全重构，原来上个学期期末写的玩意咋说呢，还不如我以前直接用Django做的Dome。做着做着变成了个人博客，然后又重新改回多人社区，赶鸭子上架连文档都没有搞好，所有后面我直接摆烂了，本来寒假要动工的，但是学习任务拉满，唉。

消息模块这个也是一个比较重要的模块，因为这个消息可以把几个模块联合起来。

文章图片

先来说说那个标号

文章图片

是咋来的，这个其实就是elementui里面的这个

文章图片

然后是咱页面

文章图片

后面的几个其实是类似的

文章图片

这个你们直接看着写

消息导航
首先是咱的消息导航代码

.el-header {background-color: #e5efe2; color: #333; line-height: 60px; }.el-aside {color: #333; }.router-link-active {text-decoration: none; }.alink{text-decoration: none; }