本文共 1714 字，大约阅读时间需要 5 分钟。

Vue项目开发指南

一、组件定义

1. 创建Vue组件

在src/views文件夹下创建以下文件夹和文件：

• 创建src/views/teacher文件夹
• 在src/views/teacher下创建form.vue和list.vue两个组件文件

2. 组件代码示例

二、路由定义

修改src/router/index.js文件，重新定义constantRouterMap

export const constantRouterMap = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard/index')
    }]
  },
  // 讲师管理
  {
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/list',
    name: 'Teacher',
    meta: { title: '讲师管理' },
    children: [
      {
        path: 'list',
        name: 'TeacherList',
        component: () => import('@/views/teacher/list'),
        meta: { title: '讲师列表' }
      },
      {
        path: 'create',
        name: 'TeacherCreate',
        component: () => import('@/views/teacher/form'),
        meta: { title: '添加讲师' }
      },
      {
        path: 'edit/:id',
        name: 'TeacherEdit',
        component: () => import('@/views/teacher/form'),
        meta: { title: '编辑讲师' },
        hidden: true
      }
    ]
  },
  {
    path: '*',
    redirect: '/404',
    hidden: true
  }
]

三、项目其他配置

1. 项目名称

将vue-admin-template-master重命名为guli_admin

2. 端口号

在config/index.js中修改

port: 9528,

3. 国际化设置

在src/main.js中第7行修改语言为zh-CN

import locale from 'element-ui/lib/locale/lang/zh-CN'

4. 入口页面

index.html

5. 登录页

src/views/login/index.vue第4行

谷粒学院后台管理系统

转载地址：http://uqqj.baihongyu.com/