期刊渐进式JavaScript框架Vue.js的全家桶应用_吕英华1
需积分: 0 151 浏览量
2022-08-03
17:03:57
上传
评论
收藏 1.37MB PDF 举报
Software Development
•
软件开发
Electronic Technology & Software Engineering
电子技术与软件工程
• 39
【关键词】Vue 模块化 组件化 全家桶 工具
实际项目中的最大挑战是前端业务日益
复杂化和多元化促使项目周期快速演进迭代。
随着时间的推移，业务需求的推进，项目的体
系和形态发生了复杂的变化，会产生如下的问
题：
（1）最初的架构不再支持后续的变化，
若在原有的架构进行迭代更新，会使代码更冗
余，若重构整个项目，无法避免项目风险与资
损。
（2）因项目不断的迭代更新，开发周期
加长，经多人开发和维护，出现代码质量低、
可维护性差、可用性差等问题。
（3）在多人协作开发时，没有统一的规
范，无法进行高效的、高质量的协作开发。
以上问题可前端工程化的思想去解决。
前端工程化本质上也是软件工程的一种，软件
工程化主要关注可用性、可维护性、性能稳定
性等方面。前端工程化包括模块化、组件化、
规范化、自动化四个特点。模块化不等于组件
化，模块化是对资源的拆分，组件化是在设计
层面上或用户界面上的拆分。模块化是将一个
大文件拆分成相互依赖的小文件，再进行统一
的组装和加载；组件化是从用户界面上进行拆
渐进式 JavaScript 框架 Vue.js 的全家桶应用
文/吕英华
本文的意义在于阐述 Vue 的
全家桶能自动化构建、部署具有
可维护性、性能稳定的项目，实
现项目的模块化、组件化和规范
化，且 Vue 的全家桶满足前端工
程化的思想。Vue 是一款模块化、
组件化的渐进式 JavaScript 框架，
具有高性能和多用途的特点，可
以创建可维护性和可测试性更强
的代码库，可以在现有的服务端
应用中加入 Vue 组件，带来更丰
富的交互体验。
摘
要
分，拆分后的每个组件包含结构（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 端和移动端两
●基金项目 : 本文系 2019 年北海职业学院院级科研项目“基于 Vue.js 的酒店管理系统设计与实现”（项目编号：2019YKY05）阶段性成果之一。
评论0
最新资源