{"id":13790025,"url":"https://github.com/any86/vue-create-root","last_synced_at":"2025-03-15T11:32:54.113Z","repository":{"id":34931748,"uuid":"190858865","full_name":"any86/vue-create-root","owner":"any86","description":":lollipop: 不到1kb的小工具, 把组件变成this.$xxx命令.","archived":false,"fork":false,"pushed_at":"2023-01-04T00:48:35.000Z","size":1210,"stargazers_count":146,"open_issues_count":16,"forks_count":23,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-27T01:01:41.971Z","etag":null,"topics":["component","ts","utils","vue"],"latest_commit_sha":null,"homepage":"https://any86.github.io/vue-create-root/example/","language":"TypeScript","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/any86.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-06-08T07:30:00.000Z","updated_at":"2024-11-17T14:22:48.000Z","dependencies_parsed_at":"2023-01-15T10:45:25.547Z","dependency_job_id":null,"html_url":"https://github.com/any86/vue-create-root","commit_stats":null,"previous_names":["383514580/vue-other"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/any86%2Fvue-create-root","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/any86%2Fvue-create-root/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/any86%2Fvue-create-root/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/any86%2Fvue-create-root/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/any86","download_url":"https://codeload.github.com/any86/vue-create-root/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725010,"owners_count":20337658,"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":["component","ts","utils","vue"],"created_at":"2024-08-03T22:00:36.051Z","updated_at":"2025-03-15T11:32:53.834Z","avatar_url":"https://github.com/any86.png","language":"TypeScript","readme":"# vue-create-root [![NPM Version][npm-image]][npm-url] [![NPM Downloads][downloads-image]][downloads-url] [![npm bundle size (minified + gzip)][size-image]][size-url] [![codecov](https://codecov.io/gh/any86/vue-create-root/branch/develop/graph/badge.svg)](https://codecov.io/gh/any86/vue-create-root) [![CircleCI](https://circleci.com/gh/any86/vue-create-root.svg?style=svg)](https://circleci.com/gh/any86/vue-create-root)\n\n[size-image]: https://badgen.net/bundlephobia/minzip/vue-create-root\n[size-url]: https://bundlephobia.com/result?p=vue-create-root\n[npm-image]: https://img.shields.io/npm/v/vue-create-root.svg\n[npm-url]: https://npmjs.org/package/vue-create-root\n[downloads-image]: https://badgen.net/npm/dt/vue-create-root\n[downloads-url]: https://npmjs.org/package/vue-create-root\n\n:lollipop: 不到1kb的小工具, 把vue组件变成this.$xxx命令, 支持**插入组件到任意dom位置**.\n\n![](https://user-images.githubusercontent.com/8264787/63213406-99901300-c13e-11e9-94e6-839b4125e881.png)\n\n\n\n## 安装\n\n```shell\nnpm i -S vue-create-root\n```\n\n## cdn\n\n```\nhttps://unpkg.com/vue-create-root/dist/vue-create-root.umd.js\n```\n\n## 快速开始\n\n\n初始化后，组件内可以直接使用 **this.\\$createRoot** 渲染**任意组件**.\n\n```javascript\nimport createRoot from 'vue-create-root';\n// main.js\nVue.use(createRoot);\n\n// xxx.vue\nimport UCom from '../UCom.vue';\n{\n    mounted(){\n        // 默认组件被插入到\u003cbody\u003e尾部\n        this.$createRoot(UCom, {props: {value:'hello vue!'}});\n        // 或者简写为:\n        this.$createRoot(UCom, {value:'hello vue!'});\n    }\n}\n\n```\n\n## 自定义命令: this.\\$xxx\n你可以定义任意命令类似**饿了么UI**, 比如`this.$alert` / `this.$Message.success`\n\n```javascript\n// main.js\n// 初始化插件, 把createRootClass方法挂到Vue上\nVue.use(createRoot);\n\n// 包装组件\nconst C = Vue.createRootClass(UCom);\n\n// 定义this.$alert命令\n// props对应组件的props属性\nVue.prototype.$alert = (props) =\u003e new C(props);\n```\n\n```javascript\n// xxx.vue\nthis.$alert({isShow:true, content: \"你好vue !\"});\n```\n**注意**: 这里设计`Vue.createRootClass(UCom)`的意图是为了实现单/多例2种API, 比如上面的C的多例用法就是`new C()`, 而单例就是`C.init()`.\n\n## 更多\n\n[API](docs/API.md)\n\n[更多示例](docs/example.md)\n\n[为什么 Vue.createRootClass 要返回构造函数, 而不是直接生成组件?](docs/why.md)\n\n[:rocket:返回顶部](#vue-create-root-----)\n","funding_links":[],"categories":[":clap: 欢迎参与​"],"sub_categories":["工具库"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fany86%2Fvue-create-root","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fany86%2Fvue-create-root","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fany86%2Fvue-create-root/lists"}