Vue 搭建vue-element-admin框架

項目初始化

vue-element-admin 源碼

git clone https://github.com/PanJiaChen/vue-element-admin
cd vue-element-admin
npm i
npm run dev

若npm 報錯 Cannot find module 'core-js/modules/es6.regexp.constructor'，可安裝cnpm install core-js@2識別es6語法

精簡化項目

• 刪除 src/views 下的源碼，保留：
  • dashboard：首頁
  • error-page：異常頁面
  • login：登錄
  • redirect：重定向
• 對 src/router/index 進行相應修改

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  }
]

/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
export const asyncRoutes = [
  /** when your routing map is too long, you can split it into small modules **/
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

• 刪除 src/router/modules 文件夾
• 刪除 src/vendor 文件夾

線上項目建議清理components內容，以免影響訪問速度，或使用 vue-admin-template 構建項目。這里選擇 vue-element-admin 初始化項目，因含有登錄模塊，包括 token 校驗、網絡請求等，可以簡化開發工作

項目配置

通過 src/settings.js 進行全局配置：

module.exports = {
  title: '后台管理系統',

  /**
   * @type {boolean} true | false
   * @description 是否顯示控制面板
   */
  showSettings: false,

  /**
   * @type {boolean} true | false
   * @description 便簽欄
   */
  tagsView: false,

  /**
   * @type {boolean} true | false
   * @description 固定頭部
   */
  fixedHeader: false,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: false,

  /**
   * @type {string | array} 'production' | ['production', 'development']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: 'production'
}

• title：站點標題，進入某個頁面后，格式為：頁面標題 - 站點標題

• showSettings：是否顯示右側懸浮配置按鈕

• tagsView：是否顯示頁面標簽功能條

• fixedHeader：是否將頭部布局固定

• sidebarLogo：菜單欄中是否顯示LOGO

• errorLog：默認顯示錯誤日志的環境

• 自定義頁面標題 （vue-element-admin\src\utils\get-page-title.js）

import defaultSettings from '@/settings'

const title = defaultSettings.title || '后台管理系統'

export default function getPageTitle(pageTitle) {
  if (pageTitle) {
    return `${pageTitle} - ${title}`
  }
  return `${title}`
}

源碼調試

• 如果需要進行源碼調試，需要修改 vue.config.js：

config
  // https://webpack.js.org/configuration/devtool/#development
  .when(process.env.NODE_ENV === 'development',
    config => config.devtool('cheap-source-map')
  )

• 通常建議開發時保持 eval 配置，以增加構建速度，當出現需要源碼調試排查問題時改為 source-map

項目結構

• api：接口請求
• assets：靜態資源
• components：通用組件
• directive：自定義指令
• filters：自定義過濾器
• icons：圖標組件
• layout：布局組件
• router：路由配置
• store：狀態管理
• styles：自定義樣式
• utils：通用工具方法
  • auth.js：token 存取
  • permission.js：權限檢查
  • request.js：axios 請求封裝
  • index.js：工具方法
• views：頁面
• permission.js：登錄認證和路由跳轉
• settings.js：全局配置
• main.js：全局入口文件
• App.vue：全局入口組件