{"id":18905065,"url":"https://github.com/kenberkeley/vue2-scaffold","last_synced_at":"2025-07-30T01:14:20.741Z","repository":{"id":143891871,"uuid":"86679887","full_name":"kenberkeley/vue2-scaffold","owner":"kenberkeley","description":"The best scaffold for Vue 2.x based on vue-cli#vuejs-templates/webpack","archived":false,"fork":false,"pushed_at":"2018-08-15T08:22:50.000Z","size":16,"stargazers_count":123,"open_issues_count":0,"forks_count":15,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-07-24T06:23:31.198Z","etag":null,"topics":["demo","scaffold","starter","vue","vue-cli","vue-router","vue-template","vue2","vue2-demo"],"latest_commit_sha":null,"homepage":"","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/kenberkeley.png","metadata":{"files":{"readme":"README.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-30T08:43:33.000Z","updated_at":"2022-12-20T19:53:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"3fa0fb3c-885d-4170-b995-11a3bf3b2bf3","html_url":"https://github.com/kenberkeley/vue2-scaffold","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kenberkeley/vue2-scaffold","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fvue2-scaffold","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fvue2-scaffold/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fvue2-scaffold/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fvue2-scaffold/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenberkeley","download_url":"https://codeload.github.com/kenberkeley/vue2-scaffold/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fvue2-scaffold/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267791130,"owners_count":24144896,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["demo","scaffold","starter","vue","vue-cli","vue-router","vue-template","vue2","vue2-demo"],"created_at":"2024-11-08T09:10:32.046Z","updated_at":"2025-07-30T01:14:20.705Z","avatar_url":"https://github.com/kenberkeley.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue2 脚手架\n\n在 [Vue Demo](https://github.com/kenberkeley/vue-demo) 的 [issues](https://github.com/kenberkeley/vue-demo/issues) 中，最常问的就是有没有升级 Vue 2.x 的计划   \n说实话，一直以来我都对 Vue 2.x “跪舔” React 嗤之以鼻，因此之前我并没有打算折腾\n\nVue 2.x 阉割掉了很多相当有用的特性，还动不动就扯“状态管理”  \n的确是让我大失所望，因此这几个月以来我都是坚守 Vue 1.x\n\n\u003e 有关这个问题，不妨看看 Vue.js 官方示例：  \n\u003e **Markdown Editor Example** [1.x 版本](http://v1.vuejs.org/examples/) | [2.x 版本](https://cn.vuejs.org/v2/examples/)  \n\u003e 相信您会更加直观地体会到 Vue 1.x 的魅力所在\n\n各大论坛上看到很多刚入门的新童鞋在人云亦云的情况下捣弄 [Flux](https://github.com/facebook/flux) / [Redux](https://github.com/reactjs/redux) / [Vuex](https://github.com/vuejs/vuex)  \n就像是拿着屠龙刀切水果，这在一定程度上，是使用者比较累，且水果也未必切得好看\n\n当然，比起 React 社区，Vue 的全家桶已经是相当轻量  \n尤其是看到了 [MobX](https://github.com/mobxjs/mobx) 的盛行，更让我意识到**组件化状态自包含**才是正道  \n谈及**全局**状态管理，在实际项目中我更倾向于使用 **根组件** 或者 **URL**\n\n\u003e URL 本身就是一个全局的状态容器，详见 Vue Demo 文档：[URL 是单页应用的精华](https://kenberkeley.github.io/vue-demo/dist/docs/zh-cn/development/URL-is-soul-of-SPA.html)\n\n让我着手折腾 Vue2 脚手架的，是最近的一次独立组件重构经历\n\n***\n\n在重构 [DataTable](https://github.com/kenberkeley/vue-datatable-component) 组件的过程中，我守旧的观念开始发生转变  \n尤其是通过 `.sync` 传递的 `props` 层数越深，就觉得越发**不可控**  \n当然，如果是按照之前的思路，使用**根组件**来存储共用的状态  \n子孙组件直接使用 ~~`$root`~~ `$parent` 获取与**修改**数据，也是完全可行的，但这并非最佳实践  \n而在独立封装的组件中引入 Vuex 又并不合适（详见 [滴滴 webapp 5.0 Vue 2.0 重构经验分享](https://github.com/DDFE/DDFE-blog/issues/13) 第 2 点）  \n因此只能另辟蹊径...\n\n经过一番查阅，我了解到一种另类的状态管理思路，并整理到了[这里](https://github.com/kenberkeley/vue-state-management-alternative)  \n原理很简单，就是通过 **“闭包 + 共享 `data`”** 的方式实现阉割版的 Vuex  \n这让我初步尝到了统一状态管理的甜头，也理解究竟什么时候才该用统一的状态管理\n\n虽然我写出了 [Redux 简明教程](https://github.com/kenberkeley/redux-simple-tutorial)，但我从未在实际项目中用过  \n皆因我不见得究竟是多大的项目才需要用到这种繁冗的状态管理  \n（除非您需要如 *[You Might Not Need Redux](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367)* 文中提到的使用 Redux 的优势）  \n我更倾向于后端流行的微服务模式，一个大的项目可以拆分成若干个子项目  \n而对于前端而言也该是如此：各组件内部状态自维护，使用与卸载无副作用，不掺杂全局，分而治之  \n（上面的 滴滴 webapp 5.0 Vue 2.0 重构经验分享 第 1 点也有相关的拆分讨论）\n\n既然已经折腾出另类的组件内部的状态管理方式，而且 Vue 2.x 又已大势所趋，那就折腾吧！\n\n***\n\n扯了那么多，该说说这个 Vue2 脚手架和之前 Vue Demo 的差别了  \n总体而言，差异很小，基本上就是把 Vue 1.x 的语法换成 Vue 2.x  \n因此升级的代价相当小，文档完全照搬 Vue Demo 的[文档](https://kenberkeley.github.io/vue-demo/dist/docs/)  \n**对于新用户，强烈建议先通览文档后，再使用该脚手架进行开发**\n\n\u003e 开发前请通读 [Vue 2.x 文档](https://cn.vuejs.org/v2/guide) 与 [vue-router 2.x 文档](https://router.vuejs.org/zh-cn/index.html)，尤其是 [从 Vue 1.x 迁移](https://cn.vuejs.org/v2/guide/migration.html) 一章\n\n***\n\n最后说说为什么不使用官方的 [`vue-cli`](https://github.com/vuejs/vue-cli)，而自己折腾一套脚手架  \n首先不得不承认，这是参考自官方的 [vuejs-templates/webpack](https://github.com/vuejs-templates/webpack) 模板  \n改造初衷是这套官方模板与 Vue.js 的**优雅哲学**格格不入，一看它的 [`build/`](https://github.com/vuejs-templates/webpack/tree/master/template/build) 目录基本上就不想用了    \n官方意欲极力避免用户折腾配置（开箱即用），特意另开了 [`config/`](https://github.com/vuejs-templates/webpack/tree/master/template/config)，但这就使得配置项变得更加不直观\n\n但无论如何，**用户得学会自己走路，自己踩坑，自己折腾**，你只需要提供一个**直观的高可拓展性**的脚手架即可  \n我所能做的，就是极力提供一目了然的 Webpack 配置目录与常规的 `package.json`  \n之后就让用户**按需折腾**，而不是一上来就把一条龙的测试框架都堆上来\n\n当然，`vue-cli` 并不是一无是处，使用它的 [`vue build`](https://github.com/vuejs/vue-cli/blob/master/docs/build.md) 来快速开发独立组件还是相当爽快的  \n（上面提到的 [Vue 另类状态管理](https://github.com/kenberkeley/vue-state-management-alternative) 就用到了 `vue build`）\n\n***\n\n最后的最后，祝您玩得愉快吧！\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenberkeley%2Fvue2-scaffold","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenberkeley%2Fvue2-scaffold","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenberkeley%2Fvue2-scaffold/lists"}