{"id":21429055,"url":"https://github.com/grasilife/glue","last_synced_at":"2026-02-23T03:15:45.726Z","repository":{"id":41822602,"uuid":"327513322","full_name":"grasilife/glue","owner":"grasilife","description":"Glue是一个基于web component构建的组件库,可以在react,vue2,vue3,angular和html等前端框架中运行","archived":false,"fork":false,"pushed_at":"2023-02-06T17:16:50.000Z","size":15402,"stargazers_count":74,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-14T07:48:42.257Z","etag":null,"topics":["angular","components","ember","glue","react","vue","vue2"],"latest_commit_sha":null,"homepage":"https://grasilife.github.io/glue/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grasilife.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":"2021-01-07T05:34:00.000Z","updated_at":"2024-01-08T10:06:00.000Z","dependencies_parsed_at":"2023-02-16T10:46:15.025Z","dependency_job_id":null,"html_url":"https://github.com/grasilife/glue","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grasilife%2Fglue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grasilife%2Fglue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grasilife%2Fglue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grasilife%2Fglue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grasilife","download_url":"https://codeload.github.com/grasilife/glue/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225970886,"owners_count":17553410,"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":["angular","components","ember","glue","react","vue","vue2"],"created_at":"2024-11-22T22:15:37.947Z","updated_at":"2026-02-23T03:15:45.662Z","avatar_url":"https://github.com/grasilife.png","language":"Vue","readme":"\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"logo\" src=\"https://grasilife.github.io/material/logo.svg\" width=\"120\" style=\"margin-bottom: 10px;\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eGlue\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e可能是中国第一个如此完善的移动端web components组件库\u003c/p\u003e\n\n### 介绍\n\nGlue是一个基于web components构建的组件库,可以在react,vue2,vue3,angular和html等任何前端框架中,真正做到了一个组件库多框架运行\n\n## 特性\n\n- 提供 60 多个高质量组件，覆盖移动端各类场景\n- 性能极佳\n- 单元测试覆盖率 90%+，提供稳定性保障\n- 完善的中英文文档和示例\n- 支持全平台\n- 支持按需引入\n- 支持主题定制\n- 支持 TypeScript\n\n## 安装\n\n```bash\nnpm i glue-components -S\n```\n\n## 快速上手\n\n### vue中使用,参考[stencil的Vue中使用使用指南](\u003chttps://stenciljs.com/docs/vue/\u003e)\n```js\nimport Vue from 'vue';\nimport App from './App.vue';\nimport \"glue-components/dist/glue-components/glue-components.css\";\nimport { applyPolyfills, defineCustomElements } from 'glue-components/loader';\n\nVue.config.productionTip = false;\n\n// Tell Vue to ignore all components defined in the glue-components\n// package. The regex assumes all components names are prefixed\n// 'test'\nVue.config.ignoredElements = [/test-\\w*/];\n\n// Bind the custom elements to the window object\napplyPolyfills().then(() =\u003e {\n  defineCustomElements();\n});\n\nnew Vue({\n  render: h =\u003e h(App)\n}).$mount('#app');\n```\n\n```js\nrender() {\n  return (\n    \u003cdiv\u003e\n      \u003cglue-button\u003e\u003c/glue-button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n### React中使用,参考[stencil的React使用指南](\u003chttps://stenciljs.com/docs/react/\u003e)\n\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport \"glue-components/dist/glue-components/glue-components.css\";\nimport registerServiceWorker from './registerServiceWorker';\n\n// test-component is the name of our made up web components that we have\n// published to npm:\nimport { applyPolyfills, defineCustomElements } from 'glue-components/loader';\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\nregisterServiceWorker();\n\napplyPolyfills().then(() =\u003e {\n  defineCustomElements();\n});\n```\n\n```js\nrender() {\n  return (\n    \u003cdiv\u003e\n      \u003cglue-button\u003e\u003c/glue-button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n### Angular中使用,参考[stencil的Angular使用指南](\u003chttps://stenciljs.com/docs/angular/\u003e)\n\n```js\nimport { enableProdMode } from '@angular/core';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\n\nimport { AppModule } from './app/app.module';\nimport { environment } from './environments/environment';\n\n// Note: loader import location set using \"esmLoaderPath\" within the output target config\nimport { defineCustomElements } from 'glue-components/loader';\n\nif (environment.production) {\n  enableProdMode();\n}\n\nplatformBrowserDynamic().bootstrapModule(AppModule)\n  .catch(err =\u003e console.log(err));\ndefineCustomElements();\n```\n\n```js\nimport {Component, ElementRef, ViewChild} from '@angular/core';\n\nimport 'glue-components';\n\n@Component({\n    selector: 'app-home',\n    template: `\u003cglue-button #test\u003e\u003c/glue-button\u003e`,\n    styleUrls: ['./home.component.scss'],\n})\nexport class HomeComponent {\n\n    @ViewChild('test') myGlueButtonComponent: ElementRef\u003cHTMLTestComponentElement\u003e;\n\n    async onAction() {\n        await this.myGlueButtonComponent.nativeElement.testComponentMethod();\n    }\n}\n```\n### Ember中使用,参考[stencil的Ember使用指南](\u003chttps://stenciljs.com/docs/ember/\u003e)\n\n```bash\nember install ember-cli-stencil\n```\n\nglue 也支持按需引入、CDN 引入等方式，详细说明见 [快速上手](https://grasilife.github.io/glue/#/zh-CN/quickstart).\n\n## 贡献代码\n\n修改代码请阅读我们的 [开发指南](https://grasilife.github.io/glue/#/zh-CN/contribution)。\n\n使用过程中发现任何问题都可以提 [Issue](https://github.com/grasilife/glue/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/grasilife/glue/pulls)。\n\n## 浏览器支持\n\n现代浏览器以及 Android 4.0+, iOS 8.0+, chrome 60+, Safari 10.1+,Firefox 63+,Edge 79+\n\n## 链接\n\n- [详细文档](https://grasilife.github.io/glue/#/zh-CN/home)\n- [更新日志](https://grasilife.github.io/glue/#/zh-CN/changelog)\n\n## 手机预览\n\n可以手机扫码以下二维码访问手机端 demo：\n后续支持\n\n## 微信讨论群\n\n欢迎大家加入 Glue 交流群一起讨论，添加下方微信并注明『加入 Glue 交流群』即可\n\n\u003cimg src=\"https://grasilife.github.io/material/wechat.jpeg\" width=\"240\" height=\"240\" \u003e\n\n## 开源协议\n\n本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrasilife%2Fglue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrasilife%2Fglue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrasilife%2Fglue/lists"}