1. 專案精簡刪除scr/views下的原始碼, 保留:

1. • dashboard：首頁
   • error-page：異常頁面
   • login：登入
   • redirect：重定向

2. 對src/router/index 進行相應修改

     1 import Vue from 'vue'
     2 import Router from 'vue-router'
     3 
     4 Vue.use(Router)
     5 
     6 /* Layout */
     7 import Layout from '@/layout'
     8 
     9 /**
    10  * Note: sub-menu only appear when route children.length >= 1
    
    11  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
    12  *
    13  * hidden: true                   if set true, item will not show in the sidebar(default is false)
    14  * alwaysShow: true               if set true, will always show the root menu
    15  *                                if not set alwaysShow, when item has more than one children route,
    
    16  *                                it will becomes nested mode, otherwise not show the root menu
    17  * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
    18  * name:'router-name'             the name is used by <keep-alive> (must set!!!)
    19  * meta : {
    20
    
        roles: ['admin','editor']    control the page roles (you can set multiple roles)
    21     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    22     icon: 'svg-name'             the icon show in the sidebar
    23     noCache: true                if set true, the page will no be cached(default is false)
    24     affix: true                  if set true, the tag will affix in the tags-view
    25     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    26     activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
    27   }
    28  */
    29 
    30 /**
    31  * constantRoutes
    32  * a base page that does not have permission requirements
    33  * all roles can be accessed
    34  */
    35 export const constantRoutes = [
    36   {
    37     path: '/redirect',
    38     component: Layout,
    39     hidden: true,
    40     children: [
    41       {
    42         path: '/redirect/:path(.*)',
    43         component: () => import('@/views/redirect/index')
    44       }
    45     ]
    46   },
    47   {
    48     path: '/login',
    49     component: () => import('@/views/login/index'),
    50     hidden: true
    51   },
    52   {
    53     path: '/auth-redirect',
    54     component: () => import('@/views/login/auth-redirect'),
    55     hidden: true
    56   },
    57   {
    58     path: '/404',
    59     component: () => import('@/views/error-page/404'),
    60     hidden: true
    61   },
    62   {
    63     path: '/401',
    64     component: () => import('@/views/error-page/401'),
    65     hidden: true
    66   },
    67   {
    68     path: '/',
    69     component: Layout,
    70     redirect: '/dashboard',
    71     children: [
    72       {
    73         path: 'dashboard',
    74         component: () => import('@/views/dashboard/index'),
    75         name: 'Dashboard',
    76         meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
    77       }
    78     ]
    79   }
    80 ]
    81 
    82 /**
    83  * asyncRoutes
    84  * the routes that need to be dynamically loaded based on user roles
    85  */
    86 export const asyncRoutes = [
    87   // 404 page must be placed at the end !!!
    88   { path: '*', redirect: '/404', hidden: true }
    89 ]
    90 
    91 const createRouter = () => new Router({
    92   // mode: 'history', // require service support
    93   scrollBehavior: () => ({ y: 0 }),
    94   routes: constantRoutes
    95 })
    96 
    97 const router = createRouter()
    98 
    99 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
   100 export function resetRouter() {
   101   const newRouter = createRouter()
   102   router.matcher = newRouter.matcher // reset router
   103 }
   104 
   105 export default router

2.刪除 src/router/modules 資料夾

3. 刪除 src/vendor資料夾

2. 專案配置

進入src目錄下的settings.js配置檔案

1 module.exports = {
2   title: 'Project Title',
3   showSettings: true,
4   tagsView: true,
5   fixedHeader: false,
6   sidebarLogo: false,
7   errorLog: 'production'
8 }

3.1 專案標題

在src/settings.js 配置專案標題

3.2 showSettings

showSettings用來設定是否顯示控制面板，設定為false則不顯示

3.3 tagsView

tagsView是我們開啟某個頁面是否有頁面標籤

3.4 fixedHeader

fixedHeader是內容頁面向下滑動時頭部是否固定，false是不固定， true是固定

3.5 sidebarLogo

sidebarLogo控制選單欄上方是否顯示圖示

3.6 原始碼除錯

開啟vue.config.js檔案
找到如下圖的位置

cheap-source-map除錯模式沒有完全編譯展示我們的原始碼

我們改成source-map除錯模式，這時候再來看Sources的App.vue檔案，已經和原始碼顯示的一樣，在這樣的環境下除錯我們會更加方便
但是source-map有一個缺點，每當我們程式有改動時，也需要同步生成source-map檔案，這樣會使我們構建變慢，在實際開發過程中推薦使用eval,以增加構建速度 在需要除錯的時候使用source-map

3. 專案結構分析

1. api ：介面請求
2. assets ：一些靜態檔案
3. components ： 封裝元件
4. direcetive ：自定義指令
5. filters ：過濾器
6. icons ：圖示
7. layout ：全域性框架元件(非常重要)
8. router ：路由
9. store ：配置vuex
10. styles ：全域性樣式檔案
11. utils ：工具類
12. views ：頁面元件
13. App.vue ：父元件，其他的元件都是巢狀在App.vue裡
14. main.js ：全域性入口檔案，將App.vue設定為全域性父元件進行渲染
15. permissions.js ：登入的校驗和登入之後的路由跳轉
16. setting.js ：配置檔案
    轉自：https://blog.csdn.net/pjsdsg/article/details/104918098/