于 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、sass 等都默认引入（其好处在于：可以清晰较为全套的项目设定；倘若无需多语言，可在此基础之上做减法，移除 vue-i18n 及相关代码即可；二来，也无需编写些额外代码，来支持用户选择性注入依赖，以节省精力，开发更多有价值的功能；三来，这也算是一种道的提倡，像 eslint、 pre-commit 等对于团队项目，都是极为必要的存在，默认引入，也算理所应当）；所以其整个目录结构是这样：
├── LICENSE --------------- 项目许可证（MIT License）文件 ├── build ----------------- 存放项目构建相关文件 ├── config ---------------- 存放项目构建相关配置文件 ├── dist ------------------ 存放项目构建后的输出文件 ├── index.ejs ------------- 项目起始文件 (/index.html) ├── package-lock.json ----- 记录用 npm 修改依赖操作的锁文件 ├── package.json ---------- npm 的 package.json 处理细节 ├── src ------------------- 项目程序主代码文件夹 │ ├── App.vue ----------- 应用程序的主组件 │ ├── assets ------------ 存放资源：样式、图片、字体 │ ├── components -------- 项目自定义的公共组件 │ ├── constants --------- 项目自定义的公共常量 │ ├── filters.js -------- 项目自定义的 vue 过滤指令 │ ├── global.js --------- 协助分担 main.js 工作 │ ├── helper ------------ 项目自定义辅助各类工具 │ ├── locales ----------- 存放(公用)多语言配置 │ ├── main.js ----------- 项目代码的人口文件 │ ├── mixins ------------ 存放 mixin 代码相关 │ ├── router ------------ 存放 & 处理路由相关 │ ├── store ------------- 存放 & 处理 Vuex 相关 │ └── views ------------- 存放项目页面代码 ├── static ---------------- 静态的 assets(不被 webpack 处理) ├── test ------------------ 项目各类测试相关 └── yarn.lock ------------- 记录用 yarn 修改依赖操作的锁文件