标签：实战 info vue name title up element meta channel

1.背景

2.项目模板

2.1.开源模板项目下载与启动

课程中使用的模板是实际开发中用得比较多的后端管理项目模板

 

 拉取与下载方式

# vue-admin-template # 克隆项目 git clone https://github.com/PanJiaChen/vue-admin-template.git
# 进入项目目录 cd vue-admin-template
# 安装依赖 npm install (这步不要执行,会很慢的)
# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org
# 启动服务 npm run dev ```
浏览器访问 [http://localhost:9528](http://localhost:9528)

步骤一:模板拉取

 

 步骤二:安装依赖

步骤三:启动服务

 

初始项目页面

 2.2.项目简单处理

1.项目结构简单介绍

官方使用文档:https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/

2.删除模板中的案例菜单

 删除后保存启动,界面如下图:

 

 2.3.添加路由与菜单

添加菜单:

 菜单内容为: 每个菜单的内容都是这样的模板,

这里只是构建结构,后面在这个结构中写就可以了

<template>   <h1>用户管理</h1> </template> <script> export default {   name: 'UserInfo' } </script> <style lang="scss"> </style>

添加路由:

 {
    path: '/sys',
    component: Layout,
    name: 'sys',
    meta: { title: '系统管理', icon: 'el-icon-user' },
    children: [
      {
        path: 'user_info',
        name: 'user_info',
        component: () => import('@/views/user/user_info'),
        meta: { title: '用户管理' }
      },
      {
        path: 'dic_info',
        name: 'dic_info',
        component: () => import('@/views/dic/dic_info'),
        meta: { title: '字典管理' }
      }
    ]
  },
  {
    path: '/channel',
    component: Layout,
    name: 'channel',
    meta: { title: '渠道管理', icon: 'el-icon-data-board' },
    children: [
      {
        path: 'up_channel_info',
        name: 'up_channel_info',
        component: () => import('@/views/up_channel/up_channel_info'),
        meta: { title: '上游渠道' }
      },
      {
        path: 'up_channel_product',
        name: 'up_channel_product',
        component: () => import('@/views/up_channel/up_channel_product'),
        meta: { title: '上游产品' }
      },
      {
        path: 'down_channel_info',
        name: 'down_channel_info',
        component: () => import('@/views/down_channel/down_channel_info'),
        meta: { title: '下游渠道' }
      },
      {
        path: 'down_channel_product',
        name: 'down_channel_product',
        component: () => import('@/views/down_channel/down_channel_product'),
        meta: { title: '下游产品' }
      }

    ]
  }

保存启动后页面显示:

3.登录与退出登录

3.1.接口代理配置

重要提醒:修改了路由后要重启(npm run dev)vue项目,路由才会生效.

修改通用请求工具类:

swagger接口文档:

注意需要自己下载代码部署

3.2.将英文改为中文

  3.3.登录接口修改

 测试:

登录页面点击登录如下图说明登录成功

3.5.获取用户信息

主要实现原理是通过路由守卫实现

3.4.退出功能实现

完美!

标签：实战,info,vue,name,title,up,element,meta,channel
From： https://www.cnblogs.com/newAndHui/p/17179700.html