{"id":13602372,"url":"https://github.com/vipshop/ams","last_synced_at":"2025-04-04T13:06:19.174Z","repository":{"id":43537046,"uuid":"200761232","full_name":"vipshop/ams","owner":"vipshop","description":"AMS是基于 Vue.js 和 Element组件库、通过JSON配置来快速搭建管理后台的一整套前端解决方案","archived":false,"fork":false,"pushed_at":"2021-12-06T08:45:15.000Z","size":64154,"stargazers_count":392,"open_issues_count":64,"forks_count":70,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-03-28T12:05:12.959Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vipshop.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-06T02:24:56.000Z","updated_at":"2025-02-09T05:14:49.000Z","dependencies_parsed_at":"2022-07-10T18:20:37.546Z","dependency_job_id":null,"html_url":"https://github.com/vipshop/ams","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipshop%2Fams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipshop%2Fams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipshop%2Fams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vipshop%2Fams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vipshop","download_url":"https://codeload.github.com/vipshop/ams/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247181628,"owners_count":20897370,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T18:01:21.455Z","updated_at":"2025-04-04T13:06:19.132Z","avatar_url":"https://github.com/vipshop.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","![Open Source Love svg3](https://badges.frapsoft.com/os/v3/open-source.svg?v=103)","精选 LessCode 项目"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://vipshop.github.io/ams/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg width=\"140\" src=\"https://h5rsc.vipstatic.com/ams/ams-logo2.png\" alt=\"AMS logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## AMS\n\n\u003e AMS (admin material system)，管理后台物料系统。\n\nAMS是基于 [Vue.js](https://github.com/vuejs/vue) 和 [Element组件库](https://github.com/ElemeFE/element)、通过JSON配置来快速搭建管理后台的一整套解决方案\n\n- [使用文档](https://vipshop.github.io/ams/)\n- [演示示例](https://vipshop.github.io/ams/example/#/)\n- [FAQ相关](./FAQ.md)\n\n## npm 安装\n\n```\nnpm i @ams-team/ams -S\n```\n\n## CDN\n\n目前可以通过 [unpkg.com/@ams-team/ams](https://unpkg.com/browse/@ams-team/ams/lib/) 获取到最新版本的资源，在页面上引入 js 文件即可开始使用。\n\n```html\n\u003c!-- 引入ams库 --\u003e\n\u003cscript src=\"https://unpkg.com/@ams-team/ams/lib/ams.js\"\u003e\u003c/script\u003e\n```\n\n## 快速开始\n\nAMS的核心思想是通过规范数据接口的数据结构，再用类JSON的格式配置对应的 `区块` 和 `资源`，即可渲染成有UI和数据交互的前端界面。\n\n### 第一步，注册资源\n\n```javascript\nams.resource('demoRes', { // ”demoRes“为资源名\n    api: {\n        prefix: 'https://easy-mock.com/mock/5a0023effbbb09615044cb82/', // 接口前缀\n        update: 'update', // 更新表单数据，值为更新接口的path，和接口前缀组成最终请求的url\n        read: 'read', // 读取表单数据，值为读取接口的path\n    },\n    fields: { // 字段\n        id: { // “id”为字段名\n            type: 'text', // 字段类型\n            label: '文本' // 该字段显示在页面的文本标签\n        },\n        testRate: {\n            type: 'rate',\n            label: '评分'\n        },\n        testTextarea: {\n            type: 'textarea',\n            label: '评语'\n        }\n    }\n})\n```\n\n### packages目录本地开发调试\n\n```sh\nnpm run dev\n```\n\n### 第二步，注册区块\n\n\n```javascript\nams.block('demo', { // “demo”为区块名\n    type: 'form', // 区块类型，“form”代表表单类型\n    ctx: 'edit', // 状态，“edit”代表为可编辑\n    resource: 'demoRes', // 该区块挂载的资源\n    operations: { // 操作\n        submit: { // 操作触发的事件名\n            type: 'button', // 操作类型\n            label: '提交' // 操作按钮显示的文案\n        }\n    },\n    events: { // 事件流\n        init: '@read', // “read”是内置的读取数据操作\n        submit: '@update' // “update”是内置的更新数据操作\n    }\n});\n```\n\n### 第三步，渲染区块\n\n```javascript\n// 渲染名字为“demo”的区块\nams.render('demo')\n```\n\n尝试AMS的最简单的方式是使用[JSRUN上的官方入门Demo](http://jsrun.net/sehKp/edit?utm_source=website)。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。\n\n### packages本地开发调试\n\n```\nnpm run dev\n```\n\n\n\n## 浏览器支持\n\n现代浏览器 及 Internet Explorer 10+。\n\n## 1.0版本规划\n\n\u003e 通过 `1.0` 版本调整，希望把ams的配置的更加精简，希望解决一些设计不规范或者在实践中反馈不合理的地方，解决已知的痛点，敬请期待。[点击查看1.0版本规划详情\u003e\u003e](https://github.com/vipshop/ams/milestone/1)\n\n## 本地开发\n\n```bash\nnpm install\nnpm run build\nnpm run dev\n```\n\n\n## 开发团队\n\n来自vip.com的开发者：\n\n+ [bfkkkd](https://github.com/bfkkkd)\n+ [w3cmark](https://github.com/w3cmark)\n+ [wuzebin](https://github.com/wuzebin)\n+ [EdwardQ](https://github.com/EdwardQ)\n\nvip.com以外的开发者：\n\n+ [hodor-cn](https://github.com/hodor-cn)\n+ [ly525](https://github.com/ly525)\n\n## 社区互助\n\n\u003cimg src=\"https://vipshop.github.io/ams/index/footer-02.png\"\u003e\n\n加入技术支持群，请扫二维码加“唯技术”老师咨询（添加时请备注“AMS”）\n\n## LICENSE\n[Apache 2.0](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvipshop%2Fams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvipshop%2Fams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvipshop%2Fams/lists"}