VUE实战
主要记录实战中遇到的vue相关知识及问题
煸橙干儿~~
这个作者很懒,什么都没留下…
展开
-
error: pathspec ‘XXX‘ did not match any file(s) known to git
会出现新的分支信息,这时,再执行以下命令,即可成功切换分支。首先使用一下命令,查看本地及远程的所有分支。切换之后,可通过以下命令查看分支是否切换成功。若没有对应的分支,执行以下命令,拉取分支。该问题是由于没有对应分支的原因。原创 2024-05-07 15:59:14 · 319 阅读 · 0 评论 -
vue纯前端实现表格分页及条件查询功能
假设后端接口返回的数据为data,且有两个筛选条件:name和id,在此要对数据先进行筛选,再实现分页。在跳页、搜索等按钮点击的时候,将页数修改为对应数据,再调用dataFilter()方法即可。表格采用elementUI的el-table,只需要对数据data进行处理赋值即可。由于接口返回数据过慢,故而采用前端对数据进行处理分页的方法实现表格分页及条件查询。三、跳页,搜索等功能。原创 2024-04-19 12:18:43 · 422 阅读 · 0 评论 -
git 001f# service=git-receive-pack 报错
remote: 执行此操作需要Git"GenericContribute"权限。此原因是账号没有权限,添加权限即可。原创 2024-04-01 15:19:53 · 126 阅读 · 0 评论 -
el-row一行放置3个el-col,有时出现空行现象
利用el-row的type属性,将type设置为flex,启用flex布局,再设置justify和align属性,即可避免该问题出现。原创 2024-04-01 09:51:06 · 393 阅读 · 0 评论 -
vue时间组件:dayjs与moment
Day.js是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。原创 2024-03-26 11:30:01 · 638 阅读 · 0 评论 -
回流和重绘
1、解析(parser)HTML,生成DOM树;2、同时解析css,生成样式规则;3、根据DOM树和样式规则,生成渲染树;4、进行布局Layout(回流),根据生成的渲染树,得到节点的几何信息(位置、大小等);5、进行绘制Painting(重绘),根据计算和获取的信息进行整个页面的绘制;6、展示再页面上。当渲染树中部分或全部元素的尺寸、结构、布局等发生改变时,浏览器就会重新渲染部分或全部文档的过程。原创 2024-03-06 17:27:26 · 359 阅读 · 0 评论 -
git常用命令
git查看配置(如果配置信息太多,需要退出,输入q,即可退出)git bash (终端)清屏。推送到远程仓库(首次)推送到远程仓库(重复)本地初始化git仓库。原创 2024-03-04 11:09:41 · 615 阅读 · 0 评论 -
eslint支持?.语法
将.eslintrc.js文件中的ecmaVersion修改为2020。原创 2024-02-26 17:53:32 · 357 阅读 · 0 评论 -
npmjs官网(查询依赖包)
可以方便的查看依赖包的安装、使用说明及相关注意事项等。原创 2024-02-23 15:07:16 · 1079 阅读 · 0 评论 -
git切换仓库地址
已有git仓库,要切换提交的仓库地址,用以下命令。原创 2024-02-22 16:22:43 · 693 阅读 · 0 评论 -
vue项目拆分组件思想对比
4、在组件的setup语法糖中,通过调用函数配合解构赋值把函数内部的数据和方法在组件中可用。1、找到组件中属于同一个业务逻辑的所有代码(响应式数据 + 修改数据的方法)3、在use函数内部,把组件中要用到的数据或者方法以对象的方式导出。一旦组件从一个变成了多个,必定形成嵌套关系,从而增加通信成本。打头的方法,把第一步所有的业务逻辑代码都放入。对原生js函数的理解要求高了。组件增加复用,增加可维护性。逻辑的复用,增加可维护性。原创 2024-02-08 16:01:39 · 451 阅读 · 0 评论 -
RBAC权限控制实现方案
/ 放置全局指令// 管理员权限// el 使用自定义指令的dom元素// binding 对象,binding.value 可以接受外部传过来的值// 管理员账号单独处理returnif (!// 隐藏el// display的设置,可以通过开发者工具修改,建议使用remove})原创 2024-02-06 15:25:19 · 1656 阅读 · 0 评论 -
制作svg精灵图
4、使用svg精灵图:新建一个svg标签,内层嵌套use标签,使用use标签的 xlink:href属性,引用symbol的id,1、把所有的svg精灵图都包裹到一个svg标签中。2、把内层svg的标签都修改为symbol。3、给每个symbol标签,添加id。原创 2024-02-04 15:54:32 · 422 阅读 · 0 评论 -
VUE项目导出excel
流程:前端调用到导出excel接口 -> 后端返回excel文件流 -> 浏览器会识别并自动下载。流程:前端获取要导出的数据 -> 把常规数据处理成一个excel文件 -> 浏览器识别下载。场景:大部分场景都有后端来做。场景:少数据量的导出。原创 2024-02-02 17:16:07 · 759 阅读 · 0 评论 -
vue项目在线预览和下载文档
利用微软提供的Office Online平台,即可实现在线预览doc、ppt、excel等文档。contractUrl:是要预览的文件的地址。previewURL:是微软提供的地址。点击合同名称,即可跳转新页面,预览文档。原创 2024-02-02 16:16:15 · 478 阅读 · 0 评论 -
利用路由守卫实现token访问拦截
在项目中,我们经常会遇到对路径访问的拦截,如:未登录时,只允许访问登录和404页面,在登录后,不允许直接通过url访问登录页面等。本文章将对该需求做简单介绍。原创 2024-01-31 10:24:14 · 497 阅读 · 0 评论 -
登录页面实现记住我功能
【代码】登录页面实现记住我功能。原创 2024-01-30 17:26:27 · 739 阅读 · 2 评论 -
js-cookie的使用方法
js-cookie是一个简单的,轻量级的处理cookies的API。原创 2024-01-30 16:59:31 · 385 阅读 · 0 评论 -
vue报错:[vuex] unknown action type: user/doLogin
vue项目中,使用vuex进行状态管理,出现一下错误的原因是:解决办法:1、查看是否有设置 2、查看。原创 2024-01-30 16:33:51 · 433 阅读 · 0 评论 -
vue-admin-template框架
这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint,这些搭建后台必要的东西。所以,选择一个现成的框架,可以让我们事半功倍。原创 2024-01-29 16:01:50 · 420 阅读 · 0 评论 -
npm切换源地址
npm源地址:npm源地址:国内npm源地址总结::https://registry.npm.taobao.org。原创 2024-01-29 15:33:43 · 1398 阅读 · 0 评论 -
使用 n 模块进行node版本切换
【代码】使用 n 模块进行node版本切换。原创 2024-01-29 15:31:39 · 881 阅读 · 0 评论 -
使用json-server提供简易接口
假设:index.json文件存于D:\web\project\05-vue\vue_demo\src\db,文件夹下,那就需要在 D:\web\project\05-vue\vue_demo\src\db 路径下打开终端,执行命令,如下所示,即表示服务启动成功。json-server会根据json文件内容自动生成各种类型的接口,可通过如下方式,调用接口。,查看get请求接口数据。,查看服务是否启动成功。原创 2024-01-25 17:12:36 · 568 阅读 · 0 评论 -
正则表达式去掉html标签
代表的是html标签的结束符>:代表的是html标签的开始符。:代表除>以外的所有字符。原创 2024-01-24 15:30:50 · 442 阅读 · 0 评论 -
Duplicate keys detected: ‘41172‘. This may cause an update error.
原因:v-for 循环时,用了重复的key值。原创 2024-01-24 15:23:17 · 317 阅读 · 0 评论 -
Error in v-on handler(Promise/async):“TypeError: (0, _api_article_WEBPACK_IMPORTED_MODULE_1__”....
原因:引入API 方法的时候,没有加{},或引入的方法名错误。原创 2024-01-24 15:19:06 · 510 阅读 · 0 评论 -
“import ... =“ 只能在 TypeScript 文件中使用。
解决方案:在settings.json中添加以下配置,关闭JavaScript的验证启用即可。原因是:此类代码被vscode解析成TypeScript语法。原创 2024-01-23 17:50:46 · 1558 阅读 · 0 评论 -
peer eslint-plugin-vue@“^7.0.0“ from @vue/[email protected]
用vue/cli脚手架安装项目时,选择ESlint,再安装依赖包的时候,会报以下错误,(2)切换npm版本,安装8.5.5版本的npm(使用npm -v命令查看版本)npmV7版本开始不再自动忽视依赖冲突,需要用户手动输入命令。npmV7 之前的版本遇到依赖冲突时,会忽视冲突,继续安装;--legacy-peer-deps :忽视冲突,继续安装(--force :无视冲突,强制获取远端资源((1)在每次安装依赖包时,在后面加上。原创 2024-01-23 17:31:24 · 841 阅读 · 1 评论 -
vue执行npm install报错: Can‘t find Python executable “python“, you can set the PYTHON env variable
1、全局更换npm镜像源,更换后在安装node-sass。原创 2024-01-17 17:45:03 · 446 阅读 · 0 评论 -
No Babel config file detected for D:\\web\\project\\05-vue\\vue_demo\\src\\components\\test.vue.
1、 在package.json添加requireConfigFile:false,改语句整体禁用了babel,babel.conig.js会失效。2、将运行项目的根目录设置为打开项目的根目录。3、将babel的配置方式修改为相对文件配置。原创 2024-01-17 17:37:56 · 390 阅读 · 0 评论 -
[vue/valid-v-model]‘v-model‘ directives require the attribute value which is valid as LHS.
【代码】[vue/valid-v-model]‘v-model‘ directives require the attribute value which is valid as LHS.原创 2024-01-16 11:07:15 · 490 阅读 · 0 评论 -
reduce求和方法
【代码】reduce求和方法。原创 2024-01-12 10:10:35 · 731 阅读 · 0 评论 -
VUE+bpmn.js实现工作流
3、bpmn汉化,创建defaultXmlStr.js、customTranslate.js和translations.js文件,可从网上下载,也可自行新建,目录如下。2、配置axios,在main.js中引入axios。3、构建一个简单的vue页面。1、安装bpmn.js。原创 2024-01-11 16:37:57 · 953 阅读 · 0 评论 -
VUE---安装开发者调试工具(Vue.js Devtools)
a、在极简插件页面选择Vue.js.devtools,选择获取。d、点击详细信息,勾选允许访问文件URL。c、在扩展中查看,有如下则表示安装成功。打开一个vue页面,在开发者工具中,有如下tab页签,即代表安装成功。下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件。2、edge浏览器:下载。→添加→插件详情允许访问文件。原创 2024-01-09 11:58:32 · 785 阅读 · 0 评论 -
code ENOVERSIONS
从git库拉取项目,本地npm i安装依赖包时,某个依赖包报No valid versions avaliable for XXX。是因为此时,源里没有对应版本的依赖包,可手动安装改依赖。原创 2024-01-08 17:02:51 · 502 阅读 · 1 评论 -
vue获取特定年份到现在的所有年份
若想从当前年份倒序排列,将unshift改为push,即可。获取2020年,到现在的所有年份,并按递增顺序排列。原创 2024-01-05 10:31:43 · 482 阅读 · 1 评论 -
el-datepicker选择从今天开始七天后的日期
在pickerOptions中,添加以下代码即可。假设,今天是1.4号,只能选择7天后日期。原创 2024-01-04 17:46:31 · 409 阅读 · 1 评论 -
el-datepicker只能选择当前日期开始的七天
el-datepicker只能选择当前日期开始的七天,在pickerOptions中添加如下代码即可。原创 2024-01-04 18:00:03 · 483 阅读 · 1 评论 -
SHA不一致
SHA不一致是指在npm i 时,会报npm ERR!将这个依赖包删除,再重新构建项目,或将整个package-lock.json文件全部删除,重新构建。根据报错的sha值在package-lock文件中找到对应的依赖包。原创 2024-01-05 16:36:31 · 496 阅读 · 1 评论 -
vue重复点击路由报错
【代码】vue重复点击路由报错。原创 2024-01-03 17:36:43 · 609 阅读 · 1 评论