elementui前台模板_⼀个⼲净优雅的ElementUIAdmin模板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哦 ~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。