本文通过开发准备阶段、开发阶段和开发完成三个阶段开介绍vue前端工程化的整体过程。

准备阶段

本文介绍的是有关于vue方面的前端工程化实践主要通过实践操作让开发人员更好的理解整个前端工程化的流程。

本文通过开发准备阶段、开发阶段和开发完成三个阶段开介绍vue前端工程化的整体过程。

准备阶段

vue的框架有很多有脚手架框架例如vue提供脚手架、nuxt等还有vue版本对应的版本UI组件库可选择性更多element、Ant

本文的实践选择的脚手架框架为vue3vitetypescript。

框架选择

即项目的目录规范每个项目的文件夹命名代表的含义公共组件和页面组件应该存在在哪工具类静态文件应该存放在哪个文件夹应该如何命名等。

1.规范一功能分离结构

如上图所示每个文件夹又有其含义每个有特定含义的文件都应该放到对应的文件夹内。

api文件夹

用于存放接口请求的文件夹内部文件命名有两种规则这个是根据作者自身开发经验总结的

1.api文件夹内不允许子文件夹的存在文件名应该以路由名api作为文件名

2.api文件夹内可以有子文件夹子文件夹名称应该与路由文件名同名文件名按照其含义进行命名api切文件夹结构应该只允许存在二级结构

对于第一种规则如下图所示

页面路由home-page下的全部请求应该放在home-page-api文件中。

这种规则适合于项目接口较少的项目一般一个页面路由全部请求不超过20个推荐使用这种方式。

对于第二种规则如下图所示

在api文件夹内建一个与页面路由同名的文件夹该文件夹命名规则为页面路由子路由文件夹名api的形式即该子路由内的全部请求方法放到对应的api中的文件内。

这种规则适用于路由页面请求方法比较多的情况下使用。

assets文件夹

文件夹要求建于路由页面同名的文件用于存放该路由下的图片资源文件夹不可有三级结构对于组件所需的图片资源应该统一存放在一个统一的文件夹内。

components文件夹

用于存放页面组件pages页面路由入口pages-view存放对应页面。

具有共性的页面组件可以统一放到一个文件夹或者提到components文件夹。

例如下图所示红色框表示的是首页路由则绿色框怎就是对应的页面组件关系为路由组件为页面组件提供出口路由组件只做简单props接收和简单逻辑运算

router

用于存放vuex等配置但是项目中贡献数据不建议使用vuex而是建议存放在缓存中。

utils

所谓的模块聚合结构则表示的是将api请求页面组件路由配置都存放到view文件夹中router作为主配置引用子路由配置。

对于根路径下的components、assets和store作用和规范一的作用一样。

此处下的pages-views、api和router文件夹下的文件名要求不太高只要文件名有特定含义即可但是文件夹下目录不可找过三级。

3.总结

规范一适用于小项目协作人员少的项目结构清晰明了维护方便弊端是协作性比较差。

规范二适用于中大型项目协作人员多的项目开发人员只要在自己的目录下开发即可不相互影响提交代码不容易发生冲突。

命名规范

命名规范主要有文件和文件夹命名规范、变量方法计算属性类接口命名规范、css类名命名规范、html组件引用规范导入组件名和组件名规范。

1.文件和文件夹命名规范

文件和文件夹命名全为小写字母多单词之前用横线隔开主要是为了适配window和macwindows不区分大小写mac区分大小写。

2.变量方法类接口命名规范

变量方法计算属性使用小驼峰命名法其中方法末尾需要加Fn计算属性末尾添加Computed(这个是作者个人习惯)。

类接口使用大驼峰命名法其中接口末尾加Types(作者个人习惯用于区分类)。

3.css类名命名规范——BEM

BEMBlockElementModifier是一种基于组件的web开发思想。

这种开发思想主张将用户界面划分为独立的块。

这使得网页开发变得简单快捷即使是复杂的用户界面也可以重用现有的代码而无需复制和粘贴。

Block

block名称描述了此模块的用途它是什么各个模块可以相互嵌套嵌套层级数量不受限

!--

element名称描述了在这模块中的用途它是什么element名称的语法结构为

**block-name__element-name**使用双下划线将block名称和element名称连接起来。

element

元素彼此之间可以相互嵌套嵌套层级数量不受限一个element元素里可以嵌套包含一个block块这就意味着element名称定义不能为多层级结构如

block__elem1__elem2

classsearch-form__buttonSearch/button/div

/form

search-forminput,search-formbutton,search-form__content

search-form__content

这种多层级命名element元素是不被允许的类名过长层级结构过多不清晰。

Modifier

的名称一般描述了block块或element元素的外观它的大小它的状态它的颜色modifier

的名称语法结构为block-name_modifier-nameblock-name__element-name_modifier-name一般使用单下划线将它跟block元素或者element元素连接起来布尔形式区分是或不是的状态完整的语法结构为block-name_modifier-nameblock-name__element-name_modifier-name

form

search-form__button_disabledSearch/button

/form

key-value键值对的形式区分不同的状态。

完整的语法结构则为

block-name_modifier-name_modifier-valueblock-name__element-name_modifier-name_modifier-value

form

search-form__button_size_mSearch/button

/form

不能被单独使用必须与block元素或者element元素联合使用。

因为一个modifier就是用来描述此元素的外观、大小、一个实体的状态。

结构简单一目了然组件化代码复用不使用标签选择器避免父级元素内的标签的受影响。

举个例子商品详情页是允许商家自定义标签的那么商家展示区域标签的祖先元素一旦用标签选择器定义了样式子子孙孙都要背负.

无BEM写法

widgetwidget__headerwidget__formwidget__input

widget__input_amount

类名变的更长一个元素可能拥有多个classid选择器无用武之地class命名不能重复Block的抽象至关重要

谁适用于BEM

代码校验和代码格式化两个是相辅相成的通过插件对代码进行校验并自动格式化成符合要求的格式。

要实现需要依赖两个插件eslint和prettier。

配置eslint

//空行最多不能超过2行vue/multi-word-component-names:

off

这个部分需要后端配置后端返回的code需要代表一定含义这样才能做统一数据处理例如token失效的code为多少接口超时的code或者接口报错的返回code为多少。

1.api封装

这个部分比较灵活需要按照公司的业务或者开发的个人习惯进行封装以下是一个例子

import

service.interceptors.response.use((response)

{const

PATCH].includes(method.toUpperCase()))

{data:

getDataT({url,params,needToken,method:

GET,needToString})

getDataT({url,params,data,needToken,method:

POST,needToString})

将得到的文件流添加到FormData对象Object.keys(data).forEach((_k)

{const

将得到的文件流添加到FormData对象Object.keys(query).forEach((_k)

{const

JSON.stringify(_p))_params.append(_k,

_p)}

定义请求完成的处理函数请求前也可以增加加载框/禁用下载按钮逻辑xhr.onload

function

application/x-www-form-urlencoded

blob},config)let

?${qs.stringify(query)}}_config.url

(params)

AxiosRequestConfig).***n((response)

{const

{reject(response)return}blob2File(data,

fileName)resolve()}).catch((error)

{reject(error)})})

*/,get,post,upload,downloadFile,downloadBlob,formatFile

}使用

/api/v1/zyfp_account_home/bind_mobile,method:

post,data:

bindForm.value.mobile,sms_code:

2.数据规范

这个需要后端定主要是接口返回的数据格式例如返回code规范返回对象规范等这个需要根据具体情况具体分析。

脚手架搭建