1、项目初始化
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
vue
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 校验、网络请求等，能够简化咱们的开发工做webpack
3、项目配置
经过 src/settings.js 进行全局配置：ios
- 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)`git
- showSettings：是否显示右侧悬浮配置按钮
- tagsView：是否显示页面标签功能条
- fixedHeader：是否将头部布局固定
- sidebarLogo：菜单栏中是否显示LOGO
- errorLog：默认显示错误日志的环境
源码调试
若是须要进行源码调试，须要修改 vue.config.js：es6
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，若是但愿提高构建速度能够改成 evalgithub
一般建议开发时保持 eval 配置，以增长构建速度，当出现须要源码调试排查问题时改成 source-mapweb
4、项目结构
- 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：全局入口组件
