开箱即用的 Vue Webpack 脚手架模版

MargaretYves 发布于1年前
0 条问题

于 2017 年初,有在 Github 建立并维护一个项目: Vue Boilerplate Template ,以成就一款开箱即用 Vue + Webpack 的脚手架模版;其目标与宗旨是:根据以往经验提供一些参考,对于如何构建中大型 Vue 项目。这蛮久以来,有坚持维护更新,各项主要依赖库,基本都保持着同步升级;记载这篇文章,即是对关于它的设计做下更全面的阐述,以起到项目 Wiki 的作用。

开箱即用的 Vue Webpack 脚手架模版

关于此 Vue、Webpack 脚手架模版

这是一个用以开发 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 等对于团队项目,都是极好的存在,默认引入,也算理所应当);所以其整个目录结构是这样:

├── 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 --------- 协助分担 mian.js 工作
│   ├── helper ------------ 项目自定义辅助各类工具
│   ├── locales ----------- 存放(公用)多语言配置
│   ├── main.js ----------- 项目代码的人口文件
│   ├── mixins ------------ 存放 mixin 代码相关
│   ├── router ------------ 存放 & 处理路由相关
│   ├── store ------------- 存放 & 处理 Vuex 相关
│   └── views ------------- 存放项目页面代码
├── static ---------------- 静态的 assets(不被 webpack 处理)
├── test ------------------ 项目各类测试相关
└── yarn.lock ------------- 记录用 yarn 修改依赖的锁文件

项目背后の环境设定

先从环境说起;众所周知,鉴于 JavaScript 的发展历史,随着其版本的不断更新,更多新语法和代码特性被引入进来,使得编写 JavaScript 体验持续迈向更好。虽然部分浏览器没有能提供很好的支持,但此脚手架已然引入 babel 系依赖,您可以放心放心 ES6 甚至更超前版本,而不用担心造成兼容性问题。同样,对于 CSS 也是一样,这里已引入 autoprefixer ,并作了相应设定,您可以放心使用新特性,而不用关注浏览器供应商前缀。

代码及提交规则约束

这是至关重要的,对于代码的设计和编写;因为: 代码首先是写给人,然后才是写给机器 —— 出自《代码大全》。在设计代码时候,为其赋予 可读性 而花费的时间和努力,绝对物有所值;然而,要求每位成员自觉保持代码统一风格,这种困难不亚于靠一己之力去上青天。所以 eslint 系依赖,绝对是团队项目必装神器;并将其注入于 Git 的 pre-commit 钩子内,以强制约定统一代码风格;此时江山一统,方有可传万世之可能。另外,对于代码的提交,也是同理,图一时痛快而提交的无意义 message ,这并不是好习惯;因为 当你回头再看,你会发觉所有错的事情,都发生在最对的时间里 。幸好的是,对于这些工作,此脚手架已经帮您做好;当然您可以根据团队整体喜好而作调整。

所提供の全局性方法

对于代码的编写效率,也是尤为的重要;毕竟:“ 天下武功,唯快不破 ;即便说 轻功不表武功,但速度决定了你我距离 ”;更严肃的作证这个观点是:只有快速完成需求,才有时间去学习更多、或在关键点上作优化。故此,在此脚手架中,已将常用的工具、插件、方法,通过添加至 Vue 全局实例,以方便调用;譬如:通过添加至 Vue.prototype ,或者全局 mixin ( minxns/globalMixin.js ) 以及过滤( filters.js )等;

import _ from '@helper/lodash.js'
import { $apis, $utils } from '@helper'

Vue.prototype.$_ = _
Vue.prototype.$apis = $apis
Vue.prototype.$utils = $utils

如上这般,您就不用在使用时候反复 import , 直接像这样 this.$_.debounce 使用即可,从而大幅度节省您的编写时间开支;对于其中 $ 符号,是个人偏爱的标记,以方便知晓其是来自全局;当然,您可以修改为您所欢喜的记号。您可以看到在 helper 文件夹下,特意开辟出一个文件 lodash.js ,用以优化对 lodash 的使用,同时也是为了方便使用;这在 《Webpack 打包优化之体积篇》的 尽量使用模块化引入 中有过详细叙述。同理,您可以对所引入的各类库,进行再封装,以使得再项目中可便捷调用、同时可以统一修改、更替,而无需修改调用的地方。另外,值得一提的是对于 HTTP 请求相关的处理。

更优雅的处理 Http 请求

下面是一个上古时代关于处理 Http 请求的事例;它看起来很极端甚至有些不可思议,却是至今仍然屡见不鲜的玩法(即使用的是当下流行的 MVVM 框架;即便 Query.ajax 也是支持链式调用);然而,不乏有勤劳的开发者,不厌其烦的写着类似的代码,这本身倒也没什么;但当交给别人去维护、或者去读的时候,容易造成伤害。