Vue 搭建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:全局入口组件