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

2020/04/13 11:41
阅读数 1.5K


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


一、项目初始化

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.jstitle: '小慕读书',
    • 通过findUsages找到调用settings.jsget-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:全局入口组件
    在这里插入图片描述
发布了27 篇原创文章 · 获赞 53 · 访问量 2万+
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部