Day-07-web前端

一、web前端技术选型

1.Vue 3：主流前端框架

2.Vue-CLI脚手架：快速启动项目(相对轻量，整合了一些前端项目开发常用的工具，并且可以按需选取)

3.Ant Design 组件库：快速开发 UI 前端界面

4.Axios 请求库：向后端发送请求

5.Pinia状态管理：维护前端全局数据(需要共享的)，存储到公共的状态管理库中管理

6.前端工程化：ESLint（校验js代码规范）+Prettier（美化代码） +TypeScript（增加类型限制），保证前端项目开发规范

二、web前端vue项目初始化（搭好壳子）

打造建议的前端开发项目模板

1.工程化配置

激活插件

2.引入组件库Ant Design Vue

vue项目全局入口：main.ts(项目初始化时的动作：比如引入组件库……)

3.vue(javascript框架)项目开发规范

• 选项式api：直观、不灵活
• 组合式api：加上setup，就可以用js语法编写（建议） vue页面：html、js、css(样式美化)组合一起
• 组件库不用常换，掌握一个即可

4.写前端项目模板_全局通用布局

导航栏、中间栏、底部栏一致

统一把布局文件放到layouts(src下)目录中

右键new可以快速创建vue component组件

建议每个页面外层套框div

在启动时会加载的页面(根页面)引入全局通用布局,如App.vue

引入子件时可以用全大写也可以basic-layout

打开到新网站：target="_blank"

怎么让自己的布局随着路由加载动态替换，用router-view组件

建议把导航栏定义为独立组件(因为复杂)

每个页面给一个唯一的classname，导航栏也给

路由router：所有能跳转的页面都在里面

刷新回到current页面const current = ref<string[]>(["mail"]);用router调用afterEach函数

有没有更好的方式来配置路由和菜单项？

5.请求

一般情况下，前端只负责界面，当需要获取数据时通常是像后端提供的接口发送请求，有后端执行操作并返回响应

a. 使用第三方封装库(AJAX)Axious简化发送请求的代码

需要自定义全局请求地址等，参考Axios官方文档，编写请求配置文件 request.ts。包括全局接口请求地址、超时时间、自定义请求响应拦截器等。
响应拦截器的应用场景：我们需要对接口的 通用响应 进行统一处理，比如从 response 中取出 data；或者根据code 去集中处理错误。这样不用在每个接口请求中都去写相同的逻辑。
比如可以在全局响应拦截器中，读取出结果中的data，并校验code 是否合法，如果是未登录状态，则自动登
录。

b.把前端用到的所有api接口放到一个目录下

c.跨域解决

6.全局状态管理(全局变量)

• 适合当作全局状态的数据：已登录用户信息(每个页面都要用)
• pinia--主流状态管理库