{"id":13603897,"url":"https://github.com/psaren/taro-ui-vue","last_synced_at":"2025-04-11T22:31:57.303Z","repository":{"id":47759133,"uuid":"266048696","full_name":"psaren/taro-ui-vue","owner":"psaren","description":"UI KIT for Taro/vue","archived":true,"fork":false,"pushed_at":"2021-08-14T07:46:48.000Z","size":3989,"stargazers_count":206,"open_issues_count":14,"forks_count":39,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-18T14:47:14.053Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/psaren.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-22T07:39:00.000Z","updated_at":"2024-11-09T15:22:41.000Z","dependencies_parsed_at":"2022-09-04T10:13:20.454Z","dependency_job_id":null,"html_url":"https://github.com/psaren/taro-ui-vue","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaren%2Ftaro-ui-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaren%2Ftaro-ui-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaren%2Ftaro-ui-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/psaren%2Ftaro-ui-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/psaren","download_url":"https://codeload.github.com/psaren/taro-ui-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248407732,"owners_count":21098511,"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-01T19:00:35.988Z","updated_at":"2025-04-11T22:31:54.718Z","avatar_url":"https://github.com/psaren.png","language":"SCSS","funding_links":[],"categories":["开源项目"],"sub_categories":["Taro3"],"readme":"# taro-ui-vue\r\n[![NPM version](https://img.shields.io/npm/v/taro-ui-vue.svg)](https://npmjs.org/package/taro-ui-vue)\r\n[![NPM](https://img.shields.io/npm/l/taro-ui-vue)](./LECENSE)\r\n![David](https://img.shields.io/david/psaren/taro-ui-vue)\r\n[![npm](https://img.shields.io/npm/dm/taro-ui-vue)](https://www.npmjs.com/package/taro-ui-vue)\r\n## 项目背景 \r\n`tarojs` 已经开始支持 `vue` 去写 taro 应用了，由于缺少相关的 ui 库，因此决定 按照 taro-ui 重写成 `vue` 组件。\r\n形成了 `taro-ui-vue` 这个库。\r\n\r\n## 相关链接\r\n[Taro Ui Vue 使用文档](http://taro-ui-vue.fontend.com/)  \r\n[Taro](https://github.com/NervJS/taro)  \r\n[Taro Ui](https://github.com/NervJS/taro-ui)\r\n\r\n## 使用注意\r\nTaro Ui Vue 提供的是源文件，源文件部分代码使用 `ts` 编写，需要项目支持 ts。\r\n如果是用 `taro init` 命令创建，则需在使用时选择 `ts` 。\r\n\r\n## 安装\r\n``` bash\r\nnpm i -S taro-ui-vue\r\n```\r\n\r\n## 使用\r\n### 按需引入\r\n``` javascript\r\n// page.js\r\nimport { AtButton } from 'taro-ui-vue'\r\n// OR\r\nimport AtButton from 'taro-ui-vue/src/components/button/index.vue'\r\n```\r\n按需引入样式\r\n``` javascript\r\n// js\r\nimport 'taro-ui-vue/dist/style/components/tag.scss'\r\n```\r\n``` scss\r\n// css\r\n@import \"~taro-ui/dist/style/components/button.scss\";\r\n```\r\n### 示例\r\n``` js\r\n\u003ctemplate\u003e\r\n  \u003cview class=\"index\"\u003e\r\n    \u003cAtTag\u003e标签\u003c/AtTag\u003e\r\n    \u003cAtIcon value=\"clock\" color=\"#F00\"\u003e\u003c/AtIcon\u003e\r\n  \u003c/view\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport { AtTag, AtIcon } from 'taro-ui-vue'\r\nimport 'taro-ui-vue/dist/style/components/icon.scss'\r\nimport 'taro-ui-vue/dist/style/components/tag.scss'\r\nexport default {\r\n  name: 'Index',\r\n  components: {\r\n    AtTag,\r\n    AtIcon,\r\n  }\r\n}\r\n\u003c/script\u003e\r\n```\r\n### 全局引入所有组件\r\n``` javascript\r\n// app.js\r\nimport TaroUiVue from 'taro-ui-vue/src'\r\nimport 'taro-ui-vue/dist/style/index.scss'\r\nVue.use(TaroUiVue)\r\n```\r\n### onXXX 属性示例\r\n在 .vue 文件 template 中需要按下面这样写  \r\n```\r\n\u003ctemplate\u003e\r\n  \u003cview\u003e\r\n    \u003cAtTag\r\n      type=\"primary\"\r\n      :on-click=\"handleClick\"\r\n    \u003e\r\n      标签\r\n    \u003c/AtTag\u003e\r\n  \u003c/view\u003e\r\n\u003c/template\u003e\r\n```\r\n\r\n## 更多使用方式\r\n更多组件使用及属性请参考 [taro-ui 使用文档](https://taro-ui.jd.com/#/docs/introduction)   \r\n所有参数基本一致\r\n\r\n## TODO\r\n- 为组件添加测试用例\r\n\r\n## CHANGELOG\r\n[CHANGELOG](https://github.com/psaren/taro-ui-vue/blob/master/CHANGELOG.md)\r\n\r\n## 贡献\r\n如果你在使用 Taro-UI-Vue 时遇到问题，或者有好的建议，欢迎给我们提 Issue 或 Pull Request。在开始之前，请阅读 [贡献指南](https://github.com/psaren/taro-ui-vue/blob/master/.github/CONTRIBUTING.md)\r\n\r\n## License\r\n\r\n[MIT](./LICENSE.md)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsaren%2Ftaro-ui-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpsaren%2Ftaro-ui-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpsaren%2Ftaro-ui-vue/lists"}