项目介绍

首先要介绍自己的项目，项目目标是什么，比如：

目标是为开发中大型项目提供开箱即用的解决方案。包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。项目会使用前端较新的技术栈，可以作为项目的启动模版，以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习vue3、vite、ts等主流技术。该项目会持续跟进最新技术，并将其应用在项目中。

简单的介绍一下项目

前端面试一般写什么项目（项目介绍时怎么介绍更有亮点）(1)

编辑

添加图片注释，不超过 140 字（可选）

文档准备

准备一个文档用于介绍项目常用配置，项目主题，样式，组件等说明

需要掌握的基础知识

介绍项目中使用到的技术，比如下面的举例：

本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。 建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

浏览器支持

考虑到硬件支持等情况说明：

本地开发推荐使用Chrome 最新版浏览器，不支持Chrome 80以下版本。

生产环境支持现代浏览器，不支持 IE。

前端面试一般写什么项目（项目介绍时怎么介绍更有亮点）(2)

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

项目规范

项目内集成了以下几种代码校验方式

  1. eslint 用于校验代码格式规范
  2. commitlint 用于校验 git 提交信息规范
  3. stylelint 用于校验 css/less 规范
  4. prettier 代码格式化
ESLint

ESLint 是一个代码规范和错误检查工具，有以下几个特性

手动校验代码

执行下面代码.能修复的会自动修复，不能修复的需要手动修改 yarn run lint:eslint

配置项

项目的 eslint 配置位于根目录下 .eslintrc.js 内，可以根据团队自行修改代码规范

编辑器配合

推荐使用 vscode 进行开发，vscode 自带 eslint 插件，可以自动修改一些错误。

同时项目内也自带了 vscode eslint 配置，具体在 .vscode/setting.json 文件夹内部。只要使用 vscode 开发不用任何设置即可使用

CommitLint

在一个团队中，每个人的 git 的 commit 信息都不一样，五花八门，没有一个机制很难保证规范化，如何才能规范化呢？可能你想到的是 git 的 hook 机制，去写 shell 脚本去实现。这当然可以，其实 JavaScript 有一个很好的工具可以实现这个模板，它就是 commitlint（用于校验 git 提交信息规范）。

配置

commit-lint 的配置位于项目根目录下 commitlint.config.js

Git 提交规范Stylelint

stylelint 用于校验项目内部 css 的风格,加上编辑器的自动修复，可以很好的统一项目内部 css 风格

配置

stylelint 配置位于根目录下 stylelint.config.js

编辑器配合

如果您使用的是 vscode 编辑器的话，只需要安装下面插件，即可在保存的时候自动格式化文件内部 css 样式

插件

StyleLint

Prettier

prettier 可以用于统一项目代码风格，统一的缩进，单双引号，尾逗号等等风格

配置

prettier 配置文件位于项目根目录下 prettier.config.js

编辑器配合

如果您使用的是 vscode 编辑器的话，只需要安装下面插件，即可在保存的时候自动格式化文件内部 js 格式

插件

Prettier

目录说明

说明目录使用规范：

. ├── build # 打包脚本相关 ├── mock # mock文件夹 ├── public # 公共静态资源目录 ├── src # 主目录 │ ├── api # 接口文件 │ ├── assets # 资源文件 │ │ ├── icons # icon sprite 图标文件夹 │ │ ├── images # 项目存放图片的文件夹 │ │ └── svg # 项目存放svg图片的文件夹 │ ├── components # 公共组件 │ ├── design # 样式文件 │ ├── directives # 指令 │ ├── enums # 枚举/常量 │ ├── hooks # hook │ │ ├── component # 组件相关hook │ │ ├── core # 基础hook │ │ ├── event # 事件相关hook │ │ ├── setting # 配置相关hook │ │ └── web # web相关hook │ ├── layouts # 布局文件 │ │ ├── default # 默认布局 │ │ ├── iframe # iframe布局 │ │ └── page # 页面布局 │ ├── locales # 多语言 │ ├── logics # 逻辑 │ ├── main.ts # 主入口 │ ├── router # 路由配置 │ ├── settings # 项目配置 │ │ ├── componentSetting.ts # 组件配置 │ │ ├── designSetting.ts # 样式配置 │ │ ├── encryptionSetting.ts # 加密配置 │ │ ├── localeSetting.ts # 多语言配置 │ │ ├── projectSetting.ts # 项目配置 │ │ └── siteSetting.ts # 站点配置 │ ├── store # 数据仓库 │ ├── utils # 工具类 │ └── views # 页面 ├── test # 测试 │ └── server # 测试用到的服务 │ ├── api # 测试服务器 │ ├── upload # 测试上传服务器 │ └── websocket # 测试ws服务器 ├── types # 类型文件 ├── vite.config.ts # vite配置文件 └── windi.config.ts # windcss配置文件

项目配置项

主要是提供不同环境的项目配置功能：

环境变量配置

项目的环境变量配置位于项目根目录下的 .env、.env.development、.env.production

.env # 在所有的环境中被载入 .env.local # 在所有的环境中被载入，但会被 git 忽略 .env.[mode] # 只在指定的模式中被载入 .env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略

其它配置

1、组件默认参数配置、组件，分页、弹窗等等、显示、隐藏；

2、缓存配置

3、配置多语言信息

4、主题色配置

5、css 前缀设置

6、用于预设一些颜色数组

路由

路由主要以meta配置为主。

Meta 配置说明：比如：

1、外部页面嵌套

2、外链

3、动态路由Tab自动关闭功能

4、这里的icon配置，会同步到菜单

5、新增路由

6、Redirect

7、如何开启页面缓存、如何让某个页面不缓存

export interface RouteMeta { // 路由title 一般必填 title: string; // 动态路由可打开Tab页数 dynamicLevel?: number; // 动态路由的实际Path, 即去除路由的动态部分; realPath?: string; // 是否忽略权限，只在权限模式为Role的时候有效 ignoreAuth?: boolean; // 可以访问的角色，只在权限模式为Role的时候有效 roles?: RoleEnum[]; // 是否忽略KeepAlive缓存 ignoreKeepAlive?: boolean; // 是否固定标签 affix?: boolean; // 图标，也是菜单图标 icon?: string; // 内嵌iframe的地址 frameSrc?: string; // 指定该路由切换的动画名 transitionName?: string; // 隐藏该路由在面包屑上面的显示 hideBreadcrumb?: boolean; // 如果该路由会携带参数，且需要在tab页上面显示。则需要设置为true carryParam?: boolean; // 隐藏所有子菜单 hideChildrenInMenu?: boolean; // 当前激活的菜单。用于配置详情页时左侧激活的菜单路径 currentActiveMenu?: string; // 当前路由不再标签页显示 hideTab?: boolean; // 当前路由不再菜单显示 hideMenu?: boolean; // 菜单排序，只对第一级有效 orderNo?: number; // 忽略路由。用于在ROUTE_MAPPING以及BACK权限模式下，生成对应的菜单而忽略路由。2.5.3以上版本有效 ignoreRoute?: boolean; // 是否在子级菜单的完整path中忽略本级path。2.5.3以上版本有效 hidePathForChildren?: boolean; }

权限
  1. 通过用户角色来过滤菜单(前端方式控制)，菜单和路由分开配置
  2. 通过用户角色来过滤菜单(前端方式控制)，菜单由路由配置自动生成
  3. 通过后台来动态生成路由表(后台方式控制)
前端角色权限

实现原理: 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取用户角色后，通过角色去遍历路由表，获取该角色可以访问的路由表，生成路由表，再通过 router.addRoutes 添加到路由实例，实现权限的过滤。

缺点: 权限相对不自由，如果后台改动角色，前台也需要跟着改动。适合角色较固定的系统

数据 mock&联调

提供不同环境的联调和测试功能

1、跨域处理

1、没有跨域时的配置

2、跨域原理解析

2、接口请求
  1. 页面交互操作；
  2. 调用统一管理的 api 请求函数；
  3. 使用封装的 axios.ts 发送请求；
  4. 获取服务端返回数据
  5. 更新 data；

接口统一存放于 src/api/ 下面管理

3、axios 配置

1、更改参数格式

2、多个接口地址

3、删除请求 URL 携带的时间戳参数

4、Mock 服务

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发独立自主，不会被服务端的开发进程所阻塞。

本地 Mock

本地 mock 采用 Node.js 中间件进行参数拦截（不采用 mock.js 的原因是本地开发看不到请求参数和响应结果）。

线上 mock

由于该项目是一个展示类项目，线上也是用 mock 数据，所以在打包后同时也集成了 mock。通常项目线上一般为正式接口。

项目线上 mock 采用的是 mockjs 进行 mock 数据模拟。

组件注册

提供组件注册功能，丰富全局注册，异步注册等方式；

1、按需引入

2、全局注册

3、全局按需注册

样式

主要介绍如何在项目中使用和规划样式文件。

引入外部模块

考虑2个点：

1、全局使用

2、局部使用

构建&部署构建

项目开发完成之后，执行以下命令进行构建

yarn build

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件

旧版浏览器兼容

在 .env.production 内

设置 LEGACY=true 即可打包出兼容旧版浏览器的代码

LEGACY = true

预览

发布之前可以在本地进行预览，有多种方式，这里介绍两种

不能直接打开构建后的 html 文件

先打包在进行预览 yarn preview

直接预览本地 dist 文件目录 yarn preview:dist

压缩

1、开启 gzip 压缩（开启 gzip，并配合 nginx 的gzip_static功能可以大大加快页面访问速度）

2、开启 brotli 压缩（brotli 是比 gzip 压缩率更高的算法，可以与 gzip 共存不会冲突，需要 nginx 安装指定模块并开启即可。）

发布

简单的部署只需要将最终生成的静态文件，dist 文件夹的静态文件发布到你的 cdn 或者静态服务器即可，需要注意的是其中的 index.html 通常会是你后台服务的入口页面，在确定了 js 和 css 的静态之后可能需要改变页面的引入路径。

前端路由与服务端的结合

项目前端路由使用的是 vue-router，所以你可以选择两种方式：history 和 hash。

,