kaikai5601
V2EX  ›  问与答

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

  •  
  •   kaikai5601 · Jan 6, 2019 · 6189 views
    This topic created in 2863 days ago, the information mentioned may be changed or developed.

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

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

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

    结构如下 Home 如下

    23 replies  •  2019-01-07 20:31:00 +08:00
    statfall
    statfall
    Jan 6, 2019 via Android
    1
    试试 d2admin ?
    hly9469
    hly9469
    Jan 6, 2019 via iPhone
    2
    不有现成的 element admin 么
    richangfan
    richangfan
    Jan 6, 2019
    3
    不有现成的 iview admin 么
    kaikai5601
    kaikai5601
    OP
    Jan 6, 2019
    4
    @hly9469 那个太复杂了,我只要简单的功能就好
    kaikai5601
    kaikai5601
    OP
    Jan 6, 2019
    5
    @richangfan 想用 element ui 怎么就那么难~~是我技术菜
    Lattez
    Lattez
    Jan 6, 2019
    6
    考虑顶栏和 navbar 做到一个页面,然后其他的在右侧做 router 切换?
    kaikai5601
    kaikai5601
    OP
    Jan 7, 2019 via iPhone
    7
    @Lattez 你的意思是就是想要顶部和左边导航做到一个页面?
    FrankFang128
    FrankFang128
    Jan 7, 2019
    8
    css 问题?
    jry
    jry
    Jan 7, 2019 via iPhone
    9
    jry
    jry
    Jan 7, 2019 via iPhone
    10
    shintendo
    shintendo
    Jan 7, 2019
    12
    没有看懂你这个是怎么写的,你最好贴一下你的路由。
    shintendo
    shintendo
    Jan 7, 2019
    13
    NavHome 里面引入 ReportCenter 是什么意思呢,也没有用到啊
    o0
    o0
    Jan 7, 2019
    14
    参考官方示例即可,之前试了一下感觉还不错。如果实在搞不定,就手动改 css 吧。
    TomatoYuyuko
    TomatoYuyuko
    Jan 7, 2019
    15
    直接用 vue-element 的模板就行了,github 上一堆
    ylsc633
    ylsc633
    Jan 7, 2019
    18
    <router-view></router-view>

    然后修改 router.js

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

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

    大约是这样 https://github.com/izghua/go-blog-backend/blob/master/src/router.js#L8
    kaikai5601
    kaikai5601
    OP
    Jan 7, 2019
    19
    @shintendo 很多引用确实没用,因为这不是有问题了么 所以我各种方法试 ,忽略哈
    路由截图
    ![]( https://i.ooxx.ooo/2019/01/07/8a4781801eb16b93b58b0732ea21bed5.png)
    suzic
    suzic
    Jan 7, 2019 via Android
    20
    你看一下 iview-admin 的源码,而且他们有配套教程,但是收费。然后自己用 element 做
    shintendo
    shintendo
    Jan 7, 2019
    21
    @kaikai5601
    建议用这种结构:
    一个顶层页面 Index.vue 作为框架,包含<header>,<navleft>,<router-view>
    二级页面 ReportCenter.vue 只写右边内容区里的东西
    路由大概这样:
    {
    path: '/',
    component: Index.vue,
    children: [
    {path:'reportcenter', component:ReportCenter.vue}
    ]
    }
    kaikai5601
    kaikai5601
    OP
    Jan 7, 2019
    22
    @shintendo 大佬方便加个 qq 或者微信么 微信 a19zaG9wcGluZw== 我实在蒙蔽了
    sucai
    sucai
    Jan 7, 2019
    23
    感觉你这个 home 文件里面应该有 top 组件,leftMenu 组件,还有右边的 router-view,但是我只看到了 head 和 leftNav,你的 router-view 呢
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2325 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 13:13 · PVG 21:13 · LAX 05:13 · JFK 08:13
    ♥ Do have faith in what you're doing.