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

关于此 Vue、Webpack 脚手架模版

这是一个用以开发 Web 单页应用的脚手架项目;谨以 Vue 为开发框架、Webpack 为构建工具,element-ui 为 UI 组件库;同时注入了 vue-routervuexvue-i18n,用以支持单页应用,复杂的状态管理,以及多语言设定;另外依赖了 lodashdayjsjs-cookie 等开发工具库,以提升页面开发效率。当然,在实际项目中,可根据实际需要自由移除或者修改。在此项目中提供了两个演示页,您可以在线查看

对于如何使用这款脚手架模版,例如先决条件用法等在 README 中已做说明,此处就不在赘述。此脚手架模版,是基于 vue-cli 所构建,那时 vue-cli 版本还在 2.*;再有就是,主张项目是可以开箱即用,像 vuexeslintsass 等都默认引入(其好处在于:可以清晰较为全套的项目设定;倘若无需多语言,可在此基础之上做减法,移除 vue-i18n 及相关代码即可;二来,也无需编写些额外代码,来支持用户选择性注入依赖,以节省精力,开发更多有价值的功能;三来,这也算是一种的提倡,像 eslintpre-commit 等对于团队项目,都是极为必要的存在,默认引入,也算理所应当);所以其整个目录结构是这样:

  1. ├── LICENSE --------------- 项目许可证(MIT License)文件
  2. ├── build ----------------- 存放项目构建相关文件
  3. ├── config ---------------- 存放项目构建相关配置文件
  4. ├── dist ------------------ 存放项目构建后的输出文件
  5. ├── index.ejs ------------- 项目起始文件 (/index.html)
  6. ├── package-lock.json ----- 记录用 npm 修改依赖操作的锁文件
  7. ├── package.json ---------- npm package.json 处理细节
  8. ├── src ------------------- 项目程序主代码文件夹
  9. ├── App.vue ----------- 应用程序的主组件
  10. ├── assets ------------ 存放资源:样式、图片、字体
  11. ├── components -------- 项目自定义的公共组件
  12. ├── constants --------- 项目自定义的公共常量
  13. ├── filters.js -------- 项目自定义的 vue 过滤指令
  14. ├── global.js --------- 协助分担 main.js 工作
  15. ├── helper ------------ 项目自定义辅助各类工具
  16. ├── locales ----------- 存放(公用)多语言配置
  17. ├── main.js ----------- 项目代码的人口文件
  18. ├── mixins ------------ 存放 mixin 代码相关
  19. ├── router ------------ 存放 & 处理路由相关
  20. ├── store ------------- 存放 & 处理 Vuex 相关
  21. └── views ------------- 存放项目页面代码
  22. ├── static ---------------- 静态的 assets(不被 webpack 处理)
  23. ├── test ------------------ 项目各类测试相关
  24. └── yarn.lock ------------- 记录用 yarn 修改依赖操作的锁文件

项目背后的环境设定

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

代码及提交规则约束

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

所提供的全局性方法

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

  1. import _ from '@helper/lodash.js'
  2. import { $apis, $utils } from '@helper'
  3. Vue.prototype.$_ = _
  4. Vue.prototype.$apis = $apis
  5. Vue.prototype.$utils = $utils

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

更优雅的处理 Http 请求

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

  1. $.ajax({
  2. type: "GET",
  3. url: "xxx/getYyyContent",
  4. data: { username: $("#username").val() },
  5. dataType: "json",
  6. success: function (data) {
  7. const textContent = data.data.textContent
  8. $('#text-content').html(textContent)
  9. },
  10. error: function (error) {
  11. // Do something to handle Error
  12. },
  13. complete: function (error) {
  14. // 做额外的处理无论请求成功或失败
  15. }
  16. });

大道至简,优秀的开发流程,一定是便于编写和维护!本脚手架引用类库 axiosq,并对其进行简单封装,以处理 Http 请求相关;使其能够支持链式调用,同时对返回数据统一处理,精简返回内容,使得在获取到最终结果处,可以尽可能简单,详见 helper/ajax.js;另外,推荐开发者将接口,按照功能模块规划,分门别类以存放至统一文件夹下,如 helper/apis;如此清晰明了,方便调用,且对于多人协作开发,又不相互响应,减少不必要的冲突。类似善用配置,以表驱动法的编程手法,应该活学活用,贯穿始终;具体更详细的陈述,可参见 如何漂亮使用 Vue 之基础篇。倘若以此法来处理 Http 请求,那如上磨人的示例,即可修改为如下模样:

  1. const params = { username: this.form.username }
  2. this.$apis.xxx.getYyyContent(params).then(result => {
  3. this.textContent = result.textContent
  4. }).catch(error => {
  5. // Do something to handle Error
  6. }).fin(() => {
  7. // 做额外的处理无论请求成功或失败
  8. })

贴心的路由(Router)配置

使用 MVVM 框架 + *-router 来创建单页应用,已成为一种主流。在此脚手架中,已将 vue-router 添加进来,并进行了处理;并附有示例:router/routes/demo.js;您可以自由的添加路由及页面映射,来丰盈您的应用程序;同时,您还能为其配置各种页面信息(如:标题、是否须权限验证等)。 对于路由配置,更为贴心的配置,在处理与导航栏(/侧边栏)相关部分。

在前后端分离的现代化 Web 应用中,导航栏配置一般由前后端共同作用:后端负责给予相关配置数据,前端则掌管数据与页面的映射;为了节省工作量,深度拷贝前端路由配置,递归遍历移除无需在导航栏展示项,再融合后端数据,即可组装出一套后台可配置的应用导航列表,而不用牵扯改动前端。当然,您可以根据业务需求,添加更多设定,使得程序拥有更佳的访问、维护体验。比如:为避免每次刷新界面,都发起请求导航栏数据,应将持久化存储(Eg:localStorage)等等。

完善的 Webpack 打包优化

这是此脚手架一大亮点,即保持着对主流依赖库的更新及优化,如:webpackelement-ui 等。使用 webpack 来构建 Web 应用程序,如何使其呈现良好的构建速度、优化构建后包体积/文件数量、提升其运行效率等,是每位前端开发者都该去了解的。在这方面,也作了很多学习与尝试,并将些经验记载于:Webpack 打包优化之体积篇 & Webpack 打包优化之速度篇。关于其配置方案,参见 Vue Webpack Config;当然,十分欢迎提出您宝贵的建议,协助进一步完善之。另外,值得一提的是,关于构建包的体积与文件数的平衡:避免造成体量很大或很小的包;对此,Webpack 方面也提供很多插件来辅助这件事,譬如:LimitChunkCountPluginMinChunkSizePlugin。鉴于 HTTP 工作机制,在不破坏按需加载的基础上,使得所构建出的 js 文件,数量尽可能少,文件又不过大(100kb ~ 500kb)是一个不错的选择,当然这里指的的是服务端开启 gip 压缩的情况下;如果是由前端负责开启 gzip 压缩,这个 Size 上限应该更低些为宜。除了外,考虑通过 HTTP/2 来对项目项目进行优化,是另一个纬度的解决方案,在此就不多做探讨。

支持渐进式 Web 应用程序

渐进式 Web 应用程序(PWAProgressive Web App):它的存在,使得在网络上提供惊人用户体验的新方式,它为构建高质量的渐进式 Web 应用程序,提供了令人难以置信的优势,可以轻松取悦用户,增加参与度并增加转化次数。所以这已经成为了现代化 Web 应用程序必做工作。本脚手架对 PWA 的支持,选择参考了 vuejs-templates/pwa,其中用到 sw-precache-webpack-plugin 插件协助生成 service-worker.js。鉴于 serviceWorker 本身的些许限制,此模版默认不引入此功能,取消此行被注释的代码,即可打开该功能。关于这部分更多,可参见优化网页 Performance、Progressive、Accessibility、Best Practices 相关提交 & 陈述。推荐您使用 Lighthouse 谷歌浏览扩展,来对自己的 Web 应用跑分,以查纠项目中潜存的可优化点。

需要补充说明的是:您可以在项目全局搜索 ~@CHANGE@~ 关键字,这是对于可变化设定的标记;您可以根据项目实际所需,对该部分进行修改。

脚手架提供的默认命令

您知道,npmyarn 亦同)允许在 package.json 文件里面,使用 scripts 字段定义脚本命令。它支持通配符、变量、钩子、外部传参、支持并发 & 异步执行等等;所以,完全可以借助 npm script,打造属于自己的高效工作流。在此脚手架中,默认只是些提供了简单命令,您可以在自己的脚本中,结合您欢喜的工具,如 gulpbash 等,来塑造属于您的高效工作流。下面对默认命令略作说明:

npm (yarn) 命令 功能描述
yarn start 运行项目以开发环境,是 yarn run dev 的快捷版方式
yarn run build:dll 构建出 vendor.dll.js,依据 webpack.dll.conf.js
yarn run build 构建项目,以生产环境
yarn run jarvis 运行 webpack-jarvis(非常智能的基于浏览器的Webpack仪表板)在 http://localhost:1337/
yarn run analyz 对所构建的包进行可视化呈现,在 http://localhost:8888/
yarn run preview 对项目进行在本地预览,以生产环境,在 http://localhost:3000/
yarn run pretest 对生产环境所构建的包进行简单的“预测”:在 http://localhost:3000/

使用此脚手架的线上项目

  • 「倾城之链|NICE LINKS」:一个开放平台,旨在云集全球优秀网站,探索互联网中更广阔的世界;在这里,你可以轻松发现、学习、分享更多有用或有趣的事物。

项目待优化的那些方向

  • 完善单元测试相关;在代码层面,做好单元测试,有助于提升代码质量,从而使得项目质量、后续维护都可以更好。考虑将在之后的版本中,参考 Vue Test Utils 对这块儿进行完善。
  • SEO 优化相关;这是多方都应该考虑的问题;但在项目设计层面,可以考虑服务端渲染来极大提升 SEO;但这对于已经处于开发阶段的项目,涉及需要更多的调整,相比于其他的方案。「倾城之链|NICE LINKS」 是基于 prerender,在 nginx 层面,针对浏览器作预渲染以优化 SEO,现在看起来效果可以。 另外可以选择的方案是 Prerender SPA Plugin,在 Webpack 构建项目时预渲染静态 html 内容,;在未来版本中,会考虑针对这块儿给出一个相对折中的方案。

写在最后的结语

对于分享,您的海量包容和意见建议,是促进彼此都能更上一层楼的关键。输出文字,总是比写代码辛苦的多;在付出多时的敲敲打打之后,希望可以得到您宝贵的意见和建议,使得此脚手架可以更进一步,以惠及到更多的人。最后,推荐您体验个人最新作品 ~ 「倾城之链|NICE LINKS」倾心缔造,痴心为你,希望您会喜欢。

@2018-05-13 于深圳.南山 Last Modify: 2018-05-20


你可能感兴趣(/有用)的文章:

高效开发 Web 单页应用解决方案的更多相关文章

  1. html5手机Web单页应用实践--起点移动阅读

    一开始以hybrid形式做了一个android的小说阅读客户端,叫4G阅读.而后由于业务需求,要迅速实现纯手机html5 版的,所以就直接在原先客户端内内嵌的网页进行改版,快速实现以后在优化的过程中发 ...

  2. web单页应用是什么?它的好处与坏处有哪些(如何解决这些缺点)

    web单页应用是什么? Web单页应用就是指只有一个Web页面作为入口的应用,在浏览器中运行期间不会重新加载页面.也就是说浏览器一开始会加载它必需的thml.css和Js,之后所有的交互操作都在一个页 ...

  3. 【转】移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  4. 移动Web单页应用开发实践——页面结构化

    1. 前言 在开发面向现代智能手机的移动Web应用的时候,无法避免一个事实,就是需要开发单页应用(Single Page WebApp).对于不同的系统需求,单页应用的粒度会不同,可能是整个系统都使用 ...

  5. 移动Web单页应用开发实践——实现Pull to Request(上/下拉请求操作)

    在单页应用开发中,无论是页面结构化,还是Pull to Request,都离不开一个技术——页面局部滚动.当下的移动web技术,主要使用下面两种方式实现局部区域的滚动: 基于IScroll组件,也有很 ...

  6. Vue2 框架开发的单页程序页面首次加载慢的原因与优化方案

    在用Vue2 框架进行单页面开发时,开发完成后项目打包到线上环境,发现vendor脚本有963K,app.css文件也有四百多k,用户第一次打开网页加载这两个文件要十多秒,会使页面白屏十多秒,之后再次 ...

  7. web单页应用(1)--第一个SPA

    <!doctype html> <html> <head> <title>第一个SPA</title> <style type=&qu ...

  8. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  9. 使用Vue构建单页应用一

    一. 环境准备 1 安装Node.js  最好安装node.js-6.X.X 以上版本,https://nodejs.org/en/    我使用的是  v6.3.1 Current 版本.Node. ...

随机推荐

  1. The 13th tip of DB Query Analyzer, powerful processing EXCEL file

    The 13thtip of DB Query Analyzer, powerful processing EXCEL file MA Genfeng (Guangdong UnitollServic ...

  2. rails应用ajax之一:使用纯js方法

    考虑如下需求: 1. 用户输入一个用户名,当焦点跳出文本框时,检查该用户名是否有效 2. 动态更新检查的结果 我们使用ajax的方式来实现这个简单的功能,首先建立view:check.html.erb ...

  3. ruby正则表带式对象使用备忘

    ruby对于正则表达式的使用是非常灵活的,提供了专门的正则表达式对象Regexp.其包括match实例方法,字符串也含有该方法.so可以这么做: /a/ =~ "a" " ...

  4. 使用XStream是实现XML与Java对象的转换(1)--简介及入门示例

    一.简单介绍 XStream是thoughtworks开发的开源框架,用于实现XML数据于Java对象.Json数据的转换.它不需要schema或其他的mapping文件就可以进行java对象和xml ...

  5. Spring Aop 梳理

    Aspect Oriented Programming  面向切面编程.解耦是程序员编码开发过程中一直追求的.AOP也是为了解耦所诞生. 具体思想是:定义一个切面,在切面的纵向定义处理方法,处理完成之 ...

  6. MySQL运维工具

    Mysql运维过程中设计的各类工具以及各个场景的的命令行的分类.大体总结如下的xmind图片(.xmind附件 加 Q1123654342). 大体上分为: 实例管理工具.高可用工具.慢日志查询工具. ...

  7. MySQL 8 新特性之Invisible Indexes

    背景 索引是把双刃剑,在提升查询速度的同时会减慢DML的操作.毕竟,索引的维护需要一定的成本.所以,对于索引,要加上该加的,删除无用的.前者是加法,后者是减法.但在实际工作中,大家似乎更热衷于前者,而 ...

  8. Android hybrid App项目构建和部分基本开发问题

    1.首先是选型:Cordova+Ionic Framework,调试测试环境是Ripple Emulator.开发环境其实可以随便选,我个人选择了Eclipse,当然Android SDK+ADT也是 ...

  9. PyCOn2013大会笔记

    DAE的设计 By洪强宁 hongon@douban.com 3个aaS服务都不能模块化灵活组合服务 DAE的起因:代码横向拆分模块化,重用基础设施 最佳实践对新App复用    Scale SA D ...

  10. 2013-9 OWASP论坛

    Broken We Application Project   ------这个PPT需要下载 OWASP BWA----- A Virtual machine---收集 Broken Web App ...