目錄

• 一、元件定義
  • 1、建立vue元件
  • 2、form.vue
  • 3、list.vue
• 二、路由定義
• 三、其他
  • 1、專案名稱
  • 2、埠號
  • 3、國際化設定
  • 4、入口頁面
  • 5、登入頁

一、元件定義

1、建立vue元件

在src/views資料夾下建立以下資料夾和檔案

2、form.vue

<template>
  <div class="app-container">
    講師表單
  </div>
</template>

3、list.vue

<template>
  <div class="app-container">
    講師列表
  </div>
</template>
 

二、路由定義

修改 src/router/index.js 檔案，重新定義constantRouterMap
注意：每個路由的name不能相同

 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' // lang i18n

4、入口頁面

index.html

<title>穀粒學院後臺管理系統</title>

5、登入頁

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

<h3 class="title">穀粒學院後臺管理系統</h3>