{"id":14973806,"url":"https://github.com/wocwin/t-ui-plus","last_synced_at":"2026-02-06T10:16:58.736Z","repository":{"id":59821130,"uuid":"539414363","full_name":"wocwin/t-ui-plus","owner":"wocwin","description":"基于vue3+ts+Element-plus二次封装基础组件文档；vue3基础组件文档","archived":false,"fork":false,"pushed_at":"2026-01-03T02:25:44.000Z","size":68205,"stargazers_count":378,"open_issues_count":8,"forks_count":70,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-01-05T17:23:00.905Z","etag":null,"topics":["components","element-plus","element-ui","form","monorepo","select","t-ui","t-ui-plus","table","tree","typescript","vite","vitepress","vue","vue2","vue3","wocwin","workspace"],"latest_commit_sha":null,"homepage":"https://wocwin.github.io/t-ui-plus/","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/wocwin.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-09-21T09:48:14.000Z","updated_at":"2026-01-03T02:25:15.000Z","dependencies_parsed_at":"2024-01-18T07:28:11.739Z","dependency_job_id":"53f8e4af-7870-48a7-9a95-127c14394e39","html_url":"https://github.com/wocwin/t-ui-plus","commit_stats":{"total_commits":405,"total_committers":6,"mean_commits":67.5,"dds":"0.15061728395061724","last_synced_commit":"38077a26160587f2483bb47fca8d9bf019b76603"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/wocwin/t-ui-plus","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui-plus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui-plus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui-plus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui-plus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wocwin","download_url":"https://codeload.github.com/wocwin/t-ui-plus/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wocwin%2Ft-ui-plus/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29157586,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T07:18:23.844Z","status":"ssl_error","status_checked_at":"2026-02-06T07:13:32.659Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["components","element-plus","element-ui","form","monorepo","select","t-ui","t-ui-plus","table","tree","typescript","vite","vitepress","vue","vue2","vue3","wocwin","workspace"],"created_at":"2024-09-24T13:49:26.599Z","updated_at":"2026-02-06T10:16:58.722Z","avatar_url":"https://github.com/wocwin.png","language":"Vue","readme":"# T-ui-Plus\n\n## [T-ui-Plus使用Demo项目](https://github.com/wocwin/wocwin-admin)\n\n\u003e`wocwin-admin`是基于 Vue3.3、TypeScript、Vite4、Pinia、Element-Plus 开源的一套后台管理模板；此项目全面使用了`T-ui-Plus`二次封装基础组件库\n\n## 介绍\n\n\u003e 基于 vue3+ ts+ Element-plus 二次封装组件\n\n这是我在学习 Vue3 中基于[Element-plus](https://element-plus.org/zh-CN/) 二次封装基础组件文档，希望对你有用。可查看 [详细组件案例文档](https://wocwin.github.io/t-ui-plus/) 预览\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://gitee.com/wocwin/t-ui-plus/stargazers\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://gitee.com/wocwin/t-ui-plus/badge/star.svg?theme=dark\" alt=\"t-ui-plus\"\u003e\n  \u003c/a\u003e\n   \u003ca href=\"https://github.com/wocwin/t-ui-plus/stargazers\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/stars/wocwin/t-ui-plus.svg\" alt=\"t-ui-plus\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@wocwin/t-ui-plus\" target=\"_blank\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@wocwin/t-ui-plus.svg\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### 安装\n\n**建议您使用包管理器 ([pnpm](https://pnpm.io/)\u003cel-tag  effect=\"dark\"\u003e推荐\u003c/el-tag\u003e ， [yarn](https://classic.yarnpkg.com/lang/en/)，[npm](https://www.npmjs.com/)) 安装 @wocwin/t-ui-plus**。\n\n\n```shell\n// 使用pnpm\npnpm install @wocwin/t-ui-plus -S\n\n// 使用npm\nnpm install @wocwin/t-ui-plus -S\n\n// 使用yarn\nyarn add @wocwin/t-ui-plus\n```\n\n\n## 全局注册使用\n\n\u003e ### 前提条件：使用项目必须全局注册 Element-plus组件库\n\n```js\n// 在main.js中按下引入\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport ElementPlus from \"element-plus\";\nimport \"element-plus/dist/index.css\";\nimport \"element-plus/theme-chalk/dark/css-vars.css\";\n// import en from 'element-plus/es/locale/lang/en' // 引入element-plus语言包 en--不建议固定设置\nimport zhCn from 'element-plus/es/locale/lang/zh-cn' // 引入element-plus语言包 zh-cn--不建议固定设置\nimport plusZhCn from '@wocwin/t-ui-plus/locale/zh-cn' // 引入t-ui-plus语言包 zh-cn--不建议固定设置\n// import plusEn from '@wocwin/t-ui-plus/locale/en' // 引入t-ui-plus语言包 en--不建议固定设置\n// element-plus图标\nimport * as ElementPlusIconsVue from \"@element-plus/icons-vue\";\nimport TuiPlus from '@wocwin/t-ui-plus'\nimport '@wocwin/t-ui-plus/index.css'\nconst app = createApp(App)\n// 注册所有图标\n  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {\n    app.component(key, component);\n  }\n  // 注册ElementPlus\n  app.use(ElementPlus, {\n    locale: { ...zhCn, ...plusZhCn } // 语言设置--不建议固定设置\n    // size: Cookies.get('size') || 'medium' // 尺寸设置\n  });\napp.use(TuiPlus)\napp.mount('#app')\n```\n\n## 按需引入\n\n```js\n// 在main.js中按下引入\nimport '@wocwin/t-ui-plus/index.css'\n// 单个.vue文件引入\n\u003cscript setup lang=\"ts\"\u003e\n  import {TDetail, TForm} from \"@wocwin/t-ui-plus\"\n\u003c/script\u003e\n```\n## 国际化配置-- ConfigProvider \u003cel-tag  effect=\"dark\"\u003e推荐\u003c/el-tag\u003e\n```html\n\u003ctemplate\u003e\n  \u003cel-config-provider :locale=\"locale\"\u003e *** \u003c/el-config-provider\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { ElConfigProvider } from 'element-plus'\n  import { useGlobalStore } from \"@/store/modules/global\"; // 引入pinia全局状态管理\n  import en from 'element-plus/es/locale/lang/en'\n  import zhCn from 'element-plus/es/locale/lang/zh-cn'\n  import plusZhCn from '@wocwin/t-ui-plus/locale/zh-cn'\n  import plusEn from '@wocwin/t-ui-plus/locale/en'\n\n  const zhCnLocales = {\n    ...zhCn,\n    ...plusZhCn\n  }\n  const enLocales = {\n    ...en,\n    ...plusEn\n  }\n\n  const globalStore = useGlobalStore();\n  const locale = computed(() =\u003e (globalStore.language === 'zh' ? zhCnLocales : enLocales))\n\n\u003c/script\u003e\n```\n## 浏览器直接引入\n\n直接通过浏览器的 HTML 标签导入 @wocwin/t-ui-plus，然后就可以使用全局变量 `TuiPlus` 了。\n\n根据不同的 CDN 提供商有不同的引入方式， 我们在这里以[unpkg](https://unpkg.com) 和 [jsDelivr](https://jsdelivr.com) 举例。 你也可以使用其它的 CDN 供应商。\n\n### unpkg\n\n```html\n\u003chead\u003e\n  \u003c!-- 导入element-plus样式 --\u003e\n  \u003clink rel=\"stylesheet\" href=\"//unpkg.com/element-plus/dist/index.css\" /\u003e\n  \u003c!-- 导入vue3 --\u003e\n  \u003cscript src=\"//unpkg.com/vue@3\"\u003e\u003c/script\u003e\n  \u003c!-- 导入element-plus --\u003e\n  \u003cscript src=\"//unpkg.com/element-plus\"\u003e\u003c/script\u003e\n\n  \u003c!-- 导入t-ui-plus样式 --\u003e\n  \u003clink rel=\"stylesheet\" href=\"//unpkg.com/@wocwin/t-ui-plus/index.css\" /\u003e\n  \u003c!--导入t-ui-plus\"  --\u003e\n  \u003cscript src=\"//unpkg.com/@wocwin/t-ui-plus\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n### jsDelivr\n\n```html\n\u003chead\u003e\n  \u003c!-- 导入element-plus样式 --\u003e\n  \u003clink rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/npm/element-plus/dist/index.css\" /\u003e\n  \u003c!-- 导入vue3 --\u003e\n  \u003cscript src=\"//cdn.jsdelivr.net/npm/vue@3\"\u003e\u003c/script\u003e\n  \u003c!-- 导入element-plus --\u003e\n  \u003cscript src=\"//cdn.jsdelivr.net/npm/element-plus\"\u003e\u003c/script\u003e\n\n  \u003c!-- 导入t-ui-plus样式 --\u003e\n  \u003clink rel=\"stylesheet\" href=\"//cdn.jsdelivr.net/npm/@wocwin/t-ui-plus/index.css\" /\u003e\n  \u003c!--导入t-ui-plus\"  --\u003e\n  \u003cscript src=\"//cdn.jsdelivr.net/npm/@wocwin/t-ui-plus\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n## 全部组件如下\n| 组件名称                 | 说明                                                                                                                                                       |\n| :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| TLayoutPage              | 布局页面                                                                                                                                                   |\n| TLayoutPageItem          | 布局页面子项                                                                                                                                               |\n| TAdaptivePage            | [一屏组件](https://wocwin.github.io/t-ui-plus/components/TAdaptivePage/base.html?_blank)（继承TTable 及 TQueryCondition 组件的所有属性、事件、插槽、方法） |\n| TQueryCondition          | [条件查询组件](https://wocwin.github.io/t-ui-plus/components/TQueryCondition/base.html?_blank)                                                             |\n| TTable                   | [表格组件](https://wocwin.github.io/t-ui-plus/components/TTable/base.html?_blank)                                                                          |\n| Virtualized TTable       | [虚拟列表](https://wocwin.github.io/t-ui-plus/components/TTableVirtual/base.html?_blank)                                                                   |\n| TForm                    | [表单组件](https://wocwin.github.io/t-ui-plus/components/TForm/base.html?_blank)                                                                           |\n| TSelectTable             | [下拉选择表格组件](https://wocwin.github.io/t-ui-plus/components/TSelectTable/base.html?_blank)                                                            |\n| Virtualized TSelectTable | [下拉选择虚拟表格组件](https://wocwin.github.io/t-ui-plus/components/multipleVirtual/base.html?_blank)                                                     |\n| TSelectIcon              | [图标选择组件](https://wocwin.github.io/t-ui-plus/components/TSelectIcon/base.html?_blank)                                                                 |\n| TSelect                  | [下拉选择组件](https://wocwin.github.io/t-ui-plus/components/TSelect/base.html?_blank)                                                                     |\n| TDetail                  | [详情组件](https://wocwin.github.io/t-ui-plus/components/TDetail/base.html?_blank)                                                                         |\n| TButton                  | [防抖按钮组件](https://wocwin.github.io/t-ui-plus/components/TButton/base.html?_blank)                                                                     |\n| TStepWizard              | [步骤条组件](https://wocwin.github.io/t-ui-plus/components/TStepWizard/base.html?_blank)                                                                   |\n| TTimerBtn                | 定时按钮组件                                                                                                                                               |\n| TModuleForm              | [模块表单/详情组件](https://wocwin.github.io/t-ui-plus/components/TModuleForm/base.html?_blank)                                                            |\n| TDatePicker              | [日期选择器组件](https://wocwin.github.io/t-ui-plus/components/TDatePicker/base.html?_blank)                                                               |\n| TRadio                   | [单选组件](https://wocwin.github.io/t-ui-plus/components/TRadio/base.html?_blank)                                                                          |\n| TCheckbox                | [多选组件](https://wocwin.github.io/t-ui-plus/components/TCheckbox/base.html?_blank)                                                                       |\n| TChart                   | [图表组件](https://wocwin.github.io/t-ui-plus/components/TChart/base.html?_blank)                                                                          |\n| TTabs                    | [标签页组件](https://wocwin.github.io/t-ui-plus/components/TTabs/base.html?_blank)                                                                         |\n| TSelectIcon              | [图标选择组件](https://wocwin.github.io/t-ui-plus/components/TSelectIcon/base.html?_blank)                                                                 |\n\n\n\n## Vue - Official （Volar）待验证\n\n```js\n// 需要在使用的项目的tsconfig.json文件中添加以下\ncompilerOptions：{\n  \"types\": [\n      \"@wocwin/t-ui-plus/index.d.ts\"\n    ],\n}\n\n```\n## 自动按需导入 (暂不支持--待完善)\n- 1. 安装插件\n\n  ```sh\n  pnpm install -D unplugin-vue-components unplugin-auto-import @t-ui-plus/resolver\n\n  ```\n- 2.  配置 `vite.config.ts` 或者配置 `webpack(vue).config.js`\n### vite.config.ts配置\n```js\n  // vite.config.ts\n  import { defineConfig } from 'vite'\n  import AutoImport from 'unplugin-auto-import/vite'\n  import Components from 'unplugin-vue-components/vite'\n  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'\n  import { TuiPlusResolver } from '@t-ui-plus/resolver'\n\n  export default defineConfig({\n    // ...\n    plugins: [\n      // ...\n      AutoImport({\n        resolvers: [ElementPlusResolver()]\n      }),\n      Components({\n        resolvers: [ElementPlusResolver(), TuiPlusResolver()]\n      })\n    ]\n  })\n```\n### vue.config.js配置\n```js\nconst { defineConfig } = require('@vue/cli-service')\n  const AutoImport = require('unplugin-auto-import/webpack')\n  const Components = require('unplugin-vue-components/webpack')\n  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')\n  const { TuiPlusResolver } = require('@t-ui-plus/resolver')\n\n  module.exports = defineConfig({\n    // ...\n    configureWebpack: {\n      plugins: [\n        // ...\n        AutoImport({\n          resolvers: [ElementPlusResolver()]\n        }),\n        Components({\n          resolvers: [TuiPlusResolver(), ElementPlusResolver()]\n        })\n      ]\n    }\n  })\n```\n## 安装依赖\n\u003e ### 注意: 本地环境版本最好安装 [Node.js 18.x+](https://nodejs.org/en)、[pnpm 7.x+](https://github.com/pnpm/pnpm/)\n\n```shell\nnpm install -g pnpm\n\n# 安装依赖\npnpm install --registry=https://registry.npmjs.org/\n\u003epnpm config get registry 查看当前指向源\n\n# 如果安装依赖失败，可以尝试使用淘宝镜像  --registry=https://registry.npmmirror.com/\n\u003epnpm config set registry https://registry.npmmirror.com/ 切换淘宝镜像源\n\u003epnpm install\n\n```\n\n## 本地运行 vitepress 中组件文档\n\n```shell\n// docs项目(文档demo示例)基于vue3+vite项目\nnpm run docs:dev\n\n```\n\n## Thanks to all the contributors\n\n\u003ca href=\"https://github.com/wocwin/t-ui-plus/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=wocwin/t-ui-plus\" alt=\"contributors\" /\u003e\n\u003c/a\u003e\n\n## 微信交流群\n\n\u003e目前微信群已超过 200 人，需要加微信好友(请备注 T-ui-Plus)，拉大家进群\n\n|                微信二维码                 |\n| :---------------------------------------: |\n| \u003cimg src=\"./public/wocwin.jpg\" width=170\u003e |\n\n## Git 提交规范\n\n- `ci`: ci 配置文件和脚本的变动;\n- `chore`: 构建系统或辅助工具的变动;\n- `fix`: 代码 BUG 修复;\n- `feat`: 新功能;\n- `perf`: 性能优化和提升;\n- `refactor`: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;\n- `style`: 代码格式调整，可能是空格、分号、缩进等等;\n- `docs`: 文档变动;\n- `test`: 补充缺失的测试用例或者修正现有的测试用例;\n- `revert`: 回滚操作;\n\n## [Vue2 基于 Element-ui基础组件传送门](https://github.com/wocwin/t-ui)\n\n\u003e 基于 Element-ui 二次封装基础组件地址","funding_links":[],"categories":["Vue"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwocwin%2Ft-ui-plus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwocwin%2Ft-ui-plus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwocwin%2Ft-ui-plus/lists"}