制作左侧菜单

一个后台管理系统，大致的样式都是分为南北东西的，而西（也就是左侧)一般是我们的菜单。如图：

我们今天就来把我们的项目完成到如上图的样式，首先我们来制作左侧的菜单，在/src/components/下新建menu.vue。代码如下：

模板div class=' admin-侧边栏am-off canvas ' id=' admin-off canvas ' div class=' am-off canvas-bar admin-off canvas-bar ' ul class=' am-list admin-侧边栏-list ' Li class=' admin-parent ' v-for='菜单中路由器-链接：到='菜单。href“{菜单。name } }/router-link ul class=' am-list am-collapse admin-侧边栏-sub am-in ' id=' collapse-nav ' Li-for='首页，href:'/'，子项3360[]}，名称： '写信，href:'/'，子项3360[]}，名称： '收件箱，href:'/Inbox '，子项3360[]}，名称： '发件箱，href : /发件箱，子项：[]}，名称： '垃圾箱，href:'/'，子项3360[]}，名称： '草稿箱，href:'/'，子项3360[]}，名称： '其他文件夹，href:'/'，子项3360[{ name : '已发送邮件，href:'/' }，{ name: '已删除邮件，href : '/' }]}]} } } }脚本现在我们的菜单就已经做好了，只需要将菜单应用到我们的项目中就可以了。打开/src/App.vue，修改如下位置：

调整列表页面

打开/src/pages/Index.vue代码如下：

模板div class=' admin-content ' div class=' admin-content-body ' div class=' am-cf am-padding am-padding-bottom-0 ' div class=' am-fl am-cf ' strong class=' am-text-primary am-text-LG '收件箱/strong/小收件箱/small/div/div HR div class=' am-g ' div class=' am-u-sm-12am-u-MD-6 ' div class=' am-BTN-工具栏' div class=' am-BTN-组am-BTN-组-xs '按钮类型=' button ' class=' am-BTN am-BTN-BTN-default ' @ click=' toad ' span class=' am-icon-plus '/span新增/button button type=' button ' class=' am-BTN am-BTN-default ' @ click=' save ' span class=' am-icon-save '/span保存/button button type=' button ' class=' am-BTN am-BTN-default ' @ click=' verify ' span class=' am-icon-archive '/span审核/button button type=' button ' class=' am-BTN am-BTN-default ' @ click=' remove ' span class=' am-icon-trash-o '/span删除/button/div/div/class=' am-u-sm-12am-u-MD-3 ' div类=' am-input-group am-input-group-sm ' input type=' text ' class=' am-form-field ' span class=' am-input-group-BTN ' button class=' am-BTN am-BTN-default ' type=' button '搜索/按钮/span/div/div/-admin-content-body end-div class=' am-g ' style=' margin-top :5 px；div class=' am-u-sm-12 ' form class=' am-form ' table class=' am-table am-table-striped am-table-hover table-main am-table-bordered am-table-radius '以及tr class=' table-check '输入类型=' checkbox '/thth class=' table-id ' id/thth class=' table-title '标题/thth class='table-type '类别/thth class=' table-author am-hide-sm-only '作者/thth class=' table-date am-hide-sm-only '修改日期/thth class='table-set '操作/th/tr/TD t车身tr-v-for='(项目，索引)在表格列表中TD输入类型=' checkbox '/TD TD TD { { index 1 } }/TD tdrouter-链接到：=' '/Content/'项。id为“{ item。title } }/router-link/TD { { item }。tab } }/TD class=' am-hide-sm-only ' { item。作者。login name } }/TD TD class=' am-hide-sm-only ' { item。create _ at } }/TD TD div class=' am-BTN-工具栏' div class编辑/button button class=' am-BTN am-BTN-默认am-BTN-xs am-hide-sm-only ' span class=' am-icon-copy '/span复制/button button class=' am-BTN am-BTN-默认am-BTN-xs am-text-danger am-hide-sm-only ' span class=' am-icon-trash-o '/span删除/button/div/div/TD/tr/t body/table div class=' am-cf '共15 条记录div class=' am-fr ' ul class=' am-pagining ' Li class=' am-disabled ' a href=' # /a/Li Li class=' am-active ' a href=' # ' 1/a/Li lia href=' # ' 2/a/Li lia href=' # ' 3/a/Li lia href=' # ' 4/a/Li lia href=' # ' 5/a/Li lia href=' # ' a/Li/ul/div/form/div-am-g end//div/div/模板脚本导出默认{ name : 'Inbox '，data(){ return { table list :[]} }，created(){ this。 初始化()}，挂载(){ $(' .管理内容').css('height '，(文档。文档元素。客户端高度-36-50)' px ')；}，方法： {初始化(){ this .$api.get('topics '，{page:1，limit:10}，r={ console。日志(r)；如果成功了。TableList=r . data} }) }，toAdd(){ alert('添加');}，save(){ alert('保存');}，verify(){ alert('审核');}，remove(){ alert('删除');} } }/脚本注意：上面我们初始化查询第一页的数据，并规定每页显示10条，我们没有做分页功能的开发。是由于cnodejs.org的美国石油学会(美国石油协会)并没有给我们返回分页的信息，将来如果是实际开发，那么接口正常情况是会返回分页信息的，我们到时候再具体的渲染就好了。

调整内容页面

打开/src/pages/Content.vue，代码如下：

template div class=' admin-content ' h2v-text=' article . title '/h2p作者：{{article.author.loginname}}发布于：{{article.create_at}}/P HR文章v-html=' article。内容/文章H3回复用户：/H3 ul Li v-for='我在文章中。副本' pCommentator:{ { I . author . loginname } }评论：{ { I . create _ at } }/p article v-html=' I . Content '/article/Li/ul/div/template script导出默认值{ name : 'Content '，data () { return { id: this。$route.params.id，article : { author : { loginname : ' ' } } } }，created(){ this . getdata()；}，挂载(){ $('。admin-content’)。css('height '，(document . document element . client height-36-50)' px ')；}，methods: { getData () { this。$api.get('topic/' this.id，null，r={ console . log(r . data)；this . article=r . data；})} } }/脚本到目前为止，我们已经完成了列表页面和内容页面的集成。说明调整后的脚本中有一个挂载的方法，是vuejs的一个钩子函数。我的理解是元素已经创建，数据已经呈现。我们设置admin-content的高度没有问题，但是我不确定是我写的有问题还是拍案叫绝ui和vuejs集成的影响，目前只能这样解决。

最终效果

列表页：

内容页面：

摘要

上面提到的是边肖介绍给大家的VueJs使用了惊奇ui来调整列表和内容页面，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！