element ui 前台模板_一个干净优雅的Element UI Admin模板
Element UI Admin
一个干净优雅的Element UI Admin模板
一个大型单页应用离不开合理的项目结构和一些简单的封装
Start
克隆或者下载这个仓库
进入项目目录安装依赖
yarn
Develop
# serve with hot reload at localhost:8010
npm run dev
Build
# build for production with minification
npm run build
目录结构介绍
|-- dist // 打包目录
|-- src // 源码目录
| |-- api // Api接口,统一封装支持回调和Promise
| |-- user.js //用户登录、头像上传、密码修改等用户相关api
| |-- init.js // api初始化,基于axios的封装,
| |-- index.js // api模块的主文件,在main.js挂载全部api到vue原型上,Vue.prototype.$Api = Api
| |-- file.js // 文件上传
| |-- xxxx.js // 添加自己的api
| |-- assets // 静态资源,你的style、图片、字体等。
| |-- components // 全局组件,其他页面组件请归类到所在目录
| |-- HelpHint // 帮助组件
| |-- Pagination // 分页组件,你只需提供一个api,他就能完成分页的所有事情
| |-- ScrollPane // 滚动组件,鼠标滚动左右移动容器,TabBar上有用
| |-- ToolBar // 每个页面的工具栏,可以在这里做权限控制,添加权限之类的
| |-- config // 应用的配置文件
| |-- url.js // Dev的url和Pro的url
| |-- app.js // 应用的配置,比如版本、性别对应的key、应用的名字、文章的状态等,可以具体到某个页面的配置,统一管理。
| |-- index.js // 配置模块的主文件,在main.js挂载全部配置到vue原型上,Vue.prototype.$Config = Config
| |-- xxx.js // 其他配置文件,建议分类清楚,如post.js用于文章相关配置
| |-- function // 公共函数。和config,api一个道理,建议分类清楚。
| |-- menu // 后台菜单配置,包括使用的图标等,里面也可以做权限控制
| |-- router // vue-route,当项目比较大,路由较多也建议分为多个文件,里面有例子。
| |-- store // vuex,数据仓库,model之类的
| |-- theme // ElementUI 的定制主题,喜欢折腾的朋友可以自己弄
| |-- views // 页面视图。里面文件夹建议使用大驼峰,因为这样比较好看 - -
| |-- Layout // 主页面布局视图
| |-- Home // 后台主页
| |-- DevelopmentTool // 这个目录比较重要,建议不要去修改,这里正在开发,配合go语言会做一个自动生成代码的工具,里面有一些模板等。
| |-- xxxx // 不一一介绍了,自己看吧
| |-- App.vue // 页面入口文件
| |-- index.html // index.html模板
| |-- main.js // 程序入口文件,加载各种公共组件
|-- .babelrc // ES6语法编译配置
|-- .gitignore // 忽略的文件
|-- package.json // 项目及工具的依赖配置文件
|-- README.md // 说明
后话
一直找不到心中最满意的后台模板 UI,为什么不自己做一个最完美的后台模板?从细节开始,Element UI Admin 的目标是干净优雅,快速开发。
最近做了很多单页应用,当项目越来越大的时候,你会发现刚开始多做一些基础工作,多想想项目合理的结构和一些必要的封装会带来事半功倍的效果。
(其实很多前端页面都是对某个表的增删查改,代码大同小异,正在考虑为什么不做一个自动化工具,读取表结构,自动生成页面的增删查改?) 如果觉得好的话记得给个star哦 ~~
这个是基于Element UI的后台单页应用模板。点击连接预览http://xusenlin.com/works/eui/
element ui 前台模板_一个干净优雅的Element UI Admin模板相关推荐
- element ui 前台模板_一个干净优雅的 Element UI Admin 模板
在前后端分离的单页应用中,RBAC这样的权限模块一般我们的做法是,当用户登录的时候,后台返回当前用户所拥的全部角色的权限集(去重),这些权限集都是唯一的key.如 他们定义了每个功能的增删查改,或者更 ...
- vue显示日历插件_一个干净轻巧的插件,用于显示属性日历
vue显示日历插件 V日历 (V-Calendar) V-Calendar is a clean and lightweight plugin for displaying simple, attri ...
- ui线框图模板_设计库中的17种必备线框模板和UI套件
ui线框图模板 线框图. 用户旅程. 内容图. 以用户为中心的设计. 信息架构. 动画原型. 转换路径. 迭代功能. 站点地图. 嗯,什么? 坦白讲,UX(用户体验)和UI(用户界面)的世界充满了术语 ...
- python ui自动化测试框架_基于python语言下的UI自动化测试框架搭建(一)
最近在搭一个UI自动化测试框架,想把整个搭建过程分享出来,如果有不对的地方,希望大家能够指正,首先创建一个名称为,antomation_framework_demo的工程文件, pycharm中工程及 ...
- ui自动化测试测试报告_您需要了解的有关UI测试的所有信息
ui自动化测试测试报告 让我们从一个问题开始. 用户在网站上进行互动的第一件事是什么? 接口,当然. 网站的外观是在用户身上产生"第一印象"的第一件事. 交互式Web应用程序可以为 ...
- freemarker ftl模板_效率提升百分之四十,AS模板也太好用了吧
点击蓝字 轻松关注 CV 工程师你好,以下内容会让你感觉到不适,慎入! 在平时的开发工作中,我们经常将一个地方的代码,复制粘贴到另外一个地方,俗称搬砖,搬砖搬多了,作为一个资深的挨踢民工,难免会总结一 ...
- groovy 模板_一个非常轻巧的基于Groovy的Web应用程序项目模板
groovy 模板 一个非常轻巧的基于Groovy的Web应用程序项目模板 您可能听说过该项目Grails是Ruby on Rails之类的Groovy版本的框架,该框架使您可以通过动态脚本更轻松地创 ...
- python ui自动化测试框架_一个开源的面向.Net 桌面应用的 Python 封装自动化测试框架...
桌面 UI 的自动化现在已经变成的冷门技术,相比于移动与 Web 自动化来说,桌面应用的控件定位的有其历史复杂性,又有很多古老非标准控制或自定义控件,这些都为桌面程序的自动化增加了难度. 桌面的开源自 ...
- doe报告模板_【质量管理小组QCC活动】报告模板
中国质量:传播质量正能量,点击上面蓝色字:"中国质量"添加即可 =============================== QEHS管理平台www.chinaqsm.com人的 ...
- wordpress模板_如何在15分钟内定制WordPress模板
wordpress模板 You know what my favorite WordPress development gigs are? The ones where I get to start ...
最新文章
- IOS不同层的传输格式
- linq php,C#开始使用 LINQ (上)
- 6-7 求链表的倒数第m个元素 (25 分)
- springmvc+ztree v3实现类似表单回显功能
- WLAN概述——无线网络简介
- 通过ROS控制真实机械臂(17) --- 视觉抓取之ORK实现三维物体识别
- 如何查看计算机是否支持64位操作系统,如何查看计算机是32位还是64位操作系统?...
- 使用js jquery去搭建完成京东购物车
- C++-点到点、点到线、共线等常用计算
- 会议记录管理系统(1)
- 美国乳品公司试点区块链技术改善食品供应链
- access四舍五入取整round_access把浮点字段取整是什么函数
- 2022年最新目标跟踪顶会论文及模型整理分享
- 基于cobra的go语言命令行解析器
- python如何下载安装glfw_Python之OpenGL笔记(1):窗口工具包GLFW的安装
- MIMIC-III数据集介绍
- 分布式微服务下的跨库查询解决思路
- 汽车大数据洞察:慧数汽车3·15专题篇《2019年汽车产品质量投诉分析》
- 智伴机器人wifi键在哪里_智伴机器人的操作和功能
- 暑假补课文档-数据库