Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jiangshanmeta/vue-admin

基于vue的针对admin应用的low code解决方案
https://github.com/jiangshanmeta/vue-admin

lowcode vue vue-admin

Last synced: 18 days ago
JSON representation

基于vue的针对admin应用的low code解决方案

Host: GitHub
URL: https://github.com/jiangshanmeta/vue-admin
Owner: jiangshanmeta
License: mit
Created: 2017-07-23T04:58:50.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2024-03-28T10:09:05.000Z (11 months ago)
Last Synced: 2024-04-15T08:10:11.502Z (10 months ago)
Topics: lowcode, vue, vue-admin
Language: Vue
Homepage: https://jiangshanmeta.github.io/vue-admin/
Size: 5.07 MB
Stars: 169
Watchers: 12
Forks: 38
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome - jiangshanmeta/vue-admin - 基于vue的针对admin应用的low code解决方案 (Vue)

README

# vue-admin

本项目提供了一个针对后台admin应用的low code解决方案。

热烈庆祝本项目被[awesome-lowcode](https://github.com/taowen/awesome-lowcode)收录

## model

model是对一个后台页面的描述，由以下几部分构成

* fields 对字段的描述
* labelName 字段的名称
* [label](./src/components/common/Labels/)
* [editor](./src/components/common/Editors/)
* [view](./src/components/common/Views/)
* validator 表单验证用的，底层依赖async-validator,该配置项支持函数，第一个参数为整条记录，第二个参数为当前模式(create | edit)，用于支付复杂情况的校验，函数返回值是async-validator的验证配置项。这个参数支持一个特殊的值**custom**,将验证委托给具体的Editor组建，该组建需要实现一个validate方法，该方法组要返回promise。
* autoValidate，是否自动表单验证该字段，布尔值或者返回布尔值的函数(函数会被传入一个参数mode，为create或edit)
* tip tip用在Editor组件中，用于对应字段做些说明，它可以是一个函数(调用时this指向Editor组件实例，被传入一个参数mode(值为create或edit),其返回值作为显示值)，也可以是个简单值(直接作为显示值)
* [colspan](./src/components/common/#MetaTable)
* tableColumnConfig 对应el-table-column的其他配置项一个对象展开传递
* pages关联页面的描述
* list 列表页配置
* [listConfig](./src/components/common#ListInfo)，列表组件的配置项
* [documentOperators](./src/components/common/DocumentOperators/) 针对一条记录的操作集
* [collectionOperators](./src/components/common/CollectionOperators/) 类似于documentOperators，但collectionOperators不针对于一条特定的记录，它对应的data是选中的数据数组。
* [filters](./src/components/common/Filters/)，筛选组件的配置项。
* [filterOperators](./src/components/common/FilterOperators/)
* info 详情页面配置同DocumentOperatorInfo只是展示为页面级而不是弹窗
* create [新建页面](./src/components/common#MetaComponentCreate)

documentOperators/collectionOperators/filterOperators在底层都依赖于[Operators](./src/components/common/#Operators)

声明了一个model后，我们还需要在vue-router配置中指明用了哪个model，因而用到了vue-router的meta属性。

## 组件命名规则

整体风格为PascalCase。

本系统把组件分为Editor、Filter、View、Label、DocumentOperator、CollectionOperator、FilterOperator七大类，分属于这七大类的组件应以对应的类型作为组件名前缀。

对于Editor、Filter组件，优先描述数据结构，然后是前端特殊功能，最后是前端展示。

对于只会用一次的组件，采用组件类型+model名+字段名的形式

## 写model的tip

* 一般而言，一个model对应和一个后端model(对应一张表)对应，但实际上不一定。
* 一个model的内容不一定要放在一个文件中，可以放在多个文件中最后组合
* 一个具体的业务系统可能有非常多的相似配置项，可以写成辅助函数来生成这些配置(类似于redux的action，本身只是对象，但是可以有action creator)
* 如果通过MetaPage页面级组件使用model, 会默认把model深度freeze优化性能。deepFreeze情况下如果model中有同步引用的组件(不是通过动态import)，需要手动使用Vue.extend转换为Vue子类，否则Vue自动调用extend将配置对象转换为子类时，由于配置对象被冻结转换为子类失败。