V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
kaikai5601
V2EX  ›  问与答

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

  •  
  •   kaikai5601 · 2019-01-06 22:52:54 +08:00 · 4860 次点击
    这是一个创建于 1898 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    结构如下 Home 如下

    23 条回复    2019-01-07 20:31:00 +08:00
    statfall
        1
    statfall  
       2019-01-06 22:59:14 +08:00 via Android
    试试 d2admin ?
    hly9469
        2
    hly9469  
       2019-01-06 23:00:05 +08:00 via iPhone
    不有现成的 element admin 么
    richangfan
        3
    richangfan  
       2019-01-06 23:07:15 +08:00
    不有现成的 iview admin 么
    kaikai5601
        4
    kaikai5601  
    OP
       2019-01-06 23:09:56 +08:00
    @hly9469 那个太复杂了,我只要简单的功能就好
    kaikai5601
        5
    kaikai5601  
    OP
       2019-01-06 23:10:22 +08:00
    @richangfan 想用 element ui 怎么就那么难~~是我技术菜
    Lattez
        6
    Lattez  
       2019-01-06 23:37:16 +08:00
    考虑顶栏和 navbar 做到一个页面,然后其他的在右侧做 router 切换?
    kaikai5601
        7
    kaikai5601  
    OP
       2019-01-07 00:49:48 +08:00 via iPhone
    @Lattez 你的意思是就是想要顶部和左边导航做到一个页面?
    FrankFang128
        8
    FrankFang128  
       2019-01-07 01:02:24 +08:00
    css 问题?
    jry
        9
    jry  
       2019-01-07 04:57:44 +08:00 via iPhone
    jry
        10
    jry  
       2019-01-07 04:58:29 +08:00 via iPhone
    WilliamLin
        11
    WilliamLin  
       2019-01-07 07:34:02 +08:00 via Android
    shintendo
        12
    shintendo  
       2019-01-07 08:57:31 +08:00
    没有看懂你这个是怎么写的,你最好贴一下你的路由。
    shintendo
        13
    shintendo  
       2019-01-07 09:00:03 +08:00
    NavHome 里面引入 ReportCenter 是什么意思呢,也没有用到啊
    o0
        14
    o0  
       2019-01-07 09:16:14 +08:00
    参考官方示例即可,之前试了一下感觉还不错。如果实在搞不定,就手动改 css 吧。
    TomatoYuyuko
        15
    TomatoYuyuko  
       2019-01-07 09:40:04 +08:00
    直接用 vue-element 的模板就行了,github 上一堆
    yhxx
        16
    yhxx  
       2019-01-07 09:49:35 +08:00
    matchadog
        17
    matchadog  
       2019-01-07 10:05:41 +08:00
    ylsc633
        18
    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
        19
    kaikai5601  
    OP
       2019-01-07 10:24:34 +08:00
    @shintendo 很多引用确实没用,因为这不是有问题了么 所以我各种方法试 ,忽略哈
    路由截图
    ![]( https://i.ooxx.ooo/2019/01/07/8a4781801eb16b93b58b0732ea21bed5.png)
    suzic
        20
    suzic  
       2019-01-07 10:45:32 +08:00 via Android
    你看一下 iview-admin 的源码,而且他们有配套教程,但是收费。然后自己用 element 做
    shintendo
        21
    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
        22
    kaikai5601  
    OP
       2019-01-07 14:59:56 +08:00
    @shintendo 大佬方便加个 qq 或者微信么 微信 a19zaG9wcGluZw== 我实在蒙蔽了
    sucai
        23
    sucai  
       2019-01-07 20:31:00 +08:00
    感觉你这个 home 文件里面应该有 top 组件,leftMenu 组件,还有右边的 router-view,但是我只看到了 head 和 leftNav,你的 router-view 呢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5379 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 07:29 · PVG 15:29 · LAX 00:29 · JFK 03:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.