3 Star 3 Fork 4

zt5203 / ElementUIAdmin

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

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 Admin Template 展开 收起
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/stephz/ElementUIAdmin.git
git@gitee.com:stephz/ElementUIAdmin.git
stephz
ElementUIAdmin
ElementUIAdmin
master

搜索帮助