weixin_51614564的博客

可能是因为element-plus 多次升级原因，将原来的内部代码多次改下了，原来是loading.type文件，现在变成loading.js，包括。

3. 修改 "module" 选项，将其值设置为 "es2020"、"esnext" 或 "system" 中的一个。例如，如果你想使用最新的 JavaScript 功能，可以设置为 "esnext"。仅当 "--module" 选项为 "es2020"、"esnext" 或 "system" 时，才允许使用 "import.meta" 元属性。的模块系统之一，即 "es2020"、"esnext" 或 "system"。2. 找到 "compilerOptions" 部分。

遇到错误“在没有 'node' 模块解析策略的情况下，无法指定选项 '-resolveJsonModule'”时，意味着你的 TypeScript 配置中启用了resolveJsonModule选项，但没有将moduleResolution设置为node。resolveJsonModule选项允许你导入.json文件作为模块，而这通常需要moduleResolution设置为node，因为这是 Node.js 解析模块的方式。这应该会解决你遇到的问题。这是解决上述错误的直接方法。

1.对默认CSS 样式进行重置：2.使用步骤：3.其他样式重置：

现在我们只需要当点击新建用户的时候需要显示，编辑的时候隐藏这部分逻辑应当写在页面中。: 当我们动态添加数据的时候执行代码的时候，有可能这段代码还是没有从服务器请求下来，具体实现代码：利用computed 函数实现,利用对象的引用类型，返回新的一个对象。当我们刷新的时候从新进去就是有数据的，这是因为我们的store 是异步请求的。新建的时候要给用户设置密码 ，编辑的时候是不编辑密码的。然后我们回到页面处理啊这个两个回调事件的逻辑。在新建用户的情况下我们给它一个空的对象。在编辑的时候我们给赋值一个新的对象。..

1.首先我们要拿到所有搜框内最新输入的东西2.更改我们搜索框中相关配置选项，使我们内容相对应效果展示：第4步：然后在下面做一个实现：当用户点击的时候注意点：第一点：像在setup 里面的代码只能发送一次网络请求，有点类似于组件的create就是在组件创建的时候调用一次第二点：圈起来的代码，应该不只执行一次，应该执行很多次的第三点：将这个网络请求可以写成一个方法，每次只要调用这个方法就可以发一次网络请求第四点。

1.我们可以看到我们使用最新的elementPlus 时，全部都是英语。2.在App.vue 里面进行全局国际化的配置。

2.在使用组件时就可以使用具名插槽自定义想要的样式了。1.可以使用插槽来自定义添加我们的表头。

4.因为这个dayjs 暂时不支持utc,还得把这个utc 加入到dayjs里，使用extend 做扩展。7.在这个函数中拿到dayjs里的utc 函数，拿到这个结果去调用format。1.首先可以借用dayjs 库来 来将utc 格式的时间进行转化。6. 封装一个函数传入两个参数：utc 时间，和格式化成什么样子。#在main.ts 全局注册，这样全局都可以使用这个工具函数了。3.想要支持utc 的转化，还必须导入这个utc。2.在这个文件中导入这个安装的dayjs 库。1.需求将以下时间转化。

A:可以在封装的组件里 Slot 组件，通过 :row =“scope.row” 给传到上一层。A:通过作用域插槽scope, 这个scope.row 可以拿到当前一行的数据。1.这个table 组件可能在其他地方也会使用到：可将单独抽出来放公共文件夹中。2. 通过子组件定义props 来定义属性来接收外界传过的数据。3.在组件中进行使用并且做一些相关的配置给子组件传过去。2.怎么在user 组件里面拿到当前数据并且修改？#. 使用table 组件库进行展示。#子组件接收数据并处理。

3.这样做的唯一不好的会把vuex 里面的数据都保存下来。1.借助插件：（可以使数据持久化存储）2.在vuex 根模块里面引用这个插件。

我们上面的代码是每个请求中都要携带loading动画，但是有些地方是不需要携带loding动画的，所以我们要在在请求中在添加一个参数，让别人以参数的形式传过来，好让别人决定我们是否要显示这个loading。需求希望每一个请求，它在请求的时候都会在界面上显示一个loadding动画。3.然后在调用时传入一些对应的参数（这个应当在添加所有的实例拦截器中添加）所以我们首先要对原来类型做一个扩展，然后在在配置中做个记录。1.在请求之前先显示一个loadding。2.倒入这个loadding库。......

比如我们在这里发送了请求是没有做任何的一个拦截，之前在前面文章中有写到，如果有多个模块都用到这个请求了，这个请求里面有写共有的逻辑，比如携带token,显示loading动画。把这些代码可以写到拦截器里面。怎么做？我们可以封装一些对应的类型在文件A中封装一些对应的类型接口1.先从axios中倒入对应的类型注解2.定义一个对应的类型接口3.这个类型接口里面可以定义一些hook,可以让别人通过这个类型接口给我传入哪些hook在B文件里面做一个引入（在别人创建实例，添加拦截器的一个封装）的。...

Action 类似于mutation，不同在于：Action 提交的是mutation, 而不是直接变更状态；Action 可以包含任意异步操作；操作步骤： （1）actions 里面放我们函数，函数里面的参数context ，可以帮我们提交的mutations。逻辑梳理：到时候在组件内部，调用actions之后，actions里面又去调用mutations,而mutations又去修改了state。如何在组件里面调用actions?案例1：需求是严辞一秒在做异步操作案例2:假如这个项目里

2.页面使用3.注意：考虑到后面开发的代码的优雅度，可以吧mutations 里面的一些函数，新建一个mutations-type.js文件使用二、mutations 辅助函数在conpositionAPI

某些属性我们可能需要经过变化后来使用，这个时候可以使用getters:案例举例：目前我们希望以下案例中的数据能够达到总数量总价格的一个效果 考虑到其他页面也许也会用到这种逻辑计算，所有可以使用getters 属性将其管理起来页面如果使用直接调取这个函数就可以了关于getters 其他讲解（1）关于getters 第二个参数，作用是调用getters 里面的其他函数 争对视图中的数据做一个简化vue2 getters 增强方式如果我们界面需要太多的数据展示的话，就需要在computed

1.vuex 使用单一状态树：（1）用一个对象就包含了全部的应用层级状态; (2)采用的是SSOT, 单一数据源； (3) 这也意味着，每个应用将仅仅包含一个store 示例；（4）单状态树和模块化并不冲突我们有时候想要用vuex 里面的数据时，一般我们是这样写的👌：但是某种情况下我们会认为这样写内容就会很多，看起来不怎么美观，这时候，我们可以使用计算属性来处理这样的逻辑：⚠️：但是如果像这种的很多状态的话，我们就要很多的计算属性，那样看起来代码也会很臃肿，所以我们vuex 这里给我们提供.

vue -router 提供的导航守卫主要是用来通过跳转或取消的方式守卫导航。1.全局的前置守卫beforeEach是在导航出发时会被回调的： （1）拿到router对象 （2）在登录页面绑定一个事件，如果客户登录成功了，就立即把登录信息缓存起来 （3）在导航守卫判断用户是否登录进行拦截 （4）else可写 ，可不写，默认该往哪跳就往哪跳...

1.例如我们的后台管理系统，不同的账号进行不同角色登录的时候，不同的角色就会有不同的权限，不同的权限就会对应不同的路由，例如订单管理并不是谁都有订单管理，有的登录角色可以显示，有的登录角色不可以显示。2.一般这种实现有两种方法： 1⃣️：通过角色 2⃣️：拿到菜单，通过菜单动态生成路由3.代码示例如何动态添加路由和二级路由一级路由添加添加二级路由对象动态删除路由：路由的其他方法补充：router.hasRoute():检查路由是否存在。router.getRoutes(): 获取一个

在前面已经写了关于router 的好多文章，也写了router 的几个内置全局组件router-link 和router-view，其实这也主要是因为router 在内部做了好多事情，也就是之前创建一个router 对象，然后通过app.use(router) 进行了使用，而这样去使用的时候其实会执行 router.install 这个函数，这个函数会把app传过来，然后内部注册了router-link 和router-view这么一个全局组件2.router-link v-slot 的使用props

方法1: 使用vue2的方式进行路由跳转方法2 :在setup 里面实现相对的代码1⃣️：使用hook ，在vue-router 里面提供了 useRouter（通过这个方法获取路由对象）2⃣️：拿到这个路由对象 useRouter()3⃣️：使用这个路由对象...

1.配置子路由的映射关系：children 属性

1.动态路由写法path:"路径/:动态路由名字"页面使用： 2.在headers页面拿到传过来的jiang,可以通过$route拿到数据进行展示⚠️：$route 是vue-router里面内部添加的一个属性方式2:在setup 里面获取

1.使用懒加载配置映射关系2.利用路由对象懒加载的进行分包给分包起名字

1.replace : 设置replace 属性的话，当点击时，会调用router.replace(), 而不是router.push,也就是点浏览的返回键，不是返回上一页面，而是直接退出当前页面。2.active-class 属性: 设置激活a元素后应用的class,默认是router-link-active 3.active-class：修改class 如果嫌弃class名字太长了，可以利用这个属性进行修改...

1.vue-router 是基于路由和组件的 ☑️ 路由用于设定访问路径，将路径和组件映射起来， ☑️ 在vue-router 的单页面应用中，页面的路径的改变就是组件的切换。2.如果想在当前页面使用路由1⃣️：安装Vue Router,在终端输入以下命令，点击回车 2⃣️：在到package.json 是否安装成功3⃣️： 新建一个router 文件，配置对应的路由与组件的映射关系 倒入对应的组件 配置对应的映射关系：创建一个数组，数组里面放上一个个映射的路由对象4⃣️：

一个指令定义的对象，Vue提供了如下几个钩子函数：1⃣️：created: 在元素创建完成，其它属性绑定之前调用2⃣️：beforeMount : 当指令第一次绑定到元素并且在挂载父组件之前调用。3⃣️：mounted: 在绑定元素的父组件被挂载后调用。4⃣️：beforeUpdate: 在更新包含组件的VNode之前调用；5⃣️：updated: 在包含组件的VNode及其组件的VNode更新后调用；6⃣️：beforeUnmount: 在卸载绑定元素的父组件之前调用；7⃣️：unmounted:

在vue的模版语法中我们学习过各种指令：v-show、v-for、v-model等等，除了使用这些指令之外，Vue也允许我们来自定义自己的指令。 ⚠️：注意Vue中，代码的复用和抽象主要还是通过组件；⚠️：通常在某些情况下，你需要对DOM元素进行底层操作，这个时候就会用到自定义指令；自定义指令分为两种：1⃣️ 自定义局部指令：组件中通过directives选项，只能在当前组件中使用；2⃣️ 自定义全局指令：app的directive 方法，可以在任意组件中被使用；案例：一般获取焦点是点击下输入框就可以获取焦

watch 的API完全等同于组件watch 选项的Property:于watchEffect 的比较，watch 允许我们：watch 侦听单个数据源watch侦听函数的数据源有两种类型： 多个数据检测

在setup使用ref

1.前面我们知道计算属性computed: 当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理侦听数据的变化Watch1.在options API中，我们可以通过watch 选项来侦听data或者props的数据变化，当数据变化时执行某一些操作。2.在Compostion API中，我们可以使用watchEffect和watch来完成响应式数据的侦听；WatchEffect : WatchEffect 停止侦听： 案例：当计数器达到25的，watchEffect就停止侦听...

ref Api

Reactive 判断的API的一些逻辑相关的APi

通过reactive 或者ref 可以获取到一个响应式的对象，但是某些情况下，我们传入给其他地方（组件）的这个响应式对象希望在另一个地方（组件）被使用，但是不能被修改，这个时候如何防止这种情况的出现呢？例如：这样写我们的我们的属性是可以被修改的但是某些情况：我们不希望别人在这里修改我们的name属性使用...

1.为了开始使用Coposition API,我们需要有一个可以实际使用它（编写代码的地方）；2.在Vue组件中，这个位置就是setup函数；setup其实就是组件的另外一个选项：只不过这个选项强大到我们可以用它来代替之前所缩写的大部分其他选项；比如methods、computed、watch、data、生命周期等等。 A:它主要有两个参数: 第一个参数：props (父组件传递过来的属性） 第二个参数：context：它里面包含了三个属性 attrs:所有的非prop

1.$parent（获取父组件) 2.$root(获取根组件)

通过$refs来获取元素对象或者子组件实例

1.什么样的情况下子组件祖尧传递内容到付组件呢？小案例： 传递事件时，同时也可以传递一个参数。接收处理这个参数：

异步组件和suspense的结合使用

Vue定义异步组件和代码分包