{"id":22978279,"url":"https://github.com/zwwill/weex-vue-s-render","last_synced_at":"2025-04-02T08:42:24.871Z","repository":{"id":128007241,"uuid":"147515967","full_name":"zwwill/weex-vue-s-render","owner":"zwwill","description":null,"archived":false,"fork":false,"pushed_at":"2019-04-16T08:46:23.000Z","size":1991,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T23:44:24.735Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zwwill.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-09-05T12:42:24.000Z","updated_at":"2019-04-16T08:46:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"149dd9e7-b043-4208-bc35-b6eef02cd690","html_url":"https://github.com/zwwill/weex-vue-s-render","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/zwwill%2Fweex-vue-s-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zwwill%2Fweex-vue-s-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zwwill%2Fweex-vue-s-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zwwill%2Fweex-vue-s-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zwwill","download_url":"https://codeload.github.com/zwwill/weex-vue-s-render/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246785418,"owners_count":20833471,"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":[],"created_at":"2024-12-15T01:18:20.519Z","updated_at":"2025-04-02T08:42:24.843Z","avatar_url":"https://github.com/zwwill.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# weex-vue-s-render\n\nWeb server renderer for weex project. Support Vue 2.x syntax.\n\n## How To Use\n\nWe strongly suggest you use v1.x instead of 0.12.x, according to performance issue.\n\n```shell\nnpm install weex-vue-s-render\n```\n\n```javascript\n// import vue runtime.\nconst Vue = require('vue/dist/vue.runtime.common').default\n// import weex-vue-s-render\nconst weex = require('weex-vue-s-render')\n// init the weex instance.\nweex.init(Vue)\n// import your .vue App.\nconst App = require('App.vue')\n// must have a '#root' element in your html body.\nApp.$el = '#root'\n// instantiate\nnew App()\n```\n\n\u003e The way to require  ES modules and CommonJS modules may have a slice of difference between different versions of Vue and Vue-loader, and this is totally depending on Vue and the loader, so please check out related documents.\n\n\u003e If your import the UMD formated bundle to the html, then you dont't have to call `init` manually.\n\n```html\n\u003cscript\u003e{{Vue runtime}}\u003c/script\u003e\n\u003cscript\u003e{{weex-vue-s-render}}\u003c/script\u003e\n\u003cscript\u003e{{your web.bundle.js}}\u003c/script\u003e\n```\n\n### pack your .vue file to web.bundle.js\n\n\u003e You should pack your web.bundle.js and native.bundle.js separately. Use weex-loader for native packing and use vue-loader for web packing.\n\nUse [vue-loader](https://github.com/vuejs/vue-loader) to pack your code for web.bundle.js.\n\nIf you are using weex-vue-s-render@**1.x** , You should definitely use below plugins to get things work:\n\n* weex-vue-precompiler\n* autoprefixer\n* postcss-plugin-weex\n* postcss-plugin-px2rem\n\n\u003e We use weex-vue-precompiler instead of `$processStyle` in 1.x verison.\n\nNow, how to use this plugins to pack you web.bundle.js ? We use them in the vue-loader option.\n\nHere is a vue-loader option example:\n\n```javascript\n{ // webpack config.\n  vue: {\n    optimizeSSR: false,\n    postcss: [\n      // to convert weex exclusive styles.\n      require('postcss-plugin-weex')(),\n      require('autoprefixer')({\n        browsers: ['\u003e 0.1%', 'ios \u003e= 8', 'not ie \u003c 12']\n      }),\n      require('postcss-plugin-px2rem')({\n        // base on 750px standard.\n        rootValue: 75,\n        // to leave 1px alone.\n        minPixelValue: 1.01\n      })\n    ],\n    compilerModules: [\n      {\n        postTransformNode: el =\u003e {\n          // to convert vnode for weex components.\n          require('weex-vue-precompiler')()(el)\n        }\n      }\n    ]\n  }\n}\n```\n\n\u003e You should use a .js file as your webpack entry, not the Main.vue or App.vue file.\n\nThe content of your entry file `main.js` should be like this:\n\n```javascript\n// import Vue runtime if you like.\n// import weex-vue-s-render if you like.\n// init weex if you imported it.\n// at least it should have this:\nimport App from './your/App.vue'\nApp.el = '#root'\nnew Vue(App)\n```\n\n## How to Migrate from 0.12.x to 1.x\n\n\u003e Why should I update to 1.x ?\n\nThe answer is **enoumouse change in rendering performance** with a few minor updates in your code is definitely worth to try.\n\n### packing configuration\n\nYou should use the previous mentioned plugins in your vue-loader configuration.\n\n### check your code\n\n| category | rules | 0.12.x | 1.x |\n| --- | ---- | ------ | ----- |\n| **render function** | create weex component in render function | support | supported in **\u003e=1.0.11** |\n| **event binding** | bind native events for custom component's root element | `@click` | `@click.native` [doc](https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components) |\n| **styles** | style binding | none | better performance for binding object literal like `:style=\"{width:w,height:h}\"` instead of object variable like `:style=\"someObj\"` |\n|  | styles in `animation.transition` | none | should add css prefix manualy if needed. We suggest you use [transition](https://weex-project.io/references/common-style.html#transition-v0-16-0) to implement animation. |\n| **exclusive styles** | limit | none | wirte them in `\u003cstyle\u003e` tag for better performance. |\n|  | `wx` unit  | support | only in binding style (will fix soon) |\n| **ref** | what `this.$refs.xx` will get | always instance of VueComponent | HTMLElement for div, image and text; VueComponent for other components. |\n\n## Develop\n\n```shell\n# build for weex-vue-s-render package\nnpm run build\n# debug and serve examples\nnpm run dev\n# build and run test cases\nnpm run test\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzwwill%2Fweex-vue-s-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzwwill%2Fweex-vue-s-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzwwill%2Fweex-vue-s-render/lists"}