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

Posted 2021-01-25 Gj

 

项目参考 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 [email protected]:gjwork/base-admin.git

安装&运行

• 推荐使用 yarn 安装，执行以下命令

yarn
yarn dev

• 如果你坚持用 npm，可执行 npm install && npm run dev，效果一致。