蜗牛~~

由于本系统的keepAlive实现没有用页面的name，而是用v-if条件判断哪些页面缓存就套个keepalive的壳，否则正常展示，因此，上面刷新的逻辑原理，需要配合下面的key值设置。如果，你们是通过设置页面name，结合include实现的缓存，就像下面这种形式，那么可以用v-if实现刷新。刷新的逻辑就是，在store里面存一个isReload的变量。使用的是element-plus中的el-tab组件，结构目录如下。右键显示功能菜单，写成了一个组件，在上面文件中进行引用。

注意：子组件中需要添加 emits: ["numClick"]，同vue3类似，vue3中也需要添加defineEmits将事件发射出去。vue中子向父传值都是emit的方式，这个在vue3中写法相似，只是多了一个定义emit的步骤，这也是为了后续的类型推导做准备。注意：v-model里面绑定变量需要加上 .value ，这也是与vue3的区别。v-model，v-show跟以前的用法类似，但注意后面不是双引号“”，而是大括号{}注意：父组件接收子组件发射的方法同样需要加上 on。

先看下效果，根据点击后根据搜索的逻辑，可以将全匹配的优先展示，其次根据匹配度依次排序展示，同时忽略简繁体进行搜索。注意：里面引入的简繁体转换插件，是在这个博客中已提到。如果不需要简繁体转换，就可以去掉。

表格的数值默认会渲染排序 icon, 可以配置 showDefaultHeaderActionIcon关闭。当配置为对象时，always 控制是否在子维度不足 2 个时始终展示小计，默认不展示。首先创建一个vue3+vite+ts项目，可以查看下面相关文章，只看第一条即可。可以调整行宽、列宽、列排序、单个单元格详情展示、选中某列、某行等基本功能。可以通过上面设置的SUM函数自动计算出数值，也可以自定义累加函数。配置自定义方法优先级大于配置聚合方式，即配置。1、在项目中安装（npm/pnpm都可以）

为什么会想到fetch呢，是因为最近在开发中要加一个悲观锁的功能，具体需求是：用户1和用户2不能同时打开一个模型进行编辑，用户1优先进入模型后，要对该模型进行上锁，关闭该模型或刷新页面时要进行解锁，此时在刷新页面时出现了问题。由此可得出原因：页面刷新后，页面已经被销毁，但放在mounted中的解锁异步请求还没完成，页面就会主动把未完成的请求取消掉，这时的请求是还没到服务器的。在后台使用 Fetch API，因此它同样具有 64 KB 的载荷限制，以及它还可以确保请求在页面卸载后继续发出。

vue3中实现elementPlus表格选中某行使得上移下移

vue3中使用vuedraggable拖拽el-tree数据，可以实现单个拖拽、双击添加、按住ctrl键实现多个添加，或者按住shift键实现范围添加，添加到框中的数据，还能拖拽排序

里面只需要修改对应的参数即可。100%匹配的同样会优先展示。创建人就会显示在创建时间。创建时间在创建人之上。

代码如下，里面有个useMouse()函数，追踪鼠标位置，这个需要项目中安装vueuse，可以查看下面文章去自行安装，这里使用的X6中自定义节点的方式实现的，项目目录如下，hooks里面存放一些函数和变量。nodes里面是自定义节点的页面，最外围的index.vue就是主渲染页面。这个是自定义节点页面，定义好之后，在主页面中进行引入。有问题的可以评论区讨论~

按住ctrl键实现单个多选 按住shift实现区间范围多选。2、通过循环节点数组来更新nodes节点中isCurrent属性，控制高亮。引入的hooks文件，index.ts。1、重点是要获取当前所选节点数组。

【代码】vue3+ts+elementui-plus二次封装树形表格。

我只定义了三层数据，就只演示展开了三层，还可以多层，自己设置即可。

【代码】vue3+ts+elementui-plus二次封装弹框。

当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。

（vue2中我们是通过给子组件设置ref属性，然后通过this.$refs.xxx.methods()来实现的），那这里如何实现呢？如何在 vue3 组件中使用 TS 类型的讲解就到此结束啦，有写的不对的地方，欢迎评论区指出哦~就会有提示，因此，建议显式地为事件处理函数的参数标注类型。注意：子组件的ref值应该和下面定义的值保持一致，如：modalRef。有时我们可能想为 ref 内的值指定一个更复杂的类型，可以通过使用。方式二：通过泛型参数来定义 props 的类型，这种方式更加直接。

当项目前后端同时开发，后端来不及提供接口时，前端可通过mock来模拟后端返回数据，非强制性使用 ，详情参考。随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。// 这种默认调用mockJS.Random的image的第一种方法。Mock.Random 是一个工具类，用于生成各种随机数据。只是在属性值字符串中占个位置，并不出现在最终的属性值中。，取其返回值作为最终的属性值，函数的上下文为属性。占位符引用的是 Mock.Random 中的方法。

Store(如 Pinia) 是一个保存状态和业务逻的实体，它不绑定到您的组件树，换句话说，它。Pinia 从使用角度和之前的 Vuex 几乎是一样的。反而比vuex更简单了。，它有点像一个始终存在的组件，每个人都可以读取和写入。

vue2.x使用的是 this.$emit 而vue3使用的是emit（因为vue3中没有this），它们的传值一样都是方法加值，即vue2.x的是。3、在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数。this.$emit('方法名','传递的值(根据需要传或者不传)')导出，父组件才能访问到数据，否则拿不到子组件的数据。并定义要发射给父组件的方法，也可以传空。语法糖中，需要将组件的属性及方法通过。，vue3的setup语法糖的是。可以访问子组件的方法和属性，在。

由于 Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。1、我们可以通过window.location.protocol和window.location.host获取协议和主机ip端口，然后统一设置axios的默认请求baseURL。来绑定的，例如 Vue.prototype.$toast = Toast。proxy是getCurrentInstance()对象中的一个属性，然后通过对象的解构赋值方式拿到proxy。

在页面中使用，直接用font-family后面跟上你在font.css中定义的名称即可。或者问UI要，ui在设计图的时候也会下载对应的特殊字体的包，所以问她要方便快捷 ~~在vue项目中的assets文件夹下，新建一个font文件夹，将这四个文件放进去。在官网的右上角输入你想下载的字体名称，点击后面的搜索按钮。然后再新建一个font.css文件，里面编写字体变量。首先要找一个免费网站，去下载你想用的字体，推荐。然后再main.js中引入font.css。下载完事之后再解压，是对应字体的四种类型。

若遇到npm info: node: --openssl-legacy-provider is not allowed in NODE_OPTIONS的话，就输入set NODE_OPTIONS=""，可以解决，然后在进行npm等命令的操作就不会报错了。入口文件进入-->接着找到对应的路由-->再去分析对应的模块，属于现用先分析的模式，动态引入和代码分割。轻量快速的热重载（HMR）---一修改代码就局部刷新，webpack也具备，但vite更快。开发环境中，无需打包操作，可快速的冷启动---最牛的地方。

vue3【toRef和toRefs--详】

vue3【计算属性与监听-详】

vue3【生命周期讲解-详】

什么是hook?本质是一个函数，把setup函数中使用的Composition API（组合式api）进行了封装类似于vue2.x中的mixin自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂举个例子，通过在页面获取鼠标点击的坐标为例，来说明一下自定义hook的作用（1）首先我们写一个这样的页面，获取鼠标点击页面的鼠标，并显示在页面上方法：主要是通过在组件挂载时调用window.addEventListener事件监听方法获取点击事件的坐标。demo.vue

首先我电脑之前重装了一次系统，因此之前全局安装的vue2的脚手架也不复存在（如果有全局加脚手架的话，先卸载再往下进行），今天就在此电脑中配置vue2和vue3的全局脚手架，就可以实现在一台电脑中，既可以创建vue2的项目也可以创建vue3的项目。以备不时之需。一、安装vue-cli脚手架（1）首先建立一个存放vue版本的文件夹，分别对应vue2和vue3（2）然后进入vue3文件夹，直接在他的地址栏进行cmd回车，并执行安装命令使用vue3必须确保@vue-cli版本在4.5.0以..