大佬们，有没有 vue 后台系统的教程，前端快把我搞的快疯了

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2144 天前的主题，其中的信息可能已经有所发展或是发生改变。

下载需要一个后台系统，看了下 vue 比 react 稍微好上手点，所以就选 vue 了准备用 element 作为 UI 框架，我想要的效果是 header 和 lift 还有右侧的内容都一致，后面我只需要在内容 main 里面添加内容就可以了。

第一张图为 http://localhost:8080/#/home 首页是正常的

第二张我弄个报表中心 http://localhost:8080/#/reportcenter，怎么就成这样了，按道理表格是在右边啊，怎么跑到上面去了，我在 NavHome.vue 里面加了 el-main 也可以，但是我有页面跳转的以后求大佬们帮助啊

结构如下 Home 如下

Vue

大佬

后台

header

23 条回复 • 2019-01-07 20:31:00 +08:00

statfall

2019-01-06 22:59:14 +08:00 via Android

试试 d2admin ？

hly9469

2019-01-06 23:00:05 +08:00 via iPhone

不有现成的 element admin 么

richangfan

2019-01-06 23:07:15 +08:00

不有现成的 iview admin 么

kaikai5601

2019-01-06 23:09:56 +08:00

@hly9469 那个太复杂了，我只要简单的功能就好

kaikai5601

2019-01-06 23:10:22 +08:00

@richangfan 想用 element ui 怎么就那么难~~是我技术菜

Lattez

2019-01-06 23:37:16 +08:00

考虑顶栏和 navbar 做到一个页面，然后其他的在右侧做 router 切换？

kaikai5601

2019-01-07 00:49:48 +08:00 via iPhone

@Lattez 你的意思是就是想要顶部和左边导航做到一个页面？

FrankFang128

2019-01-07 01:02:24 +08:00

css 问题？

jry

2019-01-07 04:57:44 +08:00 via iPhone

我写了个简单的 https://github.com/tpvue-admin.git

jry

2019-01-07 04:58:29 +08:00 via iPhone

@jry http://github.com/tpvue/tpvue-admin.git

WilliamLin

2019-01-07 07:34:02 +08:00 via Android

https://github.com/PanJiaChen/vue-element-admin

shintendo

2019-01-07 08:57:31 +08:00

没有看懂你这个是怎么写的，你最好贴一下你的路由。

shintendo

2019-01-07 09:00:03 +08:00

NavHome 里面引入 ReportCenter 是什么意思呢，也没有用到啊

2019-01-07 09:16:14 +08:00

参考官方示例即可，之前试了一下感觉还不错。如果实在搞不定，就手动改 css 吧。

TomatoYuyuko

2019-01-07 09:40:04 +08:00

直接用 vue-element 的模板就行了，github 上一堆

yhxx

2019-01-07 09:49:35 +08:00

看这个吧 https://juejin.im/post/59097cd7a22b9d0065fb61d2

matchadog

2019-01-07 10:05:41 +08:00

https://github.com/PanJiaChen/vue-element-admin

ylsc633

2019-01-07 10:15:48 +08:00

<router-view></router-view>

然后修改 router.js

都是根目录下,children 目录是地址

我前几天看文档写,发现也是这样...

大约是这样 https://github.com/izghua/go-blog-backend/blob/master/src/router.js#L8

kaikai5601

2019-01-07 10:24:34 +08:00

@shintendo 很多引用确实没用，因为这不是有问题了么所以我各种方法试，忽略哈
路由截图
![]( https://i.ooxx.ooo/2019/01/07/8a4781801eb16b93b58b0732ea21bed5.png)

suzic

2019-01-07 10:45:32 +08:00 via Android

你看一下 iview-admin 的源码，而且他们有配套教程，但是收费。然后自己用 element 做

shintendo

2019-01-07 10:53:08 +08:00

@kaikai5601
建议用这种结构：
一个顶层页面 Index.vue 作为框架，包含<header>,<navleft>,<router-view>
二级页面 ReportCenter.vue 只写右边内容区里的东西
路由大概这样：
{
path: '/',
component: Index.vue,
children: [
{path:'reportcenter', component:ReportCenter.vue}
]
}

kaikai5601

2019-01-07 14:59:56 +08:00

@shintendo 大佬方便加个 qq 或者微信么微信 a19zaG9wcGluZw== 我实在蒙蔽了

sucai

2019-01-07 20:31:00 +08:00

感觉你这个 home 文件里面应该有 top 组件，leftMenu 组件，还有右边的 router-view，但是我只看到了 head 和 leftNav，你的 router-view 呢