{"id":18469272,"url":"https://github.com/nealst/skeleton-weex-plugin","last_synced_at":"2025-04-08T10:32:41.808Z","repository":{"id":57362282,"uuid":"182780849","full_name":"NealST/skeleton-weex-plugin","owner":"NealST","description":"weex骨架屏插件","archived":false,"fork":false,"pushed_at":"2019-05-18T08:37:18.000Z","size":7,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:55:12.077Z","etag":null,"topics":["skeleton","weex"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NealST.png","metadata":{"files":{"readme":"readme.cn.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-22T12:22:38.000Z","updated_at":"2023-03-04T03:47:03.000Z","dependencies_parsed_at":"2022-09-13T21:00:46.799Z","dependency_job_id":null,"html_url":"https://github.com/NealST/skeleton-weex-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NealST%2Fskeleton-weex-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NealST%2Fskeleton-weex-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NealST%2Fskeleton-weex-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NealST%2Fskeleton-weex-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NealST","download_url":"https://codeload.github.com/NealST/skeleton-weex-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247824219,"owners_count":21002233,"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":["skeleton","weex"],"created_at":"2024-11-06T10:09:26.048Z","updated_at":"2025-04-08T10:32:40.821Z","avatar_url":"https://github.com/NealST.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## skeleton-weex-plugin\nskeleton-weex-plugin是[skeleton-webpack-plugin](https://github.com/NealST/skeleton-webpack-plugin)的一个插件，它主要用于生成weex端的骨架屏代码 \n\n## 如何使用  \n\nskeleton-weex-plugin必须结合[skeleton-webpack-plugin](https://github.com/NealST/skeleton-webpack-plugin)一起使用.  \n在使用之前你必须先安装它们。\n```\nnpm i skeleton-webpack-plugin skeleton-weex-plugin --save-dev\n```\n或者\n```\nyarn add skeleton-webpack-plugin skeleton-weex-plugin --dev\n```\n在安装好该webpack插件之后，你只需要在其plugins配置项中添加上skeleton-weex-plugin即可。\n\n```\nconst SkeletonWebpackPlugin = require('skeleton-webpack-plugin')\ncosnt HtmlWebpackPlugin = require('html-webpack-plugin')\nconst SkeletonWeexPlugin = require('skeleton-weex-plugin')\nmodule.exports = {\n  entry: 'index.js',\n  mode: 'development',\n  output: {\n    path: 'dist',\n    filename: 'index.bundle.js'\n  },\n  plugins: [\n    new SkeletonWebpackPlugin({\n      outDir: __dirname,\n      projectDir: __dirname,\n      plugins: [SkeletonWeexPlugin]\n    }),\n    new HtmlWebpackPlugin({\n      filename: 'index.html',\n      inject: true\n    })\n  ]\n}\n```  \n然后当你启动dev server本地预览页面时,打开你的控制台，输入skeleton并按下回车键即可 \n![](https://camo.githubusercontent.com/ffc6c72bfb3ed1391a4e0be72c27b1e97433b448/68747470733a2f2f70742d73746172696d672e646964697374617469632e636f6d2f7374617469632f73746172696d672f696d672f6c4e6e694d764635584c313535383038393937373337382e6a7067)  \n\nskeleton-weex-plugin将会在你对应的页面目录下生成skeleton.vue的文件：\n```\n\u003ctemplate\u003e\n\u003cdiv v-if=\"isShow\" class=\"skeleton-wrapper\"\u003e\n\u003cdiv\u003eskeleton content\u003c/div\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\nexport default {\n  name: \"Skeleton\",\n  props: {\n    isShow: {\n      type: Boolean,\n      default: false\n    }\n  }\n}\n\u003c/script\u003e\n\u003cstyle scoped\u003e\nskeleton style content\n\u003c/style\u003e\n```  \n怎样你就可以将骨架屏当初一个组件来使用，并控制它的隐藏和显示  \n\n## 它是如何实现的  \n作为skeleton-webpack-plugin的插件,skeleton-weex-plugin可以获取到骨架屏html与css的抽象语法树，skeleton-weex-plugin只需要将语法树转化成weex代码。这里我选择了vue作为weex的dsl。 \n![](https://pt-starimg.didistatic.com/static/starimg/img/31gUFXpL6c1558076117193.jpg)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnealst%2Fskeleton-weex-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnealst%2Fskeleton-weex-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnealst%2Fskeleton-weex-plugin/lists"}