{"id":13601799,"url":"https://github.com/dwqs/webpack-mpvue-startup","last_synced_at":"2025-08-19T11:14:14.018Z","repository":{"id":87782426,"uuid":"125035725","full_name":"dwqs/webpack-mpvue-startup","owner":"dwqs","description":"A template with webpack 3 + mpvue 1 setup for projects startup","archived":false,"fork":false,"pushed_at":"2018-06-21T02:22:20.000Z","size":30,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-09-28T22:08:12.012Z","etag":null,"topics":["mini-program","mpvue","startup","vuejs2","webpack3"],"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/dwqs.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}},"created_at":"2018-03-13T10:43:49.000Z","updated_at":"2023-03-08T03:06:00.000Z","dependencies_parsed_at":"2024-01-19T10:11:48.705Z","dependency_job_id":"a6133448-0382-4671-b111-1969edfc4c53","html_url":"https://github.com/dwqs/webpack-mpvue-startup","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/dwqs%2Fwebpack-mpvue-startup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fwebpack-mpvue-startup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fwebpack-mpvue-startup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Fwebpack-mpvue-startup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/webpack-mpvue-startup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219860728,"owners_count":16556014,"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":["mini-program","mpvue","startup","vuejs2","webpack3"],"created_at":"2024-08-01T18:01:08.128Z","updated_at":"2024-10-11T14:01:49.983Z","avatar_url":"https://github.com/dwqs.png","language":"JavaScript","funding_links":[],"categories":["模板"],"sub_categories":["目录"],"readme":"# webpack-mpvue-startup\n\nA template with webpack 3 + mpvue 1 setup for projects startup.\n\n## Install/安装\n\nInstall it by [chare](https://github.com/dwqs/chare) or [vue-cli](https://github.com/vuejs/vue-cli)/可以通过 [chare](https://github.com/dwqs/chare) 或者 [vue-cli](https://github.com/vuejs/vue-cli) 来安装：\n\n```\nchare init dwqs/webpack-mpvue-startup your-project-name -o remote-url-of-your-project\n```\n\nAbove command will init your project with this template, and associate it with the remote url./上述命令会初始你的项目, 并将你的项目关联到远程的 `remote-url`.\n\n## 字段说明\n\n如果通过 [chare](https://github.com/dwqs/chare) 或者 `vue-cli` 来安装, 在安装的过程中，会需要输入一些基本信息，可以查看 [meta.js](https://github.com/dwqs/webpack-mpvue-startup/blob/master/meta.js) 来了解. 咨询的信息都有默认值, 一般选择默认就行, 模板生成之后也可以再更改.\n\n * **state**: 状态管理工具选择，目前支持 vuex / mobx\n\n ## 状态全局共享\n 由于目前 mpvue 并不支持全局注入 `vuex`，所以各页面之间并不能共享 store；如果你想使用 `vuex`，可以用一个曲线的方式进行 store 的全局共享：\n\n * 将 `store` 打包到 `vendor.js` 里面去。 Vue 代码经过打包之后，会提取 commons chunk 打包到 `vendor.js` 中，这个 js 文件是每个页面的入口文件所依赖的。在应用初始化的时候初始化全局的 `store`， 更改 `CommonsChunkPlugin`： \n\n```js\n\n// ...\nnew webpack.optimize.CommonsChunkPlugin({\n    name: 'vendor',\n    minChunks: function (module, count) {\n    return (\n        module.resource \u0026\u0026\n        /\\.js$/.test(module.resource) \u0026\u0026\n        module.resource.indexOf('node_modules') \u003e= 0\n    ) || /store/.test(module.resource)\n    }\n}),\n// ...\n```\n\n这种方式的缺点是不能使用 Vuex 提供的 `map*` 函数，如 `mapActions`、`mapGetters` 等，因为这些是 `this.$store` 的一个语法糖，而 mpvue 没法全局注入 Vuex，因而组件实例上并没有 `$store`，所以只能直接访问 `store` 实例进行相关操作。\n\n* 直接在原型上定义 `$store`。 Vuex 会在组件的 `beforeCreate` 钩子中将 `store` 实例挂载到组件实例上去，代码见 [vuexInit](https://github.com/vuejs/vuex/blob/dev/src/mixin.js#L22-L33)，因而可以在应用初始化时直接将 `store` 实例定义在原型上：\n\n```js\n// ...\nimport Vue from 'vue';\nimport store from 'path/to/store';\n\nVue.prototype.$store = store;\n//...\n```\n\n这样每个组件实例上都会 `$store`，可以使用 Vuex 的完整功能。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fwebpack-mpvue-startup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Fwebpack-mpvue-startup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Fwebpack-mpvue-startup/lists"}