于 2017 年初，有在Github建立并一个项目:Vue Boilerplate Template，以成就一款开箱即用Vue+Webpack的脚手架模版;其目标与旨是:根据以往经验提供一些参考，对于如何构建中大型Vue项目。这蛮久以来，有更新，各项主要依赖库，基本都保持着同步升级;记载这篇文章，即是对关于它的设计做下更全面的阐述，以起到项目Wiki的作用。
这是一个用以开发 Web 单页应用的脚手架项目;谨以Vue为开发框架、Webpack为构建工具，element-ui为 UI 组件库;同时注入了vue-router、vuex、vue-i18n，用以支持单页应用，复杂的状态管理，以及多语言设定;另外依赖了lodash、dayjs、js-cookie等开发工具库，以提升页面开发效率。当然，在实际项目中，可根据实际需要移除或者修改。在此项目中提供了两个演示页，您可以在线查看。
对于如何使用这款脚手架模版，例如 先决条件，用法，以及 演示 等在README中已做说明，此处就不在赘述。此脚手架模版，是基于vue-cli所构建，那时vue-cli版本还在2.*;再有就是，主张项目是可以开箱即用，像vuex、eslint等都默认引入(其好处在于:可以清晰较为全套的项目设定;倘若无需多语言，可在此基础之上做减法，移除vue-i18n及相关代码即可;二来，也无需编写些额外代码，来支持用户选择性引入依赖，节省精力，作更多有价值的事儿;三来，这也算是一种道的提倡，像eslint、pre-commit等对于团队项目，都是极好的存在，默认引入，也算理所应当);所以其整个目录结构是这样:
先从说起;众所周知，鉴于JavaScript的发展历史，随着其版本的不断更新，更多新语法和代码特性被引入进来，使得编写 JavaScript 体验持续迈向更好。虽然部分浏览器没有能提供很好的支持，但此脚手架已然引入babel系依赖，您可以放心放心ES6甚至更超前版本，而不用担心造成兼容性问题。同样，对于CSS也是一样，这里已引入autoprefixer，并作了相应设定，您可以放心使用新特性，而不用关注浏览器供应商前缀。
这是至关重要的，对于代码的设计和编写;因为:代码首先是写给人，然后才是写给机器-- 出自《代码大全》。在设计代码时候，为其赋予可读性而花费的时间和努力，绝对物有所值;然而，要求每位自觉保持代码统一风格，这种困难不亚于靠一己之力去上青天。所以eslint系依赖，绝对是团队项目必装神器;并将其注入于Git的pre-commit钩子内，以强制约定统一代码风格;此时江山一统，方有可传之可能。另外，对于代码的提交，也是同理，图一时痛快而提交的无意义message，这并不是好习惯;因为当你回头再看，你会发觉所有错的事情，都发生在最对的时间里。幸好的是，对于这些工作，此脚手架已经帮您做好;当然您可以根据团队整体喜好而作调整。
对于代码的编写效率，也是尤为的重要;毕竟:“天下武功，唯快不破;即便说轻功不表武功，但速度决定了你我距离”;更严肃的这个观点是:只有快速完成需求，才有时间去学习更多、或在关键点上作优化。
如上这般，您就不用在使用时候反复import， 直接像这样this.$_.debounce使用即可，从而大幅度节省您的编写时间开支;对于其中$符号，是个人偏爱的标记，以方便知晓其是来自全局;当然，您可以修改为您所欢喜的记号。您可以看到在helper文件夹下，特意开辟出一个文件lodash.js，用以优化对lodash的使用，同时也是为了方便使用;这在《Webpack 打包优化之体积篇》的 尽量使用模块化引入中有过详细叙述。同理，您可以对所引入的各类库，进行再封装，以使得再项目中可便捷调用、同时可以统一修改、更替，而无需修改调用的地方。另外，值得一提的是对于 HTTP 请求相关的处理。
下面是一个上古时代关于处理 Http 请求的事例;它看起来很极端甚至有些不可思议，却是至今仍然屡见不鲜的玩法(即使用的是当行的MVVM框架;即便 Query.ajax 也是支持链式调用);然而，不乏有勤劳的开发者，不厌其烦的写着类似的代码，这本身倒也没什么;但当交给别人去、或者去读的时候，容易造成。
大道至简，优秀的开发流程，一定是便于编写和!本脚手架引用类库axios和q，并对其进行简单封装，以处理 Http 请求相关;使其能够支持链式调用，同时对返回数据统一处理，精简返回内容，使得在获取到最终结果处，可以尽可能简单，详见helper/ajax.js;另外，推荐开发者将接口，按照功能模块规划，分门别类以存放至统一文件夹下，如helper/apis;如此清晰明了，方便调用，且对于多人协作开发，又不相互响应，减少不必要的冲突。类似善用配置，以表驱动法的编程手法，应该活学活用，贯穿始终;具体更详细的陈述，可参见如何漂亮使用 Vue 之基础篇。倘若以此法来处理 Http 请求，那如上磨人的示例，即可修改为如下模样:
使用MVVM框架 +*-router来创建单页应用，已成为一种主流。 对于由配置，更为贴心的配置，在处理与栏(/侧边栏)相关部分。
在前后端分离的现代化Web应用中，栏 配置一般由前后端共同作用:后端负责给予相关配置数据，前端则掌管数据与页面的映射;为了节省工作量，深度拷贝前端由配置，递归遍历移除无需在 栏 展示项，再融合后端数据，即可组装出一套后台可配置的应用列表，而不用牵扯改动前端。当然，您可以根据业务需求，添加更多设定，使得程序拥有更佳的访问、体验。比如:为避免每次刷新界面，都发起请求栏数据，应将持久化存储(Eg:localStorage)等等。
这是此脚手架一大亮点，即保持着对主流依赖库的更新及优化，如:webpack、element-ui等。使用webpack来构建 Web 应用程序，如何使其呈现良好的构建速度、优化构建后包体积/文件数量、提升其运行效率等，是每位前端开发者都该去了解的。在这方面，也作了很多学习与尝试，并将些经验记载于:Webpack 打包优化之体积篇&Webpack 打包优化之速度篇。关于其配置方案，参见Vue Webpack Config;当然，十分欢迎提出您宝贵的，协助进一步完善之。另外，值得一提的是，关于构建包的体积与文件数的平衡:避免造成体量很大或很小的包;对此，Webpack方面也提供很多插件来辅助这件事，譬如:LimitChunkCountPlugin、MinChunkSizePlugin。鉴于 HTTP 工作机制，在不按需加载的基础上，使得所构建出的 js 文件，数量尽可能少，文件又不过大(100kb ~ 500kb)是一个不错的选择，当然这里指的的是服务端gip压缩的情况下;如果是由前端负责gzip压缩，这个 Size 上限应该更低些为宜。除了外，考虑通过HTTP/2来对项目项目进行优化，是另一个纬度的解决方案，在此就不多做探讨。
渐进式 Web 应用程序(PWA~Progressive Web App):它的存在，使得在网络上提供惊人用户体验的新方式，它为构建高质量的渐进式 Web 应用程序，提供了令人难以置信的优势，可以轻松取悦用户，增加参与度并增加次数。所以这已经成为了现代化 Web 应用程序必做工作。本脚手架对PWA的支持，选择参考了vuejs-templates/pwa，其中用到sw-precache-webpack-plugin插件协助生成service-worker.js。鉴于serviceWorker本身的些许，此模版默认不引入此功能，取消此行被注释的代码，即可打开该功能。关于这部分更多，可参见优化网页 Performance、Progressive、Accessibility、Best Practices相关提交 & 陈述。推荐您使用Lighthouse谷歌浏览扩展，来对自己的 Web 应用跑分，以查纠项目中潜存的可优化点。
需要补充说明的是:您可以在项目全局搜索~@CHANGE@~关键字，这是对于可变化设定的标记;您可以根据项目实际所需，对该部分进行修改。
您知道，npm(yarn亦同)允许在package.json文件里面，使用scripts字段定义脚本命令。它支持通配符、变量、钩子、外部传参、支持并发 所以，完全可以借助npm script，打造属于自己的高效工作流。在此脚手架中，默认只是些提供了简单命令，您可以在自己的脚本中，结合您欢喜的工具，如gulp、bash等，来塑造属于您的高效工作流。下面对默认命令略作说明:
使用此脚手架の线上项目「倾城之链NICE LINKS」:一个平台，旨在云集全球优秀网站，探索互联网中更广阔的世界;在这里，你可以轻松发现、学习、分享更多有用或有趣的事物。项目待优化の那些方向 完善单元测试相关;在代码层面，做好单元测试，有助于提升代码质量，从而使得项目质量、后续都可以更好。考虑将在之后的版本中，参考Vue Test Utils对这块儿进行完善。SEO 优化相关;这是多方都应该考虑的问题;但在项目设计层面，可以考虑服务端渲染来极大提升 SEO;但这对于已经处于开发阶段的项目，涉及需要更多的调整，相比于其他的方案。rixifu「倾城之链NICE LINKS」是基于prerender，在nginx层面，针对浏览器作预渲染以优化 SEO，现在看起来效果可以。 另外可以选择的方案是Prerender SPA Plugin，在Webpack构建项目时预渲染静态 html 内容，;在未来版本中，会考虑针对这块儿给出一个相对折中的方案。写在最后的结语
对于分享，您的海量包容和意见，是促进彼此都能更上一层楼的关键。输出文字，总是比写代码辛苦的多;在付出多时的敲敲打打之后，希望可以得到您宝贵的意见和，使得此脚手架可以更进一步，以惠及到更多的人。
本文由 325游戏（m.325games.com）整理发布