觉醒法师的专栏

provide和inject是用于实现依赖注入的一对API。它们允许在组件树中传递和接收数据，而不需要通过每一层显式地传递props。在语法中，provide可以用来提供一个值，而inject可以用来接收一个已经提供的值。provide是setup函数内部的一个函数，必须在setup函数内部调用它。在方法中调用provide时报错：TableNormal.vue:152 [Vue warn]: provide() can only be used inside setup().

在Vue2中，子组件使用的是选项式 API ，被引用的组件实例和该子组件的 this 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。而在Vue3中，子组件使用的组件是默认私有的：一个父组件无法访问到一个使用了 的子组件中的任何东西，除非子组件在其中通过 defineExpose 宏显式暴露。

在使用Visual Studio Code（VSCode）开发Vue3 + TypeScript项目时，会遇到各种波浪线错误（诊断信息），这些问题或错误通常由以下几人原因引起的：typeScript配置问题、ESLint配置问题、Vetur或Volar插件问题、项目依赖问题、第三方插件问题、重启VSCode。解决方法有：检查错误类型、搜索解决问题等

Vuex为Vue中提供了集中式存储 + 库，其主要分为state、getter、mutation、action四个模块，它们每个担任了不同角色，分工不同；Vuex允许所有的组件共享状态抽取出来，以一个全局单例模式管理，状态集中存储在同一个地方，并且以相同的方式访问和修改。虽然Vuex在Vue中担任重要的角色，通过可预测化的状态管理模式来帮助开发者更好地管理复杂应用的状态。但是当遇到某些模块业务属性较多情况下，定义和管理也是相当繁琐，尤其是对其命名和调用，所以此时则需要通过有效地简化程序代码，来减少不必要的冗

遇到了[vite] Internal server error: [@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment. File system access is required for resolving imported types.错误。

在Vue3中，ElementPlus是使用比较广泛的UI组件库，提供了丰富的界面元素支持项目开发需求。在后台管理系统中，左侧或顶部的菜单栏通常包含多个子菜单项，通过菜单的展开和收缩功能，用户可以方便地查看或隐藏不需要的菜单项，从而优化界面布局，提供用户体验。在ElementPlus中，可通过修改属性default-openeds和unique-opened来实现菜单项的展开和收缩.、默认展开等功能；并使用JS数组中reduce方法来完成default-openeds数组读取。

Vue3中实现登录功能，通常涉及到创建一个表单，用户输入用户名和密码，然后将信息发送到后端进行验证，得到响应结果后作出相应操作。登录功能开发(Vue3+ts+Pinia+Element Plus)

在创建项目时，一般会有选项可以选择是否安装Pinia，选择是即可。如果创建项目里错过了也没关系，通过命令安装即可。pinia是Vue的存储库，它允许您跨组件/页面共享状态。它Vuex的替代品，其功能和性能更优于vuex，在后期使用中会逐渐被大家发现。这里我们先使用pinia全局存储用户信息、接口访问令牌、菜单列表等数据，当然这些只是作为一个项目的基础部分，其他共享信息可根据你们的项目需求进行添加。

近期开发Vue3时，计划通过pinia判断用户是否登录，进行相关权限校验时，出现相关错误并对其分析和解决。"getActivePinia()" 被调用时未有实例Pinia。在执行app.use(pinia)之前，尝试使用本地仓库。以及ts语意错误：参数'_token'隐式具有'any'类型。虽然和Javascript方面有一些差异，但使用Typescript可以弥补Javascript的缺陷，提供更好的开发体验。

Vue3和Vue2相比，在多个方面展现出了其独特的优势，也存在一些缺点。Vue3在性能、TypeScript支持、组件化和模块化等方面具有显著优势，但也存在学习曲线陡峭、迁移成本高等缺点。在选择使用Vue3还是Vue2时，需要根据项目的具体需求、团队的技术栈以及项目的稳定性要求等因素进行综合考虑。

近期在项目开发中，遇到并发上报信息的问题。由于业务需要，要求同一时间将数组中的数据一起并且逐条发送给后台处理；在使用Promise.all处理多个异步任务时，发现1毫秒间十几条异步请求就发送完毕，导致服务器无法同时处理完毕这些任务，最终部分请求失败问题。所以在使用Promise.all的同时，也需要将每个异步任务的发送时间作个延迟处理。

在使用element-ui中，会发现表格组件el-table在未指定宽度情况下，会自动计算并给表格宽度赋值。但实际开发中，有时需要根据内容实际长度自动撑开显示，由内容的多少而决定表格的宽度，而不是默认宽度为100%。在默认情况下表格宽度为100%显示，并且列项未指定宽度情况下，剩余部分会平均分配宽度，本案例实际需求是由内容自动撑开显示。componentUpdated

该篇为前一篇“Element-UI - 解决el-table中图片悬浮被遮挡问题”的优化升级部分，解决当图片位于页面底部时，显示不全问题优化。Vue.directive钩子函数

在实际开发中，会发现很多系统中弹框是可以在浏览器可见区域自由拖拽的，这极大方便用户的操作。在查看Element-UI中弹框（el-dialog）组件的文档说明后，发现并未实现这一功能，不过也无须担心，vue中提供了Vue.directive钩子函数，可以从底层操作DOM来实现并升级弹框的拖拽功能。

在开发中，发现element-ui在el-table中添加图片悬浮显示时，会被单元格遮挡的问题。通过查询得到的解决办法，大多是修改.el-table类中相关样式属性，但经过验证发现会影响到其他正常功能的使用。对于此问题解决其实也并不难，将悬浮图片放在body节点下，通过定位显示即可。所以对于此问题，将通过Vue.directive钩子函数，自定义弹框来实现。

在大屏开发中，比如将1920*1080放到更大像素（3500*2400）大屏上演示，此时需要使用到transform来对页面进行缩放，但是此时发现弹框定位出错问题，无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的组件修复定位问题，经过网友不断发现和提问，原来不同组件解决方案是不同的，这讲解下 组件如何修复。接下来我们讲下select组件的popper弹框错位问题。

查看element-ui官方文档无果后，打算更换新的框架进行开发，但更换几个后发现都存在类似问题，由于之前项目都是使用element-ui，对此框架比较熟悉，所以还是决定在此基础解决问题。在近期开发中，需要将1920*1080放到更大像素大屏上展示，所以需要使用到transform来对页面进行缩放，但是此时发现弹框定位出错问题，无法准备定位到实际位置。如果屏幕像素更大，则偏移位置更远，对此element-ui文档中常规手段已无法解决，只能从底层考虑。

最近需到一个在开发中很常见错误，原因是自己开发时没仔细检查代码，删除数据时把data中return一并删除了，导致路由跳转点击无反应。data函数在Vue中是一个特殊的方法，用于定义组件的本地状态。经翻阅相关文档，了解到它应该返回一个对象，该对象包含在组件中使用的各种数据属性。如果您的data函数没有返回任何东西（或者返回null或一个非对象值），那么您可能会看到类似的错误消息，指示数据未定义或未预期的类型的错误。确保您的data函数始终返回一个对象，以包含您需要在组件中使用的数据属性。

lay-excel 提供了丰富的数据表格类型，包括常见的表格、表格拆分、表格计算、图表等等，可以满足用户多样化的数据表格需求。此外，lay-excel 还支持表格导出功能，可以将表格保存为多种格式的文件，如 CSV、Excel、HTML 等等。lay-excel 是一款开源的、基于 Google Sheets 的免费的在线数据表格库。总的来说，lay-excel 是一款非常优秀的在线数据表格库，它的简单易用、功能丰富、兼容性强等特点，使得它在国内市场中受到了广泛的欢迎和使用。

DataGridXL表格是在2020年发布，DataGridXL在设计时就考虑到了性能。提供最快、最简单、最可靠的数据网格。DataGridXL支持所有常绿浏览器，为 Web 应用程序提供类似于 Microsoft Excel 的体验，它支持前端框架有Vue、React、Angular等。

在前端开发中，有时会遇到所有菜单数据在同一级的情况，后端未对数据进行分级处理；但前端渲染需要是树状结构的数据，如何实现数据的树状化？将数组中通过父节点的ID与子节点的parentId关联，通过递归函数来实现。前端框架这里使用element-ui的tree控件来实现，对其不了解可以去官网查看文档。

Element-UI组件el-table用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。这里将使用到以下两项，来完成今天demo演示：1. 多级表头：数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。2. 合并行或列：多行或多列共用一个数据时，可以合并行或列。

通过lay-excel插件实现Excel导出，并实现单元格合并，样式设置等功能。

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。注意：所有浏览器都支持 oncontextmenu 事件， contextmenu 元素只有 Firefox 浏览器支持。通过DOM对象监听鼠标点击事件触发鼠标点击事件，获取鼠标当前浏览器位置根据当前位置重新调整自定义contextmenu的位置显示自定义contextmenu此时我们可以来实现自定义右击菜单

HTML 拖放接口使得 web 应用能够在网页中拖放文件。这里将介绍了 web 应用如何接受从底层平台的文件管理器拖动DOM的操作。拖放的主要步骤是为 drop 事件定义一个释放区(释放文件的目标元素) 和为dragover事件定义一个事件处理程序。触发 drop 事件的目标元素需要一个ondrop 事件处理函数。下面这一段代码以一个 元素为例展示了这些工作是如何完成的。一般来说，在实际应用中需要定义一个 dragover 事件的处理函数并在其中加入关闭浏览器默认拖放行为的代码。

系统登录是指用户必须提供满足一定条件的信息后，才可以进入系统。最早系统一般是指用户名和密码，如今，登录方式已多元化，系统一般登录方式有：用户名+密码、二维码扫码登录、第三方授权登录、手机号+短信登录等等。移动端登录方式除以上几种外，还有手机号一键登录、人脸识别登录、指纹登录、语音登录等等。前面Vue讲解的这些篇幅了解后，可以实现一个简单的登录功能了，这里还是用传统的 用户名+密码 方式实现登录功能。......

每个系统项目中，都离不开权限的管理。有些小项目为了快速开发，可能会省略权限的处理；但中大型项目无法回避，中大型系统使用的人员比较繁杂，每个人身处不同职位或职权，所看到信息是不一样的。 权限管理，一般是先建“角色”，给角色添加某些栏目显示权限，或赋予增删改权限，再将“角色”指派给对应用户。一个用户可能只有一个角色，或多个角色，这样该用户则拥有了这些“角色”的权限集合。 下面我们通过代码，来处理栏目显示的权限，来了解前端是否何处理权限问题的。 前面几篇已介绍了如何使用m

ES6的Set和Map区别是：Set是“集合”结构，而Map是“字典”结构；Set是以[value, value]的形式存储元素，而Map是以[key, value]的键值对形式存储元素；Map可以用get()键查找到特定值并返回，而Set不行。注意：注意：最近在研究Vue项目的本地模拟数据时，发现ES6的Set和Map可以很好实现本地数据的增删改查，也解决了Array会存储重复数据问题。对于某些项目特定需求，是有帮助的，这里通过几个案例，让大家了解如何使用它位。......

Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。如果对axios进行全局配置，后自定义实例进行默认配置，后者将优先于前者。 axios安装好可以直接使用了，为什么还要自定义一个新实例，再次封装呢。其实在实际的项目开发中，特别是中大型项目，一个系统所有请求的数据源不可能只有一个，会有很多数据源。每个数据源请求和响应也会存在差异，这时就存在特殊性了，需要根据实际情况来进行处理。............

在前后端分离的开发中，需要前后台同时开发，但是在后端完成前，暂时是没有数据返回给前端使用的，如果先写静态后面再改，就有重复工作的内耗存在。所以开发初始前端会使用模拟数据，这里使用是mockjs。一、安装mockjs二、创建mock目录三、组件中模拟调用............

Vue Router是Vue.js的官方路由，与Vue.js核心深度集成，让用Vue.js构建单页应用变得轻而易举。1.2 js通过this.$router实现跳转二、router基本改造通过vue-cli安装后，项目中会成一个router目录，所有路由通过index.js文件进行配置。但在一些中大型项目中，不仅会出现N位开发人员参与，还会出现N个项目组参与情况。这种情形下，如果大家在开发中，都集中在router的index.js配置，很容易出现代码冲突或覆盖现像。...

Vuex是一个专为Vue.js应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件状态，并在相应的规则保证状态以一种可预测的方式发生变化。什么情况下会使用到Vuex：比如登录的用户信息，接口的统一访问令牌等，会平凡使用和全站通用的数据，可以寄存在状态管理器中。一、store仓库创建首先在src目录中创建以上文件。1.1 state.js文件1.2 getters.js文件1.3 mutationsType.js文件1.4 mutations.js文件.1.5 actions.js

el-tree-transfer是基于vue和element-ui的树形穿梭组件，使用前请确认是否引入element-ui。此组件类似element-ui的transfer组件，该组件分别是Checkbox多选框，Button按钮和Tree树形控件整合页成，在遇到需要树形穿梭功能时，推荐使用！...

目录一、vue安装二、sass安装三、vuex安装四、vue-devtolls安装五、vue-ls安装一、vue安装1.vue-cli全局安装npm install -g vue-cli2.初始化项目vue init webpack projectName3.运行项目注：npm中-g, -d, -s区别1.-g 全局安装，全称--global2.-s 安装到dependencies中，用于生产环境，即--save3.-d 安装到devD.