一、项目初始化
mkdir aimooc-book-admin-dev
cd aimooc-book-admin-dev
git clone https://github.com/PanJiaChen/vue-element-admin
cd vue-element-admin
cnpm i
npm run dev
报错:Cannot find module ‘core-js/modules/es6.regexp.constructor’
解决:cnpm i -D core-js@2
二、项目精简
- 删除 src/views 下的源码,保留:
- dashboard:首页
- error-page:异常页面
- login:登录
- redirect:重定向
- 对 src/router/index 进行相应修改
- 删除
/* Router Modules */
下面的4条import - 删除如下相关路由:
- documentation
- guide
- profile
- permission
- page
- directive
- role
- icon
- componentsRouter,chartsRouter,nestedRouter,tableRouter
- example
- create
- edit
- list
- tab
- error&children
- error-log
- excel
- export-excel
- export-selected-excel
- export-merge-header
- upload-excel
- zip
- download
- pdf
- index
- pdf/download
- theme
- index
- clipboard
- index
- external-link
- 只留404就对了
- 删除
- 删除 src/router/modules 文件夹
- 删除 src/vendor 文件夹
- 重新运行项目
如果是线上项目,建议将 components 的内容也进行清理,以免影响访问速度,或者直接使用 vue-admin-template 构建项目,课程选择 vue-element-admin 初始化项目,是因为 vue-element-admin 实现了登录模块,包括 token 校验、网络请求等,可以简化我们的开发工作
三、项目配置
通过 src/settings.js
进行全局配置:
- title:站点标题,进入某个页面后,格式为:页面标题 - 站点标题
- 修改
settings.js
:title: '小慕读书',
- 通过
findUsages
找到调用settings.js
的get-page-title.js
,修改如下:
- 修改
const title = defaultSettings.title || '小慕读书'
通过
findUsages找到调用get-page-title.js的permission.js 在的路由守卫beforeEach里提取元信息设置页面标题:
document.title = getPageTitle(to.meta.title)`
- showSettings:是否显示右侧悬浮配置按钮
- tagsView:是否显示页面标签功能条
- fixedHeader:是否将头部布局固定
- sidebarLogo:菜单栏中是否显示LOGO
- errorLog:默认显示错误日志的环境
源码调试
如果需要进行源码调试,需要修改 vue.config.js:
config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)
将 cheap-source-map 改为 source-map,如果希望提升构建速度可以改为 eval
通常建议开发时保持 eval 配置,以增加构建速度,当出现需要源码调试排查问题时改为 source-map
四、项目结构
- api:接口请求
- assets:静态资源
- components:通用组件
- directive:自定义指令
- filters:自定义过滤器
- icons:图标组件
- layout:布局组件(全局框架)
- router:路由配置
- store:状态管理(对vuex的封装)
- styles:自定义样式
- utils:通用工具方法
- auth.js:token 存取
- get-page-title.js:获取页面标题
- permission.js:权限检查
- request.js:axios 请求封装(重要)
- index.js:工具方法
- views:页面
- permission.js:登录认证和路由跳转(重要)
- settings.js:全局配置
- main.js:全局入口文件
- App.vue:全局入口组件