vue + ElementUI
ts
动态语言只有在运行过程中才会知道出错在哪里，报错是不可预测的，所以出现了这样的一个语言
这种语言会给动态类型参数添加一个指定类型，方便其调用方法，但是这种语言不能直接运行需要先编译成js才能运行
对类型的支持
类型声明添加位置：三处可加 不过大部分可省略
定义复杂类型：
interface以及type
不过编译检查只发生在编译阶段，在编译之后会消失
鸭子类型，如果和目标比较像，也可以被编译使用
Vue3
食用对象：后端，关于vue术语组件化构建等不作涉及
技术选型
基础开发服务器配置
切换端口以及使其它局域网中可以使用该端口进行访问，添加host属性：
跨越配置：后端配置修改请求头
前端是直接配置即可：
含义是url中添加api，走的路径切换为后端服务器选项
项目结构：
小案例
三个组成部分script代表着控制层，控制模板中的数据源以及方法行为，函数 同样是来自上面控制头
这里的click点击绑定了对应事件：（事件对标一个函数）
但是现在点击之后数据成功打印，但是为什么msg中没有发生改变呢？
这里需要引入响应式包装此变量
如何引入？导入vue中的包装类ref
修改值需要.value 这里是拆除包装，但是html还是访问原始即可
小结：（用法回忆）
- ref函数 响应式数据 如何修改？
- 关联html和js中变量数据
- html中input标签绑定事件
戒除笔记误区
关键词 ， 加速 ， 用脑
小组件
main.ts
作用?
mount方法（钩子函数），挂载根App中html到页面上div上，需要修改视图页面，只用修改引入的页面即可
vue实例化有一个完整的生命周期，对应着一系列钩子函数、
除此之外：还有一个响应式组件：reactive
区别：
- 前者基本类型和对象均可，后者只能封装对象
- 实现原理不同，之后使用ref即可
- 函数中输出方式不同
非文本响应式绑定
使用场景：非文本类型
图片类型
:属性加路径
小细节:public中不需要具体路径，从根目录开始即可
事件绑定
表单绑定
v-model：双向绑定 input标签中直接设置即可
计算属性
好处：缓存作用 只需要执行一次
xhr
xhr的执行顺序并非按照代码顺序执行，而是存在对应执行逻辑
异步操作：
发请求并不是同一时间接收
通过promise改造 优化xhr
promise 中参数存在两个参数 分别代表着处理正常结果和异常结果
处理错误信息，根据状态码的不同去判断
为了代码的通用性，封装成一个函数更为简洁：
xhr进一步封装：axios 获取服务器返回数据
端口 7070—->8080 跨域
后端跨域设置： Cors
如果想在页面组件加载完成后调用函数使用：onMounted
两种跨域方式：前端代理，后端修改请求头
对比之下：请求头方式效率更高
简易处理，前端配置代理也可，注意后端mapping 需要在url前添加一个api（key）/
axios同样可以进行数据发送，添加v-model 做好数据双向绑定
区分 开发环境 以及 生产环境（上线）
代码中访问key即可，如何做到？
npm run dev 对应开发环境
npm run build 打包成dist
环境变量出现智能提示：
来自官方文档
自定义axios
这里总拼接字符串可能有些麻烦，可以自定义一个axios请求对象引入即可
使用baseURL。
添加拦截器，对于所有请求都进行此类操作，复用度高
后端处理返回状态码：
条件与列表
v-for指令 形成循环 需要创建一个临时变量
若出现ts不知道类型时：需要使用interface创建一个对应变量去作为类型声明
TypeScript检查变量类型，判断一个类型的一个关键方法就是interface
interface 只是用在TypeScript编译的时候，编译完成后就会删除。不会在编译完成后的JavaScript文件中存在。
使用文件作为复用文件时候需要导出，export ，在引入时如果导出有default 则不用使用花括号，反之
条件判断：
v-for 和 v-if 一起使用时，v-for优先级更高
template标签的妙用：
使部分标签不生成真正的html代码 减少样式被影响
监听器
vue 组件 watch
使用方式：两参数 变量，箭头函数
箭头函数中可定义参数，代表变化的新值
作用场景：监听变量变化做出对应操作
存储器：
- localStorage 即使浏览器关闭，数据还在
- sessionStorage 工作在浏览器活动期间
作用：数据更长久保存，刷新不会丢失
这里可以封装成一个use函数
use工具函数库（vueuse）
VueRequest 请求库
作用：简化开发
结构: useRequest<泛型>（参数 ，箭头函数去设置请求url以及系列参选项）会有一个返回值 使用{}接收
computed函数作用：复杂运算在其中简化
usePagination 设置分页请求
get请求传参方式：
总记录数属性：
设置子组件
作用：同一模块在不同的场景下使用，提升复用性
可以有将其中属性设置为参数传入的形式
编译宏属性（在编译阶段完成）
在vue中是使用?: 来设置参数的必要性
设置默认值是使用逻辑或 || 去设定
基础部分结束，开始项目阶段
如何前后端分离的实现一个项目（插入）
前置：配置vue环境 创建项目
这样一个项目实际上是单页面应用：
切换的是路由的映射资源
路由映射：
资源映射方式：
全栈开发流程：
首先去写前端页面，写完之后使用假数据进行测试，之后再使用axios进行请求，注意存在的跨域问题，后端前端均可处理，后端处理性能更高
Element UI + 实践部分
使用时直接看官方文档，引入所需模块即可
但是需要之后对模板进行探索，标签的代表的含义以及常用属性等等
组件解释：
Element UI 后台管理系统主要的标签：
- el-container：构建整个⻚⾯框架。
- el-aside：构建左侧菜单。
- el-menu：左侧菜单内容，常⽤属性：
:default-openeds：默认展开的菜单，通过菜单的 index 值来关联。
:default-active：默认选中的菜单，通过菜单的 index 值来关联。 - el-submenu：可展开的菜单，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。 - template：对应 el-submenu 的菜单名。
- i：设置菜单图标，通过 class 属性实则。
- el-menu-item：菜单的⼦节点，不可再展开，常⽤属性：
index：菜单的下标，⽂本类型，不能是数值类型。
实践 ：router创建动态菜单
router-view 用于开窗口给自己写的页面去嵌入
现在出现了一个问题，形成了双重嵌套，why?
对应上面说的框架：首先展示的就是App.vue，之后是使用router-view开辟的一个窗口，那么此时就出现了双重嵌套
解决方式：
将app.vue和页面隔离开不要形成二次引用
在App.vue中创建一个窗口去放置router中的页面
这里嵌套问题已经解决了，但是还存在一些问题
- 点击事件绑定问题，如何形成点击切换页面
- 刚访问时不要是空页面，影响体验，设置一个初始url
对于问题1：
这里解决方式是将页面和每一个子菜单的元素index进行动态绑定
这里取出即可
对于问题2：
解决方式是vue自带的组件
此处还能做个美化：
动态显示此时处于那个页面
vue中只允许存在一个根节点，如果需要存在其他组件，那么放入一个盒子中即可
注意：方法中需要调用返回的数据时需要使用this去指代当前对象
表单数据校验
需要定义rules对象，在此对象中设置各个校验规则
双向绑定：
前端服务器往后端传参,使用const常量this去传对应参数，在url后使用逗号隔开
关于vue中的两个router
- route 如果想要获取参数，使用这个
- router 如果想要跳转路径使用这个
若想循环中部分组件不显示需要设置差异信息：
并在循环中添加判断：
项目中如何使用？
首要事务：搭建主体框架
how?：使用ElementUI引入框架即可
p.s. 可以对其设置一个全局css，方便管理
缺少：设置前端组件的流畅性，属性的设置 review css 即可，同时缺少一个实例化的流程以及style的使用绑定，文档可以解决
到这里已经完全可以理解一个关于前后端分离项目的实现了，缺少的部分也列出来了可以进行相应的查找知识点补全，但是不建议在现在，而是在应用中去补全。