本文共 1658 字，大约阅读时间需要 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/