使用 vue-cli 及 element-ui 闪电般构建一个企业级后台管理系统。
这个项目不仅仅是一个 vue-cli 插件,也是一个 vue-cli preset,希望能够帮到你!
🇨🇳 简体中文 | 🇺🇸 English
一个使用该插件的完整示例:⚡ @codetrial/element-admin
在开始前,你需要先安装 Vue CLI 3:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
你可以通过 preset 的方式直接创建你的项目,它已经包含了 ESLint 等插件的配置。
vue create --preset codetrial/vue-cli-plugin-element your-awesome-project
如果你不想使用 preset 的方式,你也可以先通过 vue-cli 手动创建一个空的项目。
# 确保你创建的项目选择了以下功能:
# - Babel
# - PWA
# - Router
# - Vuex
# - CSS Pre-processors + Sass
# - Linter - Formatter
vue create your-awesome-project
然后通过 vue 将插件添加到你的项目中。
vue add @codetrial/element
完整的参考文档:📖 codetrial.github.io/element-admin
📷 最小依赖:仅依赖 Vue 官方库及 ElementUI 组件库,未额外引入其它第三方库,为你提供自由发挥的空间。
📺 目录结构:根据项目实战经验,设计了合理、清晰的目录结构。
📞 页面布局:使用 Vue Router 嵌套路由及 ElementUI 内置组件进行布局。
📟 数据处理:添加独立的 api 及 service 层,将业务逻辑从组件中抽离。
⌚ 权限控制:为路由添加配置式拦截器,默认支持用户登录鉴权及角色鉴权。
📻 列表示例:一个相对比较完整的列表页示例,包含字段查询(过滤),字段排序,页码跳转,批量操作等等。
🔎 表单示例:一个相对比较完整的表单页示例,包含表单校验、提交等操作。
👻 错误页面:内置简单的(其实是偷懒) 403、404 及 500 错误页。
期待你的 pull requests
。如果你觉得有帮助,还请多多反馈!
Copyright (c) 2018 - present, Felix Yang