本文我们主要和大家分享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}}
eMart 网店系统下载功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标
网友回复：
评论者：{{i.author.loginname}} 评论于：{{i.create_at}}
到此为止我们就完成了列表页面和内容页面的整合了，说明一下在调整后的script中，多了个mounted 方法，这个是vuejs的勾子函数，我理解的意思表示元素已经创建，数据也渲染完成。我们来设置admin-content的高度就没有问题了，不过这个我不确定是我的写法有问题，还是Amaze ui和vuejs整合后的影响，目前只能这样解决了。
最终效果
列表页面：
内容页面：
相关推荐：
