【读书后台管理系统】—前端框架搭建(一)

【读书后台管理系统】---前端框架搭建(一)

一、项目初始化

注:该项目是基于vue-element-admin下进行的

bash 复制代码
git clone https://github.com/PanJiaChen/vue-element-admin
cd vue-element-admin
npm i
npm run dev

二、项目精简

删除 src/views 下的源码,保留:

  • dashboard:首页
  • error-page:异常页面
  • login:登录
  • redirect:重定向
  • 对 src/router/index 进行相应修改
  • 删除 src/router/modules 文件夹
  • 删除 src/vendor 文件夹

三、项目配置

通过 src/settings.js 进行全局配置:

  • title:站点标题
  • showSettings:是否显示右侧悬浮配置按钮
  • tagsView:是否显示页面标签功能条
  • fixedHeader:是否将头部布局固定
  • sidebarLogo:菜单栏中是否显示LOGO
  • errorLog:默认显示错误日志的环境

四、项目结构

  • 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:全局入口组件
相关推荐
代码老y5 分钟前
十年回望:Vue 与 React 的设计哲学、演进轨迹与生态博弈
前端·vue.js·react.js
zzywxc78714 分钟前
详细探讨AI在金融、医疗、教育和制造业四大领域的具体落地案例,并通过代码、流程图、Prompt示例和图表等方式展示这些应用的实际效果。
开发语言·javascript·人工智能·深度学习·金融·prompt·流程图
大明8815 分钟前
用 mouseover/mouseout 事件代理模拟 mouseenter/mouseleave
前端·javascript
林太白22 分钟前
Nuxt.js搭建一个官网如何简单
前端·javascript·后端
晴空雨23 分钟前
一个符号让 indexOf 判断更优雅!JavaScript 位运算的隐藏技巧
前端·javascript
前端snow36 分钟前
前端无接口实现Table导出Excel的两种方案(附完整代码)
javascript·vue.js·react.js
古夕1 小时前
my-first-ai-web_问题记录03——NextJS 项目框架基础扫盲
前端·javascript·react.js
曲意已决2 小时前
《深入源码理解webpac构建流程》
前端·javascript
CC__xy2 小时前
04 类型别名type + 检测数据类型(typeof+instanceof) + 空安全+剩余和展开(运算符 ...)简单类型和复杂类型 + 模块化
开发语言·javascript·harmonyos·鸿蒙
小奋斗2 小时前
深入浅出:ES5/ES6+数组扁平化详解
javascript·面试