渐进式JavaScript框架Vue.js的全家桶应用

文/吕英华

实际项目中的最大挑战是前端业务日益复杂化和多元化促使项目周期快速演进迭代。随着时间的推移，业务需求的推进，项目的体系和形态发生了复杂的变化，会产生如下的问题：

（1）最初的架构不再支持后续的变化，若在原有的架构进行迭代更新，会使代码更冗余，若重构整个项目，无法避免项目风险与资损。

（2）因项目不断的迭代更新，开发周期加长，经多人开发和维护，出现代码质量低、可维护性差、可用性差等问题。

（3）在多人协作开发时，没有统一的规范，无法进行高效的、高质量的协作开发。

以上问题可前端工程化的思想去解决。前端工程化本质上也是软件工程的一种，软件工程化主要关注可用性、可维护性、性能稳定性等方面。前端工程化包括模块化、组件化、规范化、自动化四个特点。模块化不等于组件化，模块化是对资源的拆分，组件化是在设计层面上或用户界面上的拆分。模块化是将一个大文件拆分成相互依赖的小文件，再进行统一的组装和加载；组件化是从用户界面上进行拆分，拆分后的每个组件包含结构（HTML）、样式（CSS）和逻辑（JavaScript）；规范化是项目可持续开发的重要条件，其包括目录结构的制定、文档规范、编码规范、各种工具使用管理等内容；自动化是提高工作效率的重要条件，通过自动化工具完成持续集成、构建、部署、测试等工作。

本文工作的意义在于阐述Vue 的全家桶能自动化构建、部署具有可维护性、性能稳定的项目，实现项目的模块化、组件化和规范化，且Vue 的全家桶满足前端工程化的思想。

1 Vue全家桶的工具分析

在实际项目中，为了提高项目的即时效益，常常会降低项目的工程化去缩短开发周期，这会给后期的开发和维护增加难度。为了快速初识化一个具有前端工程化思想的项目，Vue全家桶提供了快速开发项目的工具、状态管理工具、路由工具、请求工具及UI 框架等。

1.1 快速开发项目工具

Vue CLI 是一个具有完全图形化界面和基于Vue.js 进行快速开发的完整系统。Vue CLI提供搭建、管理、开发交互式项目的手脚架；Vue CLI 服务是基于Webpack 和Webpack-Dev-Server 之上构建的，不仅能加载其官方提供的插件，还能加载其他CLI 插件的核心服务；最重要的是，可以灵活调整每个工具的配置，无需eject,节省配置时间。

1.2 状态管理工具

Vuex 是专门为Vue.js 设计、以利用Vue.js 的细粒度数据响应机制来进行高效的状态更新的状态管理库，其基本思想借鉴了Flux、Redux 和The Elm Architecture。Vuex 应用的核心是Store（仓库），类似于一个容器，存储该应用的大部分的状态（State）。Vuex 的状态（State）类似于全局变量，该变量提供给多个模块使用，但又区别于单纯的全局变量，因状态储存是响应式的，如修改了Vuex 的某个状态，依赖于该状态的组件都会高效更新，且不能直接修改Store 里的状态，需要显式提交给Mutation。Vuex 的Store 具有五个核心概念，分别为定义状态（State）、获取状态（Getter）、修改状态（Mutation）、触发Mutation 的函数（Action）、将Store 分割成模块（Module）。

1.3 路由工具

Vue Router 是Vue.js 官方的路由管理器,是用来构建和管理spa(单页面)应用的。传统的项目大多为多页面结构，即一个项目由多个HTML 文件构成，在进行多页面跳转时，常受网络、性能等影响，会出现不同时长的空白页面，用户体验不好。单页面（spa）的核心思想为只有一个完整的页面，更新加载视图只需加载更新某个组件，不需要重新请求加载整个页面。Vue Router 通过改变路径实现组件之间的切换和跳转，并增加查询与设置路由参数、视图过度的效果、自定义滚动条行为等内容。

1.4 请求工具

一个完整的Vue 项目需要向服务器请求数据，Vue.js 是基于JavaScript 开发的，常用的Ajax 也是可以使用的，在Vue 2.0 版本之前，官方推出Vue Resource，但之后不再维护更新，现官方推荐使用Axios。Axios 是第三方插件，不仅能在Vue 里使用，还能在Nodejs、React中使用。需要使用Axios 请求的Vue 组件，使用import 导入即可。

1.5 UI框架

Vue 的UI 框架分为PC 端和移动端两种，可以根据项目需求选择合适的UI 框架。PC 端有饿了么出品的ELement、基于Vue 开源的组件库iview、三端样式一致的响应式UI库muse-ui 等，移动端有Vux、饿了么出品的Mint-UI、有赞出品的Vant 等。每个支持Vue的UI 框架都存在不极致的地方，但丰富了Vue 的UI 环境，开发者可以根据需求选择其一或多个UI 库协同合作。

2 Vue全家桶应用分析

在使用Vue 的全家桶搭建一个项目前需提前安装Node、Npm 和Webpack。

2.1 Vue CLI的应用

Vue CLI 只需5 分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。使用Vue CLI 的前提是已安装Webpack 和8.9 版本以上的Node。Vue.js 官方提供两个版本的Vue CLI，分别是2.X 版本和3.X 版本，本文主要描述3.X 版本的Vue CLI 应用。

（1）全局安装手脚架，初始化项目所需的环境：npm install -g @vue/cli。安装完之后通过vue --version 检验是否安装成功。手脚架一般具有自动构建代码、本地开发与调试，热替换与热加载、CSS 模块化等功能。

（2）构建一个新项目，可以选择默认的preset 和手动选择的preset：vue create myproject。手动选择配置面向生产的项目，提供更多的选项，目前手动选择设置提供了添加依赖、单独配置文件、保存当前配置等配置内容。Vue 还提供了vue ui 命令以图形化界面创建和管理项目。

（3）基于项目需求安装依赖：npm add **。以此命令安装的插件会在package.json 文件中列出来，以查看安装情况和项目移动后一键安装所有插件使用。

（4）启动开发服务器并附带开箱即用的模块热重载：npm run serve。启动服务器后默认打开浏览器窗口，端口号为8080。Vue 提供两种方式修改服务器的配置，一是通过命令行vue-cli-service serve [options][entry]修改，二是通过修改vue.config.js 文件的配置。

（5）打包编译程序：npm run build。此命令会在dist/目录下产生一个可用于生产环境的包，带有JS/CSS/HTML 的压缩和为缓存而做的自动的vendor chunk splitting，包的chunk manifest 内联在HTML 文件里。

2.2 Vuex的应用

一个应用的前端页面可以千变万化，但数据一直是支撑应用的最重要部分。在Vue应用中，Vuex 就充当了数据提供者的角色，Vue 则只需要关注页面的展示与交互。Vuex的Store 具有五个核心概念，分别为State、Getter、Mutation、Action、Module，分别分析每个功能。

（1）State:存储状态（变量）。只能访问状态，不能修改状态。当Store 实例注入到根组件下，如需访问某个状态时子组件通过this.$store 访问，如需访问多个状态，可以通过mapState 辅助函数生成计算属性。

（2）Getters：store 的计算属性，用来修饰状态，并不修改状态。

Getters 的第一个参数为state,第二个参数可以为其他Getter。子组件可以通过store.getters 对象访问。

（3）Mutation：修改Store 状态的唯一途径。Mutation 类似JavaScript 中事件，具有事件类型和回调函数，子组件可以通过store.commit(‘type’,’parameter’)调用。

（4）Action：类 似mutation,Mutation可以直接修改Store 状态，Action 需要调用Mutation 的方法去修改Store 的状态，属于异步操作。

（5）Module：当状态存储过多时，Store会变得臃肿，故Module 可以将Store 对象分割成多个模块，每个模块拥有自己的State、Mutation、Action、Getters。

2.3 Vue Router

前端路由的核心在于改变视图的同时不向后端发出请求，浏览器提供了两种方式去实现，分别为hash 和history。Hash，即URL 中的#符号，如http://www.abc.com/#/abc，hash值为#/abc。虽然URL 带有hash 值，但是不会被带入HTTP 请求中，因此改变hash 值不会重新加载页面。History 利用了HTML5 History Interface 中 的pushState() 和replaceState() 方法，应用于历史记录栈，具有对历史记录修改的功能。Vue Router 利用了这两种方式实现前端路由跳转，其默认为Hash 模式，如果使用History 模式，需要后端配置支持。

3 总结

Vue CLI 是Vue 的手脚架工具，可以自动生成项目目录，配置WebPack，安装各种依赖包，管理各种资源，具有前端工程化的自动化特点；通过Vue 构建单页面的应用，用Vue Router 对页面进行局部无刷新的替换，用Vuex 对应用中的各种状态进行管理，具有前端工程化的模块化、组件化的特点；Vue 的全家桶具有完善的功能和API 文档，给Vue 的开发者提供规范的开发环境，这就是前端工程化的规范化特点。这就是Vue 的全家桶可以解决因前端业务日益复杂等原因引起的问题。