{"id":13692027,"url":"https://github.com/uni-helper/vite-plugin-uni-layouts","last_synced_at":"2025-07-25T10:33:10.672Z","repository":{"id":63691311,"uuid":"567672656","full_name":"uni-helper/vite-plugin-uni-layouts","owner":"uni-helper","description":"为 Vite 下的 uni-app 提供类 nuxt 的 layouts 系统","archived":false,"fork":false,"pushed_at":"2024-05-21T10:36:29.000Z","size":350,"stargazers_count":21,"open_issues_count":11,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-22T02:58:02.745Z","etag":null,"topics":["layouts","uni-app","vite"],"latest_commit_sha":null,"homepage":"","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/uni-helper.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},"funding":{"github":["ModyQyW","KeJunMao","Neil Lee"],"custom":["https://afdian.net/a/kejun","https://github.com/ModyQyW/sponsors","https://afdian.net/a/zguolee"]}},"created_at":"2022-11-18T10:02:18.000Z","updated_at":"2024-05-29T05:28:49.116Z","dependencies_parsed_at":"2024-05-09T14:12:54.962Z","dependency_job_id":"66f2dd46-ba31-4ab9-8bd8-87b2f68f9c17","html_url":"https://github.com/uni-helper/vite-plugin-uni-layouts","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uni-helper%2Fvite-plugin-uni-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uni-helper%2Fvite-plugin-uni-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uni-helper%2Fvite-plugin-uni-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uni-helper%2Fvite-plugin-uni-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uni-helper","download_url":"https://codeload.github.com/uni-helper/vite-plugin-uni-layouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227567993,"owners_count":17787559,"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":["layouts","uni-app","vite"],"created_at":"2024-08-02T17:00:52.699Z","updated_at":"2024-12-01T13:29:27.226Z","avatar_url":"https://github.com/uni-helper.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ModyQyW","https://github.com/sponsors/KeJunMao","https://github.com/sponsors/Neil Lee","https://afdian.net/a/kejun","https://github.com/ModyQyW/sponsors","https://afdian.net/a/zguolee"],"categories":["TypeScript","打包器插件"],"sub_categories":[],"readme":"# @uni-helper/vite-plugin-uni-layouts\n\nVite 下 uni-app 的可定制布局框架\n\n## 安装\n\n```bash\npnpm i -D @uni-helper/vite-plugin-uni-layouts\n```\n\n## 使用\n\n### 配置\n\n```ts\n// vite.config.ts\nimport { defineConfig } from 'vite'\nimport uni from '@dcloudio/vite-plugin-uni'\nimport UniLayouts from '@uni-helper/vite-plugin-uni-layouts'\n\nexport default defineConfig({\n  plugins: [UniLayouts(), uni()],\n})\n```\n\n### 创建布局\n\n在 `src/layouts` 下创建布局\n\n```vue\n\u003c!-- default.vue --\u003e\n\u003ctemplate\u003e\n  \u003cslot\u003emain\u003c/slot\u003e\n\u003c/template\u003e\n```\n\n### 应用布局\n\n在 pages.json 中的页面中添加 layout 配置\n\n```json\n// pages.json\n{\n  // ...\n  \"pages\": [{\n    \"path\": \"pages/index/index\",\n    // 可选, 这是默认值\n    \"layout\": \"default\"\n  }]\n  // ...\n}\n```\n\n### 禁用布局\n\n```json\n// pages.json\n{\n  // ...\n  \"pages\": [{\n    \"path\": \"pages/index/index\",\n    \"layout\": false\n  }]\n  // ...\n}\n```\n\n### 动态布局和额外插槽\n\n你需要先**禁用页面**的布局， 然后使用内置组件 `\u003cuni-layout /\u003e`, 使用 `name` 属性指定布局，支持动态绑定 name、ref 等任意属性\n\n```vue\n\u003cscript setup\u003e\nconst defaultName = ref('default')\n\u003c/script\u003e\n\u003ctemplate\u003e\n  \u003cuni-layout :name=\"defaultName\"\u003e\n    \u003ctemplate #header\u003euni-layout header\u003c/template\u003e\n    use slot\n    \u003ctemplate #footer\u003euni-layout footer\u003c/template\u003e\n  \u003c/uni-layout\u003e\n\u003c/template\u003e\n```\n\n### `ref`\n\n只需声明一个 ref 变量 `uniLayout` 即可访问\n\n```vue\n\u003cscript setup\u003e\nconst uniLayout = ref()\n\u003c/script\u003e\n```\n或者\n\n```vue\n\u003cscript\u003e\nexport default {\n  onLoad() {\n    console.log(this.$refs.uniLayout)\n  }\n}\n\u003c/script\u003e\n```\n\n## 配置\n\nsee [type.ts](./src/types.ts)\n\n## 注意\n\nlayout 插件并非使用了什么魔法，它只做了两件事：\n\n1. 自动扫描并全局注册 layouts 目录下的组件\n2. 将页面使用 layout 组件包裹起来\n   所以，在微信小程序下，如果你使用了 web-view , 那么不会生效。\n\n如果你使用 [vite-plugin-uni-pages](https://github.com/uni-helper/vite-plugin-uni-pages), 只需使用 route-block\n\n```vue\n\u003croute lang=\"json\"\u003e\n{\n  \"layout\": \"anyLayout\"\n}\n\u003c/route\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funi-helper%2Fvite-plugin-uni-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funi-helper%2Fvite-plugin-uni-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funi-helper%2Fvite-plugin-uni-layouts/lists"}