基于vue element-ui整理了一套Web后台的基础架构代码

 

项目参考 vue-element-admin

目标

为解决前端开发当中部分重复性劳动力,把更多的精力放在交互上。

后台管理可以分为几个模块

  • layout(整体布局)
    • Header头部
    • Menu菜单
    • Main页面

细化Main可分为

  • 搜索栏

  • 工具栏

  • 表格/图表

  • 分页

  • 模态框

实现

常用功能都以抽象成组件。实际开发当中只需要按照固定格式, 编写少量的配置文件即可实现页面的搭建。为开发节省了大量的 布局时间。实现敏捷式开发。

目录

│ favicon.ico│ index.html│ LICENSE│ package.json│ README.md├─build ├─config ├─node_modules ├─src│ │ App.vue│ │ main.js 主入口│ │ permission.js 全局路由守卫│ ├─api 服务端接口文件│ ├─assets 资源文件(包括icon)│ │ └─icon │ ├─components 抽象出来的组件│ ├─mock 模拟服务端请求数据│ ├─router 路由配置文件│ ├─store vuex文件│ ├─styles 全局样式集合│ ├─utils 抽象出来的常用工具│ └─views 模板页面└─static 静态资源文件

总结

多数都是实际开发过程当中总结出来的经验。很多场景实际上还没有覆盖, 后续会持续迭代。

准备工作

git clone git@gitee.com:gjwork/base-admin.git

安装&运行

  • 推荐使用 yarn 安装,执行以下命令
yarnyarn dev
  • 如果你坚持用 npm,可执行 npm install && npm run dev,效果一致。

相关文章