Software Development  •
软件开发
Electronic Technology & Software Engineering  电子技术与软件工程• 39
【关键词】Vue 模块化 组件化 全家桶 工具
实际项目中的最大挑战是前端业务日益复杂化和多元化促使项目周期快速演进迭代。随着时间的推移，业务需求的推进，项目的体系和形态发生了复杂的变化，会产生如下的问题：
（1）最初的架构不再支持后续的变化，若在原有的架构进行迭代更新，会使代码更冗余，若重构整个项
目，无法避免项目风险与资损。
（2）因项目不断的迭代更新，开发周期加长，经多人开发和维护，出现代码质量低、可维护性差、可用性差等问题。
（3）在多人协作开发时，没有统一的规范，无法进行高效的、高质量的协作开发。
以上问题可前端工程化的思想去解决。前端工程化本质上也是软件工程的一种，软件工程化主要关注可用性、可维护性、性能稳定
性等方面。前端工程化包括模块化、组件化、规范化、自动化四个特点。模块化不等于组件化，模块化是对资源的拆分，组件化是在设计层面上或用户界面上的拆分。模块化是将一个大文件拆分成相互依赖的小文件，再进行统一的组装和加载；组件化是从用户界面上进行拆
渐进式JavaScript 框架Vue.js 的全家桶应用
文/吕英华
分，拆分后的每个组件包含结构（HTML ）、
样式（CSS ）和逻辑（JavaScript ）；规范化是项目可持续开发的重要条件，其包括目录结构的制定、文档规范、编码规范、各种工具使用管理等内容；自动化是提高工作效率的重要条件，通过自动化工具完成持续集成、构建、部署、测试等工作。
本文工作的意义在于阐述Vue 的全家桶能自动化构建、部署具有可维护性、性能稳定的项目，实现项目的模块化、组件化和规范化，
且Vue 的全家桶满足前端工程化的思想。
1 Vue全家桶的工具分析
在实际项目中，为了提高项目的即时效益，常常会降低项目的工程化去缩短开发周期，这会给后期的开发和维护增加难度。为了快速初识化一个具有前端工程化思想的项目，Vue 全家桶提供了快速开发项目的工具、状态管理工具、路由工具、请求工具及UI 框架等。
vuejs流程图插件
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 端和移动端两
●基金项目：本文系2019年北海职业学院院级科研项目“基于Vue.js 的酒店管理系统设计与实现”（项目编号：2019YKY05）阶段性成果之一。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。