这篇文章主要介绍了vuejs 填坑日记之使用amaze ui调整列表和内容页面,需要的朋友可以参考下
制作左侧菜单
一个后台管理系统，大致的样式都是分为南北东西的，而西（也就是左侧）一般是我们的菜单。如图：
我们今天就来把我们的项目完成到如上图的样式，首先我们来制作左侧的菜单，在/src/components/下新建menu.vue。代码如下：
现在我们的菜单就已经做好了，只需要将菜单应用到我们的项目中就可以了。打开/src/App.vue，修改如下位置：
立即学习“前端免费学习笔记（深入）”；
调整列表页面
打开/src/pages/Index.vue代码如下：
收件箱 / Inbox
注意：上面我们初始化查询第一页的数据，并规定每页显示10条，我们没有做分页功能的开发。是由于cnodejs.org的api并没有给我们返回分页的信息，将来如果是实际开发，那么接口正常情况是会返回分页信息的，我们到时候再具体的渲染就好了。
调整内容页面
打开/src/pages/Content.vue，代码如下：
作者：{{article.author.loginname}} 发表于：{{article.create_at}}
网友回复：
评论者：{{i.author.loginname}} 评论于：{{i.create_at}}
Shopxp网上购物系统下载Shopxp购物系统历经多年的考验，并在推出shopxp免费购物系统下载之后，收到用户反馈的各种安全、漏洞、BUG、使用问题进行多次修补，已经从成熟迈向经典，再好的系统也会有问题，在完善的系统也从在安全漏洞，该系统完全开源可编辑，当您下载这套商城系统之后，可以结合自身的技术情况，进行开发完善，当然您如果有更好的建议可从官方网站提交给我们。Shopxp网上购物系统完整可用，无任何收费项目。该系统经过
到此为止我们就完成了列表页面和内容页面的整合了，说明一下在调整后的script中，多了个mounted 方法，这个是vuejs的勾子函数，我理解的意思表示元素已经创建，数据也渲染完成。我们来设置admin-content的高度就没有问题了，不过这个我不确定是我的写法有问题，还是Amaze ui和vuejs整合后的影响，目前只能这样解决了。
最终效果
列表页面：
内容页面：
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
