Vue3+Pinia+Vite+TS还原高性能外卖APP项目-欲赋前贤九日诗
前端规范化之旅
Vue3+Pinia+Vite+TS还原高性能外卖APP项目
download：https://www.zxit666.com/5762/
前端研发的一些规范化标准，良好的代码标准，不只可以让代码简约明晰，还能够减少 bug 的呈现，更可以让看代码的人心旷神怡，本文主要从命名标准、语法标准、后端系统开发标准、版本更新标准、上线邮件申请标准、项目启动标准来、文件目录标准七方面引见，文档内如有错漏之处，敬请大家指正，会及时做出调整；也希望各位可以提出更珍贵意见和倡议，使文档愈加完善。当然假如觉得有可自创之处，欢送大家采用。
引言
前端规范化是我们践行前端工程化中重要的一局部，为什么要规范化呢？首先我们开发是需求多人开发的，每一个开发者都有各自的编码爱好和习气，就是由于这个不同的编码习气和爱好增加了我们项目的维护本钱，所以每个项目或者团队需求明白统一的规范。
以下是我积聚的一些前端标准以及一些个人倡议：
一．命名标准
好的命名是浅显易懂，见名知意，即看css能很明晰明了的看出html的构造，文雅的js命名，能够看出每个func所处置的事情，明晰的文件和文件夹命名标准，有助于了解项目构造，以下引见下我们日常积聚的一些命名标准。
1.文件夹运用短横杠命名法(\`xxx-xxx\`)，vue、js、scss等文件运用小写加中划线命名法(\`xxx-xxx\`)
2.组件开发标准
（1）根节点class必需是"cp-xxx"开头，xxx对应的是组件的称号,组件里面的class 以cp-xxx方式命名class,尽量不要运用scoped。
（2）业务组件能够放在当前业务目录的component文件夹，import导入时用bcp-xxx开头已和公共组件加以辨别，其他标准和公共组件坚持分歧。
3. 办法命名:小写+驼峰(xxxXxYy)，
4. 组件里面的\`name\`都必需运用\`Pascal\`命名法，组件运用称号相似\`xxx-xxx\`这样。
5. 路由跳转地址，不要直接写死链接地址，运用路由链接地址对应的name停止跳转。
6. css命名标准：
1）款式：
a) 全局款式：app-*
b) 页面款式：pg-* pg-marking(marking是模块)
c) 组件款式：cp-*
d) 款式属性次第标准：js有好的写法，引荐语法写法和不引荐语法写法
2）状态：
a) 全局款式：.show, .hide(全局状态命名尽量简单，不要有过多前缀)
b) 页面款式：pg-*_active(页面款式尽量只能在当前页面运用，必需添加前缀)
c) 组件款式：cp-*_active(组件款式尽量只能在当前组件运用，必需添加前缀)
d) 制止运用scoped，无论是在全局、页面还是组件内
7.枚举值定义：全局事情名、本地存储的key值等需求抽离出单独的文件停止统一管理， 防止抵触。
二．语法标准
语法标准是为了进步工作效率，兼容性优秀，页面性能优化，代码简约、明了、有序，尽可能的减少效劳器的负载，保证最快的解析速度。
1. 依据当前eslint的标准编写代码。
2. 尽可能的少用可变变量，能用const的就不要运用let，完整不运用var。
3. 拥抱ES6：（举一些例子，顺带学习回忆下）
（1）赋值简写：{ data: data }能够写成{ data }
（2）函数简写：{data: function () {}}能够写成{data () {}}
（3）对象取值：const {a,b,c,d,e} = obj || {}
（4）兼并数据：
替代
（5）拼接字符串：
替代
（6）if判别条件合集：
替代
（7）列表搜索
替代
（8）获取对象属性值
替代
（9）添加对象属性
替代
（10）输入框非空判别
替代
4. 运用ES6的箭头函数需求留意：
（1） 函数体内的 \`this\` 对象就是定义时所在的对象，而不是运用时所在的对象。
（2） 不能够当做结构函数。也就是说，不能够运用\`new\`命令，否则会抛出一个错误。
（3）不能够运用\`arguments\`对象，该对象在函数体内不存在。假如要用，能够运用\`rest\`参数替代。（\`rest\`参数运用自行查看《ES6规范入门》）。
（4）不能够运用\`yield\`命令，因而箭头函数不能用作\`Generator\`函数。
（5）非必要状况，不要再元素上写\`style\`。
三．后台系统开发标准
以下主要是针对后端开发系统的一些开发标准，主要是将整个网站统一作风，以到达更好的性能优化。
1.二级菜单，一概加上面包屑
2.“重置”按钮 一概是重置查询条件，不停止数据查询
3.input 一概加上placeholder
4.展现的table，有些数据没有的话，要运用 - 展现
5.数据至少大于等于1条时，才会显现分页
6.table 列表里面，在接口恳求过程中一概加上isLoading
7.搜索结果为空，要加上空页面
8.全局loading：（需求加loading就在恳求接口时，加上isLoading:true）
需求运用的状况：
（1）进入页面记载数据
（2）提交表单
（3）接口是非幂等性的状况。
不需求运用的状况：
（1）翻开弹窗时需求恳求接口的
（2）接口是幂等性、响应快，且接口胜利响应后要重新加载数据的状况
9.列表分页默许size:20，pageSizes:[20,50,100]，若是弹框内分页，默许size:10，pageSizes:[10,30,50]
10.翻页查询，比如说翻到第五页，点击查询，应该从pageNo = 1 开端
四．版本号更新标准
版本标准的意义，是让开发者一眼查看到本项目的更新次数，以及本次更新的日期，开发人员，开发分支，可以快速的定位问题，理解项目迭代版本的内容。
X.Y.Z （主版本号.次版本号.修订号）
1. 版本号必需采用 X.Y.Z 的格式，其中 X、Y、Z为非负的整数，且制止在数字前方补零。X是主版本号、Y是次版本号、Z为修订号。每个元素必需以数值来递增。
2. 修订号：当触及原有页面修正，比方新增按钮、修正文案、bug修复时递增.
3. 次版本号：当触及新增一定（少量）功用模块，比方新增栏目、新增页面时递增。次版本号递增时，修订号必需归0。
4. 主版本号：当触及功用模块有较大的变动，比方增加多个功用模块或是整体架构发作变化时递增。主版本号递增时，次版本号和修订号必需归0。
5. Changelog写在项目的 README.md 里，采用倒序排列，即最新的写在最上边，模板如下：
\### 2.0.0
- 更新主题：技师看板
- 更新时间：2022-02-23
- 开发人员：xxx
- 开发分支：dev-20220223-cyc -board
1、增加技师看板新页面
6. Changelog和package.json里的版本号要同步更新
五：上线标准：
1.上线时间标准
每周的周二和周四为上线日,这样就为研发和产品制定了一个标准，不用思索每天加班熬夜上线，防止产品因“项目紧急”的缘由让研发暂时上线，从而减少研发的压力。
2.上线邮件申请标准
比方今天上线有A项目、B项目、C项目等等多个项目的时分，假如每个人上线的同窗提交一个审批邮件，关于指导来说需求每天审批很多邮件，所以此时我们不得不制定一个规范。
目前的上线审批流程为：每周二和周四需求大的人担任发送当天的上线邮件申请，担任人提早搜集好上线的需求，分支，review人，流程步骤等信息。汇总一同发送邮件，此时指导只需求回复一个上线邮件即可。详细模版，如下：
六．项目启动标准
项目启动关于新入职员工，以及新人还是有一定的应战的，特别是一些项目需求配置相关的host，package.json文件里面普通只是根底的启动，不会提示配置host等，此时就需求我们制定一个标准，比方在README.md文件下写上详细的启动步骤，以及每个环境需求配置的host，详细如下：
有了以上的启动引导是不是不论谁开发都便当了很多，只需依照上面的步骤一步一步的停止，就不需求初次开发该项目的人员去找相关开发帮助启动项目，并且也附加了登录账号等信息，大大进步人效数倍。
七：文件目录标准：
一个项目,有一个好的目录构造那是必不可少的。当我们项目越来越大时或者多人协作开发时,我们就更应该有一个明晰的目录构造。好的项目目录构造可以给我们带来诸多的益处,比方:每个功用或模块单独管理、代码的可读性加强、代码的可维护性加强、易于多人协作之间的沟通、接下来我将分享一下我在平常项目中总结的目录构造,当然这只是我个人的理论,欢送大家提出更好的意见。
|---public
|---index.html（入口html）
|---src
|---assets（静态资源）
|---css（全局款式）
|---js（全局js）
|---images（静态图片）
|---components（根底组件）
|---hocs（业务组件）
|---layout（全局规划）
|---service（axios接口封装）
|---store（vuex）
|---views/pages（页面）
|---App.vue
|---main.js（入口js）
|---.editorconfig（编辑器配置）
|---.eslintrc（代码标准的配置）
|---.gitignore（Git仓库疏忽掉的文件或目录）
|---babel.config.js（babel编译的配置）
|---package.json（项目配置文件）
|---README.md（项目描绘）
|---vue.config.js（配置文件）
