{"id":20098580,"url":"https://github.com/dishait/vite-plugin-vue-meta-layouts","last_synced_at":"2025-04-05T05:04:58.408Z","repository":{"id":57673727,"uuid":"476283229","full_name":"dishait/vite-plugin-vue-meta-layouts","owner":"dishait","description":"vite 的 vue-router 的元信息布局系统 | Vite's Vue-Router's meta-information layout system","archived":false,"fork":false,"pushed_at":"2024-11-21T03:30:16.000Z","size":265,"stargazers_count":61,"open_issues_count":2,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T04:07:45.024Z","etag":null,"topics":["layouts","meta","plugin","vite","vue-router"],"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/dishait.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}},"created_at":"2022-03-31T11:51:45.000Z","updated_at":"2025-03-28T06:03:21.000Z","dependencies_parsed_at":"2023-11-23T11:28:26.633Z","dependency_job_id":"77c98ae7-6aa4-474b-bb9c-1a93ac588f61","html_url":"https://github.com/dishait/vite-plugin-vue-meta-layouts","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"b7eb348cbd81b889d1df0a1883ac30b372aa0695"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":"dishait/vite-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvite-plugin-vue-meta-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvite-plugin-vue-meta-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvite-plugin-vue-meta-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvite-plugin-vue-meta-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dishait","download_url":"https://codeload.github.com/dishait/vite-plugin-vue-meta-layouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289426,"owners_count":20914464,"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","meta","plugin","vite","vue-router"],"created_at":"2024-11-13T17:05:57.968Z","updated_at":"2025-04-05T05:04:58.385Z","avatar_url":"https://github.com/dishait.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-vue-meta-layouts\n\n`vite` 的 `vue-router` 的元信息布局系统\n\n\u003cbr /\u003e\n\n## README 🦉\n\n[English](./README_EN.md) | Chinese\n\n\u003cbr /\u003e\n\n## 动机 🤔\n\n[vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)\n的重写版本，在最新版本的 `vite` 中有合理的 `hmr` ！！\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 使用 🦖\n\n### 基础\n\n#### 安装\n\n```shell\nnpm i vite-plugin-vue-meta-layouts -D\n```\n\n```ts\n// vite.config.js\nimport { defineConfig } from \"vite\";\nimport Vue from \"@vitejs/plugin-vue\";\nimport MetaLayouts from \"vite-plugin-vue-meta-layouts\";\n\nexport default defineConfig({\n  plugins: [Vue(), MetaLayouts()],\n});\n```\n\n#### 使用\n\n```ts\nimport { setupLayouts } from \"virtual:meta-layouts\";\nimport { createRouter, createWebHistory } from \"vue-router\";\n\nconst routes = setupLayouts([\n  {\n    // ... 页面路由配置\n  },\n]);\n\nconst router = createRouter({\n  routes,\n  history: createWebHistory(),\n});\n```\n\n1. 创建 `layouts/default.vue` 默认布局，此时页面都会被应用该布局\n\n```html\n\u003ctemplate\u003e\n  default\n  \u003crouter-view /\u003e\n  \u003c!-- 视图出口 --\u003e\n\u003c/template\u003e\n```\n\n2. 当然你可以配置不同的的布局\n\n例如创建 `layouts/other.vue`\n\n```ts\n// 应用 layouts/default.vue 布局\nconst home = {\n  path: \"/\",\n  component: () =\u003e import(\"./pages/home.vue\"),\n};\n\n// 应用 layouts/other.vue 布局\nconst about = {\n  path: \"/about\",\n  component: () =\u003e import(\"./pages/home.vue\"),\n  meta: {\n    layout: \"other\", // 通过元信息来管理布局\n  },\n};\n\nconst routes = setupLayouts([home, about]);\n```\n\n\u003cbr /\u003e\n\n### 搭配文件路由\n\n当然也支持文件路由哦 🤗\n\n#### [vite-plugin-pages](https://github.com/hannoeru/vite-plugin-pages)\n\n##### 安装\n\n```shell\nnpm i vite-plugin-pages -D\n```\n\n```ts\n// vite.config.js\nimport { defineConfig } from \"vite\";\nimport Vue from \"@vitejs/plugin-vue\";\nimport Pages from \"vite-plugin-pages\"; // 引入文件路由插件\nimport MetaLayouts from \"vite-plugin-vue-meta-layouts\";\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    Pages(), // 配置文件路由插件\n    MetaLayouts(),\n  ],\n});\n```\n\n##### 使用\n\n```ts\nimport fileRoutes from \"~pages\"; // 引入文件路由表\nimport { setupLayouts } from \"virtual:meta-layouts\";\nimport { createRouter, createWebHistory } from \"vue-router\";\n\nconst router = createRouter({\n  routes: setupLayouts(fileRoutes), // 注册文件路由表\n  history: createWebHistory(),\n});\n```\n\n此时可以通过页面中的自定义块 `route` 的 `meta` 来做布局配置\n\n```html\n\u003c!-- 你的页面 --\u003e\n\u003ctemplate\u003e 内容 \u003c/template\u003e\n\n\u003croute\u003e { meta: { layout: 'other' } } \u003c/route\u003e\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n#### [unplugin-vue-router](https://github.com/posva/unplugin-vue-router)\n\n##### 安装\n\n```shell\nnpm i unplugin-vue-router -D\n```\n\n##### 使用\n\n```ts\nimport { routes } from \"vue-router/auto-routes\"; // 引入文件路由表\nimport { setupLayouts } from \"virtual:meta-layouts\";\nimport { createRouter, createWebHistory } from \"vue-router/auto\";\n\nconst router = createRouter({\n  routes: setupLayouts(routes), // 注册文件路由表\n  history: createWebHistory(),\n});\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### 配置\n\n```ts\n// vite.config.js\nimport { defineConfig } from \"vite\";\nimport Vue from \"@vitejs/plugin-vue\";\nimport MetaLayouts from \"vite-plugin-vue-meta-layouts\";\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    MetaLayouts({\n      target: \"src/layouts\", // 布局目录，默认 src/layouts\n      defaultLayout: \"default\", // 默认布局，默认为 default\n      importMode: \"sync\", // 加载模式，支持 sync 和 async。默认为自动处理，SSG 时为 sync，非 SSG 时为 async\n      skipTopLevelRouteLayout: true, // 打开修复 https://github.com/JohnCampionJr/vite-plugin-vue-layouts/issues/134，默认为 false 关闭\n      excludes: [], // 排除路径，仅接受 glob\n    }),\n  ],\n});\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### 类型声明 🦕\n\n如果你是 `ts` 项目，还可以在 `tsconfig.json` 中配置以下声明\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\"vite-plugin-vue-meta-layouts/client\"]\n  }\n}\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### `route` 代码提示 💡\n\n使用\n[volar-plugin-vue-router](https://github.com/kingyue737/volar-plugin-vue-router)\n可以带来友好的代码提示.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n### 注意\n\n由于布局系统需要在最外层嵌套一层布局路由，所以可能会造成路由表的获取混乱，此时可以用辅助的函数\n👇\n\n```ts\nimport { createGetRoutes } from \"virtual:meta-layouts\";\n\nconst getRoutes = createGetRoutes(router);\n\n// 获取路由表但是不包含布局路由\nconsole.log(getRoutes());\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 实现 👀\n\n布局实现思路来自\n[vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)。\n\n但用了更简单方案 👉\n[虚拟文件](https://vitejs.cn/guide/api-plugin.html#importing-a-virtual-file) 与\n[Glob 导入](https://vitejs.cn/guide/features.html#glob-import)。\n\n该方案可以自动地做合理的 `hmr`。\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 组织 🦔\n\n欢迎关注 **帝莎编程**\n\n- [官网](http://dishaxy.dishait.cn/)\n- [Gitee](https://gitee.com/dishait)\n- [Github](https://github.com/dishait)\n- [网易云课堂](https://study.163.com/provider/480000001892585/index.htm?share=2\u0026shareId=480000001892585)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## License\n\nMade with [markthree](https://github.com/markthree)\n\nPublished under [MIT License](./LICENSE).\n\n\u003cbr /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdishait%2Fvite-plugin-vue-meta-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdishait%2Fvite-plugin-vue-meta-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdishait%2Fvite-plugin-vue-meta-layouts/lists"}