【笔记】Vue Element+Node.js开发企业通用管理后台系统——前端框架搭建

---

前端框架搭建 | 「小慕读书」管理后台

---

一、项目初始化

vue-element-admin

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：全局入口组件