{"id":20098586,"url":"https://github.com/dishait/vite-plugin-vue-custom-blocks","last_synced_at":"2025-05-06T05:32:16.591Z","repository":{"id":57393238,"uuid":"458530465","full_name":"dishait/vite-plugin-vue-custom-blocks","owner":"dishait","description":"vue sfc 的自定义块 vite 插件","archived":false,"fork":false,"pushed_at":"2024-02-28T08:39:17.000Z","size":23,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-19T08:50:30.486Z","etag":null,"topics":["custom-blocks","plugin","sfc","vite","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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-02-12T13:32:01.000Z","updated_at":"2023-07-18T03:09:23.000Z","dependencies_parsed_at":"2024-11-13T17:06:02.016Z","dependency_job_id":"781678e2-736a-4f07-83a9-9a384615688a","html_url":"https://github.com/dishait/vite-plugin-vue-custom-blocks","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"7534a84deb29bae14ddd0a2b4bc5eb141fab573d"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":"dishait/vite-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvite-plugin-vue-custom-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvite-plugin-vue-custom-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvite-plugin-vue-custom-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dishait%2Fvite-plugin-vue-custom-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dishait","download_url":"https://codeload.github.com/dishait/vite-plugin-vue-custom-blocks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252629275,"owners_count":21779183,"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":["custom-blocks","plugin","sfc","vite","vue"],"created_at":"2024-11-13T17:05:58.624Z","updated_at":"2025-05-06T05:32:16.250Z","avatar_url":"https://github.com/dishait.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-vue-custom-blocks\n\nvue sfc 的自定义块 `vite` 插件\n\n\u003cbr /\u003e\n\n## Motivation 🐇\n\n有时候我们想要在单文件组件 `SFC` 内进行设置一些对象，但是写到 `setup` 中又太拥挤了。所以有了这个自定义块的插件 🤗🤗 \n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Features 🦖\n\n- json 解析\n- yaml 解析\n\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## 使用 🦕\n\n### 安装\n\n```shell\npnpm i vite-plugin-vue-custom-blocks -D\n\n# npm i vite-plugin-vue-custom-blocks -D\n# yarn add vite-plugin-vue-custom-blocks -D\n```\n\n\u003cbr /\u003e\n\n### 配置插件\n\n```ts\n// vite.config.ts 或者 vite.config.js\n\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport CustomBlocks from 'vite-plugin-vue-custom-blocks'\n\nexport default defineConfig({\n    plugins: [\n        Vue(), \n        CustomBlocks()\n    ]\n})\n```\n\n#### 具体配置\n\n```ts\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport CustomBlocks from 'vite-plugin-vue-custom-blocks'\n\nexport default defineConfig({\n    plugins: [\n        Vue(), \n        CustomBlocks({\n            include: {\n                tags: ['custom-block'], // 标签名, 默认只解析 custom-block\n                langs: ['json', 'yaml'] // 允许的解析方式，默认支持 json 和 yaml 解析\n            }\n        })\n    ]\n})\n```\n\n\u003cbr /\u003e\n\n### `SFC` 模板中\n\n#### json 解析\n\n```html\n\u003cscript lang=\"ts\" setup\u003e\nimport { useCustomBlock } from \"vite-plugin-vue-custom-blocks\"\n\nconst block = useCustomBlock()\n\nconsole.log(block) // 将输出 { foo: 'bar' }\n\u003c/script\u003e\n\n\u003ctemplate\u003eHello, world!!\u003c/template\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n\n\u003ccustom-block lang=\"json\"\u003e\n{\n    \"foo\": \"bar\"\n}\n\u003c/custom-block\u003e\n```\n\n#### yaml 解析\n\n```html\n\u003cscript lang=\"ts\" setup\u003e\nimport { useCustomBlock } from \"vite-plugin-vue-custom-blocks\"\n\nconst block = useCustomBlock()\n\nconsole.log(block) // 将输出 { foo: 'bar' }\n\u003c/script\u003e\n\n\u003ctemplate\u003eHello, world!!\u003c/template\u003e\n\n\u003cstyle\u003e\n\u003c/style\u003e\n\n\u003ccustom-block lang=\"yaml\"\u003e\nfoo:\n    bar\n\u003c/custom-block\u003e\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n\n## License\n\nMade with markthree\n\nPublished under [MIT License](./LICENSE).\n\n\u003cbr /\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdishait%2Fvite-plugin-vue-custom-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdishait%2Fvite-plugin-vue-custom-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdishait%2Fvite-plugin-vue-custom-blocks/lists"}