{"id":21557114,"url":"https://github.com/shenfe/vsnippet","last_synced_at":"2025-03-18T03:24:09.113Z","repository":{"id":143949433,"uuid":"129993005","full_name":"shenfe/vsnippet","owner":"shenfe","description":"Frontend view snippet base.","archived":false,"fork":false,"pushed_at":"2018-04-24T05:53:42.000Z","size":29,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-24T10:32:43.267Z","etag":null,"topics":["code-base","code-snippets","frontend","view","vue-components"],"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/shenfe.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":"2018-04-18T02:37:15.000Z","updated_at":"2018-04-24T05:53:44.000Z","dependencies_parsed_at":null,"dependency_job_id":"aee2b844-8edd-4a99-af0f-b39310835c4d","html_url":"https://github.com/shenfe/vsnippet","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvsnippet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvsnippet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvsnippet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shenfe%2Fvsnippet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shenfe","download_url":"https://codeload.github.com/shenfe/vsnippet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244148381,"owners_count":20406172,"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":["code-base","code-snippets","frontend","view","vue-components"],"created_at":"2024-11-24T08:11:05.042Z","updated_at":"2025-03-18T03:24:09.090Z","avatar_url":"https://github.com/shenfe.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vsnippet\n\n\u003e 前端视图层的片段组件库。使用scss、vue等形式编写和组织。既可以作为vue组件库，又可以作为view层公共代码库。**可以据此建立团队使用的基础样式和组件库。**\n\n## Philosophy\n\n使用开发vue组件的方式定义静态的基础组件以及组件的嵌套，html和css遵循就近原则，允许多种模板开发html，使用sass实现样式规则的更好复用，并利用vue的scope样式避免css污染。\n\n## 静态html/css合成\n\n调用`compose`，以一个vue文件为入口，将scss、vue等文件合成一对html、css。\n\n### 命令行\n\n执行脚本：\n\n```bash\n$ node path/to/compose.js -v path/to/view -o path/to/output\n```\n\n或配置npm命令：\n\n```json\n\"scripts\": {\n    \"compose\": \"vcompose -v path/to/view -o path/to/output\"\n}\n```\n\n### Node.js API\n\n```js\nconst compose = require('@shenfe/vsnippet');\ncompose('path/to/view', 'path/to/output');\n```\n\n### 示例\n\n运行`node ./compose.js -v example2`，即在`example2`中生成`index.html`、`index.css`文件，是example2的完整html和css。\n\n组件example2的vue形式源码：\n\n```vue\n\u003ctemplate lang=\"pug\"\u003e\ndiv hello\n  example1\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport Example1 from '../example1'\nexport default {\n  components: {\n    Example1\n  }\n}\n\u003c/script\u003e\n```\n\n合成的组件example2的html、css：\n\n```html\n\u003cdiv\u003ehello\u003cspan data-v-24a2967e=\"\" class=\"name\"\u003eworld\u003c/span\u003e\u003c/div\u003e\n```\n\n```css\n.name[data-v-24a2967e]{color:#333}\nspan{background-color:#000}\n```\n\n## Thanks\n\n* [prerender-spa-plugin](https://github.com/chrisvfritz/prerender-spa-plugin)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshenfe%2Fvsnippet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshenfe%2Fvsnippet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshenfe%2Fvsnippet/lists"}