Vue3 总后台项目总结

343 阅读10分钟

环境搭建及配置


  1. 配置正确的 git 用户名和邮箱
  2. 代码的风格已由 eidtorconfig 和 prettierrc 确定,请勿随便更改

VSCode 插件安装及配置

插件安装

  • EditorConfig for vs code 用于加载项目根目录的 editorconfig 文件,editorconfig 是用来规范统一项目代码风格的文件。
  • Code Spell Checker 检查拼写错误
  • ESLint 语法和风格检验工具
  • Prettier 代码格式化工具
  • Todo Tree 用于高亮在项目中添加的例如 TODO、BUG 等注释,并方便直接跳转到相应的注释。
  • Git History 方便查看 git 历史以及代码
  • GitLens Git supercharged 用于方便查看代码是被谁在什么时间修改的
  • Jest Runner 如果测试未通过,需要 debugger 时需要使用到。
    • WindiCSS IntelliSense 用于智能提示功能类(注意:需要 disable auto rename tag 插件)。
  • Image Preview 可以在代码旁显示图片的预览,可以用来确认图片路径是否引用正确。
  • Volar 对 .vue 文件提供类型提示(注意:需要 disable Vetur 插件)。
  • Visual Studio Code Commitizen Support 提供交互式的 commit-message 输入。
  • StyleLint 样式代码的检测
  • gitignore 使用右键方便地将文件加入到 .gitignore 中
  • Project Manager 方便的项目访问工具

编辑器配置

在 settings 的 json 底部添加以下代码:

"files.autoSave": "onFocusChange", // 在失焦后自动保存"editor.formatOnSave": true, // 在保存的时候自动格式化代码"todo-tree.filtering.excludeGlobs": ["**/node_modules", "node_modules"],"todo-tree.regex.regex": "(//|#|<!--|;|/\*|^|^\s*(-|\d+.))\s*($TAGS)\s","[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
"[vue]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
"[typescriptreact]": {
 "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
"[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
"[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
"[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode"
 },
"[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },"css.validate": false, // 关闭vscode原本的css校验器,使用tailwind的校验器以避免 @tailwind 指令报错
"editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
},"commitizen.subjectLength": 100,
JSON

项目基础说明

主要的开发分支为 dev 分支,main 作为发版分支只有在发布新版本时会使用到,禁止直接将代码提交到 dev 和 main 分支中。

查看一个公用函数或 hook 是如何用的,最简单的方式是查看测试文件。

目录说明

  • 根目录下的 config 用于像个项目的一些配置,例如 vite 相关配置等~~
  • public 放置静态文件,在项目中使用 / 开头引入
  • index.html 是最终挂载到的 html 实体
  • src 源码目录,大部分的开发都是在该目录下
  • views 页面目录,所有的页面都写在该目录下。目录结构使用文件夹 + index 格式 页面目录名使用大写开头 + 驼峰命名,另外对于嵌套的页面,可根据实际情况嵌套目录或者扁平化创建。
  • venders 放置直接引入项目的第三方库文件。
  • utils 放置全局的工具函数,hook 目录也在其中。依然要在 utils 下的 index.ts 中导出工具模块,这么做 的好处是在一个文件中引入多个工具函数时可以更加简洁。
  • styles 用于放置全局的样式,主题配色也写在其中。
  • router 是路由目录,所有的路由管理都写在这里,
  • interfaces 放置 api 相关文件,其中的 urls 放置所有的 api 路径。
  • components 放置全局的组件,依然使用了目录 + index 的形式。
  • Layouts 在 components 目录下,放置项目的整体布局组件,例如 Header 和 Sider 等。
  • assets 放置静态资源,如果资源名称中有中文,需要将其改为英文,尽量将资源名称语义化。
  • mocks 是 Jest 测试用的,无需关注。

主题

  • 主题色在 styles 目录下,使用方法:
    • 在 css 中使用,var(--theme-primary-color)
    • 在 windicss 中使用 text-$theme-primary-color 这将自动生成 color: var(--theme-primary-color);

2,前端项目通用规范及流程

功能开发阶段代码说明

  • a 阶段,代表已完成静态页面
  • b 阶段,代表已完成 JS 交互
  • c 阶段,代表已可可测试
  • d 阶段,代表已可发布

代码规范

JavaScript

  • 变量、函数命名需要有语义,遵循驼峰式命名法,即 setUserName 这种形式,禁止使用拼音命名。
  • 变量以名词命名,例如:const totalCount = 0
  • 常量需以全大写字母组成,多个单词由下划线连接,例如:USER_NAME
  • 禁止以大写字母开头命名,除非是构造函数,即使用 new 关键字调用的函数
  • 函数第一个单词使用动词,例如:doSomethingsetCount
  • 使用 constlet 而不是 var 声明变量,并且优先使用 const
  • 使用 === 严格相等,而不是 ==
  • 注意判断 falsy 值:nullundefinedfalse0NaN''(空值)
  • 优先使用箭头函数,在需要函数提升的地方使用 function 关键字声明函数
  • 字符串拼接使用模板字符串,而不是 + 符号
  • 需要获取对象的多个属性时,优先使用解构:const { name, age } = user
  • 优先使用 class 作为构造函数
  • 禁止修改标准库原型
  • 对于全局唯一的常量,尽量使用 Symbol 表示
  • 对于简单逻辑判断使用三元表达式而不是 if-else
  • 多数时候使用 async-await 而不是 Promise

HTML & CSS

  • 特殊字符请使用字符实体,例如 < 在 html 中需要写成 &lt;
  • 优先使用 CSS 类名,少用 id,并且类名具有语义化
  • CSS 类名中多个单词使用短横线 - 连接
  • 尽量使用 tailwind 的 utilities 类,这有助于减小 css 代码的体积,增加复用性,多处地方使用到的相同 utilities 可以抽象为新的 utilities 类或者 components
  • 自定义 utilities 需要使用上下文无关的类名,类名只表示其作用,而不特指用在某个特定的地方

推荐写法

  • 避免魔数和魔术字符串等的出现,也就是避免硬编码,例如成功的 code 如果是 0,那么需要将 0 赋予有语义的变量:const SUCCSS_CODE = 0,因为它是常量,所以使用全大写
  • 在 JSX 中,如果没有子元素则使用自闭合关闭标签,例如:<img /><UserList />
  • 使用短路径引入模块,尽量少使用很长的相对路径,即 import x from '../../../utils/xx' 这种方式是禁止的,请使用 import x from 'utils/xx'
  • 优先使用 export const xxx 而不是 export default xxx,这样可以统一同一个模块在全局的名称,而不是默认导出后不同的人使用不同的命名
  • 所有的组件和页面使用文件夹 + index 结构书写,组件和页面目录使用大写字母开头的驼峰式写法,例如 UserList
  • 优先将一个文件夹中的模块从 index 中导出,这有助于简化导入时的代码
  • hook 使用小写开头的驼峰式写法,并且尽量分离到单独的文件中

业务 & 优化

  • 对于敏感操作编写提示提醒框,例如删除操作需要用户确认是否删除
  • 注意书写错误处理逻辑,预想可能出现的错误
  • 避免按钮的连续点击,即用户点击了按钮,在请求完成之前禁用按钮
  • icon 优先使用 svg 格式,图片优先使用 webp 格式 + png 候补格式
  • 视频优先使用 webm 格式 + mp4 候补格式
  • gif 图优先使用 video 代替(添加 autoplayloopmutedplaysinline 四个属性)
  • 图片和视频必须要有高度,以避免闪动出现
  • 页面中可点击部分,需要用 button、a 标签等包裹,或者使用 role='button' 等声明角色,以方便键盘操作者的使用
  • 大部分时候图片都要加上 alt 属性,如果只是修饰用图片,alt 属性值为空串

其他

  • 对逻辑复杂的函数书写注释
  • 完成调试代码后需要将调试代码删除,例如 console.log(xx)
  • 删除无用代码,主要是指没有使用的变量和引入
  • 通过 TODO 注释标注未完成的工作,常用的注释包括:TODOBUGFIXME 等,使用 TODO + 你的名字首字母小写 来区分这是谁添加的,例如 TODO wj、TODO shj
  • 公用工具函数和 hooks 必须编写单元测试
  • 对于公用函数的更改需要通过完整的单元测试才能提交代码,并将可能的变更告知其他成员
  • 超过两处使用的相同代码需要抽象为公共代码
  • 页面的样式需要至少在两个尺寸的屏幕检测适配问题
  • 依赖安装,如果是开发依赖(只会在开发环境下使用的代码)需要将其加入 devDependencies,即安装的时候使用 yarn add xx -D

初次接触项目

拉取项目后第一件事,查看项目结构,搞清楚每个目录对应的内容,例如 api 放置的位置、路由和权限是如何管理的。了解基础的配置和脚本,通过查看 package.json 查看基础的依赖和脚本命令。

查看任务

使用云效查看具体的任务和时间节点,自我评估进度,如果有预期滞后的任务提前提出再做协商。

开发阶段

每个人都有自己的开发分支(如果还没有可以自己创建 git branch -b your_name/repo origin/dev),所有代码都在该开发分支上修改,例如你的分支名为 your_name/repo,那么你的所有操作都在该分支进行。

不允许直接修改 main、dev 分支的代码,直接推送都会被拒绝。

整个开发时间包括了添加新代码、修改 bug 和编写测试,需要注意合理安排时间。不建议将修改 bug 和写测试的时间分散到添加新代码的时间中,尽量将修改 bug 和写测试的时间单独规划出来,隔离影响。

注意⚠️:在每日的开发开始前,先拉取远程的最新代码,git pull origin your_name/repo

注意⚠️:git 提交的 message 必须符合 commitlint 标准,具体规范参考:@commitlint/config-conventional 。并且提交 commit 尽量代表了一种内容,例如该次 commit 都是测试相关代码,或者该次 commit 都是同一个新功能。

编写测试

完成代码开发后,对于新增的全局工具函数和 hook 必须添加单元测试,测试覆盖率达到 80% 即可。

如果时间充裕,需要对功能组件和页面组件编写测试。

运行测试可以选择对指定目录进行测试以节约测试时间:yarn test filename 这里的 filename 就是你编写的测试的文件名。在最后添加 --watch 可以开启监控模式,在修改了测试文件后自动运行测试脚本。

如果之前没有写过测试,那么开始写的时候会很花时间,熟悉了之后就流畅了。注意分配好这部分的时间。

提交 PR

所有的测试通过后,提交代码并发起 PR 申请合并到 dev 分支。

Code Review 代码审查

等待代码审查,这部分暂时由前端项目负责人负责,后期将慢慢加入更多的人到代码审查上。

修改代码

如果 code review 未通过,则需要修改代码,再次提交 PR

Git 操作

正常情况下,创建并切换分支后即可进行开发,完成开发后通过规范化的 commit-message 提交即可。对于 push 的操作只要保证在下班前提交一次即可,不用每次 commit 后都 push。

如果意外的在错误的分支上进行了开发,需要先在本地提交一次 commit,然后:

  • 如果本地已有正确的分支:
  • 使用 git log --oneline 查看新提交的 commit 的 hash 并复制
  • 切换到正确的分支,使用 git cherry-pick commit-hash 将 commit 拉取到该分支
  • 切换回错误进行开发的分支,找到该 commit 的上一条 commit 的 hash 并复制:git log --oneline

  • 使用 git reset --hard last-commit-hash 将分支的代码切换回 commit 之前的样子(==注意这将会使本地的 dev 分支下的代码都恢复到前一个 commit 的样子,如果你没有先执行 cherry-pick,那么代码就丢失了==)
  • 切换回正确的分支继续开发即可
  • 如果本地还没有正确的分支:
  • 创建并切换到分支 git checkout -b new-branch
  • 此时新分支中已有 commit 的代码,所以只需要切换回错误开发的分支,执行 git reset --hard last-commit-hash 同上的操作(同上 4)
  • 切换回正确的分支继续开发即可

其他一些常用的操作

  • 所有的命令后面加上 -h 可以查看该命令的相关参数,例如 git add -h 查看 add 命令相关参数
  • 查看本地的远程仓库 git remote -v
  • 查看本地的分支 git branch -l
  • 拉取远程代码 git pull origin branch-name
  • 新建分支 git branch -b new-branch based-branch 这句话的意思是以 based-branch 创建新的分支 new-branch,并切换到新分支。
  • 将代码加入暂存区 git add .
  • 编写提交信息 git commit -m '分类: 你的提交信息',提交信息的格式使用 Angular Convention 标准,配合 Visual Studio Code Commitizen Support 插件使用,具体步骤为:
  • 在 vscode 中按下 Ctrl + Shift + p 打开命令输入框,输入 commit,见下图

  • 根据交互选择和输入内容,type 是必选的,scope 可选,short description 必选。
  • 推送分支 git push origin branch-name
  • 修改错误的 message有时候在提交了 message 之后发现写错了一些内容,此时可以通过 git commit --amend 进入到命令行的 vim 编辑器进行修改,类似下面的界面:

按下键盘 i(insert)即可进行输入模式,修改 message 后按下 esc 键,随后按下 : 进入底线命令输入模式,输入 x 按下回车即可。

  • 查看提交历史 git log,加上 --oneline 参数可以显示简洁的提交历史。
  • gitk --all 通过可视化的方式查看本地分支历史

2.7,最简单的Vue3新特性

vue3中丢掉默认暴露,Setup,也不用return了 Vue3.jpg

Vue3-1.jpg 改进之后,尤雨溪最新Vue3用法地址:github.com/vuejs/rfcs/…

3,简单的git使用及快捷键

第一次拉取代码

3.1,安装git

3.2,配置用户名和邮箱

git config --global user.name "kuangshen"   #名称
git config --global user.email 24736743@qq.com  #邮箱

3.3,配置密钥 先查看是否存在

cat ~/.ssh/id_rsa.pub

3.4,不存在就要配置

ssh-keygen -t rsa -C "<您的邮箱>"

配置好以后添加钥匙

image.png

3.5, 克隆代码

git clone 代码地址

3.6, 安装管理工具 ,我使用的是Yarn

3.6-1, 全局安装 Yarn 的最新版本:

npm install -g yarn

3.6-2, 进入你的项目目录:

cd ~/path/to/project

3.6-3, 运行以下命令:

yarn set version berry

3.7,日常使用

4,模块化

将一个页面拆解成多个文件

4.1 主页

Home.png

4.2 文件拆解

文件拆解.jpg

4.3 局部组件

引入.jpg

4.4 全局组件

全局组件.jpg

4.5 分别暴露出去

暴露.jpg

5,组件化 Ant Design Vue

在实际开发中不得不提的组件化开发,Ant Design Vue

5.1,table 表格

当你想要给表格中加入其他的组件 1627870611(1).jpg 就可以这样操作

table.jpg

table2.jpg

5.2,from 表单

验证 image.png

image.png 添加你需要的规则就基础的做好了

image.png

6,图片引入写法

image.png

7,封装的CSS

image.png image.png

8,主题色

在全局中大量使用的颜色可以包装成主题色,后期更好的维护

主题色.png

主题色2.jpg

9,插槽slot

插槽内容,插槽还可以包含任何模板代码,包括 HTML或者其他组件

image.png image.png

10,依赖 注入 Provide和ject

11,hooks 自定义封装函数

12,路由router

基本路由 image.png 嵌套路由

image.png 在嵌套组件中加入这个标签 <router-view / > image.png 无条件跳转路由 image.png 把路由加入函数 image.png 侧边栏的弹出框点击跳转 image.png

13,数据请求axios

request封装

image.png 接口类型文件

image.png ajax封装

image.png 数据请求封装

image.png 导出封装数据请求

image.png 导出API文件

image.png 接口地址

image.png

使用 image.png

14,API

14.1:隐藏按钮

在用户界面做一个只显示特定账户的按钮:根据路由参数的变化来发送接口请求 在隐藏按钮页面 添加is,并设置点击改变is的值 image.png 在账户管理页面获取is的值

image.png 在账户管理页面,接口调用函数中添加隐藏字段

image.png

15,父子组件通信 defineEmits, defineProps

父组件

image.png

子组件

image.png