码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-12-10 18:02:57      阅读:429      评论:0      收藏:0      [点我收藏+]

标签:执行   很多   run   效果   资源文件   推荐   ref   work   全局   

 

项目参考 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 安装,执行以下命令
yarn
yarn dev
  • 如果你坚持用 npm,可执行 npm install && npm run dev,效果一致。

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

标签:执行   很多   run   效果   资源文件   推荐   ref   work   全局   

原文地址:https://www.cnblogs.com/ivday/p/10097053.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!