Vue 技术栈
文章平均质量分 68
主要涉及vue相关的知识记录学习,比如vue的核心知识、数据驱动、组件化、深入响应式原理、编译、扩展、Vue-Router、Vuex、Nuxt、Element UI、webpack、ESLint,vue-devtools等等vue相关的知识。
凯小默
专注前端领域开发。
展开
-
vuecli3 执行 npm run build 打包命令报错:TypeError: file.split is not a function
这样就导致了报错,懒加载多的时候在开启,通过合并的方式处理 chunk,以减少请求数,一个的时候没必要。我排查了一下,模拟代码如下:在打包的时候用了。原创 2024-02-04 14:28:37 · 1011 阅读 · 0 评论 -
vue 里 props 类型为 Object 时设置 default: () => {} 返回的是 undefined 而不是 {}?
这样写会被解析器认为是一个代码块,而不是一个对象字面量。今天遇到个小坑,就是 vue 里使用 props 传参类型为 Object 的时候设置。发现 infoData 是 undefined。之前我的写法如下,这种是可以的。原创 2024-01-17 18:21:03 · 1453 阅读 · 0 评论 -
vue里使用elementui的级联选择器el-cascader进行懒加载的怎么实现数据回显?
/ 然后遍历 areaList 找到对应的 areaSeq 获取地区列表。// 遍历一级选择框,把二级选择框的数据放在一级的children属性上。// 先加一个最后层级的地区用于展示,最后在删掉。// 给当前areaCode添加children。,需要我们自动展开到天河区的下一级,效果如下。每一层级的数据,然后组成一个树。// 从后面开始遍历组成一个树。我的实现思路就是拿到。// 点击自动下拉出来。// 先初始调用一次。// 删掉最后选中的。原创 2023-09-22 18:51:24 · 2505 阅读 · 0 评论 -
vue里使用animated-scroll-to代替原生滚动实现兼容ie的平滑滚动定位
/ hasScrolledToPosition为false:表示滚动动画被用户中断,或者通过另一个“animateScrollTo”调用。这里需要我们在脚手架的配置文件里面添加下面配置进行依赖包的编译。// hasScrolledToPosition为true:表示页面滚动到所需位置。这里我们需要的是锚点定位到哪个元素,然后滚动到相应的位置,我们可以使用。// 使用animated-scroll-to代替原生滚动。在看 andt 文档的时候了解到的。// 垂直滚动距离顶部的距离。这里建议使用v2版本的。原创 2023-04-03 12:15:25 · 673 阅读 · 0 评论 -
vuecli项目里面怎么查看webpack配置了什么?
用编辑器打开js,我们就能看到配置的东西了。可以自己在文件用一个变量接收这个对象即可。查看生产环境的webpack配置。查看开发环境的webpack配置。原创 2023-04-01 20:24:59 · 1603 阅读 · 0 评论 -
TypeScript+Vite4+Vue3+Pinia+Vant+Axios H5项目环境搭建
如果要删除可以使用下面命令。原创 2023-03-19 16:45:14 · 628 阅读 · 0 评论 -
vuecli3 项目在 ie11 下面白屏报错:SCRIPT1002: 语法错误
SockJS是一个浏览器JavaScript库,提供类似WebSocket的对象。SockJS为您提供了一个连贯的、跨浏览器的Javascript API,它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域的通信通道。如果失败,它可以使用各种特定于浏览器的传输协议,并通过类似WebSocket的抽象来呈现它们。安装好之后最后记得清除一下 ie11 浏览器的缓存,不要像我一样,安装好后排查了半天,最后发现是缓存问题,ie 浏览器还是用的。然后定位的位置如下:说明。这个库的版本目前使用的是。原创 2023-03-15 17:19:08 · 916 阅读 · 0 评论 -
vue里使用driver.js实现项目功能向导指引
https://github.com/kamranahmedse/driver.js 是一个轻量级、无依赖的原生JavaScript引擎,在整个页面中驱动用户的注意力,强大的、高度可定制的原生JavaScript引擎,无外部依赖,支持所有主流浏览器。突出显示单个元素高亮和弹出窗口定位弹出窗口还可以使用offset属性为弹窗位置添加偏移量创建功能介绍功能介绍在新用户入门时很有用,可以让他们了解应用程序的不同部分。您可以使用驱动程序无缝创建它们。定义步骤,并在你想开始展示时调用start。用原创 2023-03-06 17:45:55 · 2342 阅读 · 1 评论 -
vuecli3打包项目上线之后报错怎么使用本地的sourcemap文件定位调试?
我们先本地开启sourcemap的生成,生成之后找到对应的map文件,然后丢到包里,比如下面的我的就放到了nginx服务里面,在kaimo包下面。我们上线的时候一般都不会添加sourcemap文件,一方面为了加快构建速度,另一方面避免源码泄漏。所以有时出现报错的时候很难定位问题所在。点击就会报错,但是并没有指向什么组件报错,以及哪一行有问题。例子:比如我写了一个错误的代码,点击。点进去就是一整行看不懂的代码。然后我们将map文件的链接。那么要如何定位到问题所在?添加到里面去,步骤如下。原创 2023-03-02 19:11:23 · 1334 阅读 · 0 评论 -
Uncaught TypeError: Cannot redefine property: $router
externals 它配置项提供了阻止将某些 import 的包打包到 bundle 中的功能,在运行时再从外部获取这些扩展依赖。中配置 externals,或者去掉 cdn 的引入,直接用打包的。下面讲一下配置 externals 的方式。我们可以看到 vue-router 打包到 bundle 中了,然后我又加了cdn,这样就会多了一次。报这个错误的原因就是多次引入了。这个样我们就不会报错了。原创 2023-03-02 18:10:41 · 729 阅读 · 0 评论 -
vuecli3打包时开启了productionSourceMap为true却没有生成sourcemap文件?
今天我在开启的时候发现 vuecli3 打包时开启了 productionSourceMap 为 true 却没有生成 sourcemap 文件?打包之后:并没有发现生成 sourcemap 文件。这样我们就能正常生成了sourcemap文件了。定位导致的问题,我把一些优化的配置注释掉。优化代码,那么怎么解决这个问题?配置项,可以看到这个默认是。所以导致生成不了的原因就是。的,如果要生成就需要开启。插件导致,这里我用的是。注释之后,打包发现生成了。原创 2023-03-02 16:44:35 · 2058 阅读 · 0 评论 -
vue里怎么生成带有图标logo的二维码?
使用组件,这是用我 csdn 的博客网址为例,图片使用。实现效果如下:用微信扫一下就能调到我的 csdn 博客。避免 403 的情况,没有 403 可以不用这个。// 设置logo的大小为二维码图片缩小的3.7倍。// 二维码宽度 (不支持100%)// 二维码高度 (不支持100%)// 添加二维码中间的图片。// 容错率,L/M/H。原创 2023-01-31 15:15:14 · 1574 阅读 · 0 评论 -
html文件里怎么引用vue组件?
组件里写下面的代码,注意使用的是。html文件里面写下面的代码。原创 2022-12-12 20:20:32 · 7375 阅读 · 12 评论 -
vue里使用crypto-js实现AES加解密
"使用 key:kaimo313 对密码 123456 进行加密""使用 key:kaimo313 对密码 123456 进行解密"原创 2022-10-22 16:25:41 · 632 阅读 · 0 评论 -
【Vue 开发实战】拓展篇 # 48:结课测试和GitHub相关生态应用持续集成、单测覆盖率、文档发布、issue管理(完结)
【Vue 开发实战】学习笔记。原创 2022-10-01 23:38:21 · 214 阅读 · 0 评论 -
【Vue 开发实战】拓展篇 # 47:如何发布组件到npm以及nrm的介绍
nrm 可以帮助您轻松快速地在不同的NPM注册表之间切换,现在包括:NPM, cnpm,taobao,nj(nodejitsu)。使用nrm ls可以查看注册列表nrm ls将注册表切换到CNPM。原创 2022-10-01 17:18:12 · 211 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 45:如何构建可交互的组件文档让代码高亮的显示在页面
我们不走 webpack 的配置,使用下面一种方式。我们可以看到效果已经出来了,不过没有样式。【Vue 开发实战】学习笔记。'ECharts 入门示例'分析页添加这个高亮的显示。要实现这个代码的显示。原创 2022-09-30 17:11:07 · 900 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 44:如何高效地构建打包发布
这里只使用了柱状图相关的,我这里是 echarts5 的版本。使用 IgnorePlugin 删除所有语言环境文件。执行完成之后就会在打包目录生成一个。【Vue 开发实战】学习笔记。下面就着手优化上面的三个问题。这种方案需要细心的配置所需图标。可以在代码中加载一些语言环境。将需要的图标添加到这个里面。我们可以使用下面命令生成。我们可以看到,小了不少。原创 2022-09-29 17:36:18 · 522 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 42:如何定制主题及动态切换主题
并注入到您的 index.html 文件中,以便您可以在浏览器中更改 Ant Design 特定的颜色主题。此脚本生成颜色特定的样式/更少文件,您可以使用该文件在浏览器中动态更改主题。我们动态修改一下,在控制台将主题色改为粉色的,执行下面代码。这个 webpack 插件用于生成特定颜色的。但是这个我们不安装该依赖,主要原因还是版本。报错,有兴趣的可以看看我刚刚提到的文章。【Vue 开发实战】学习笔记。插件:里面的代码直接复制。我们可以看到主题色就改变了。具体的配置看文档就行。我们可以修改一下写法。原创 2022-09-28 17:13:26 · 2714 阅读 · 2 评论 -
使用antd-theme-webpack-plugin报错Error LessError: Cannot find module ‘antd/lib/style/themes/default.less
文件的 362 行使用了。所以问题就定位到了这个文件,而这个文件所在的包是。的代码,当做我们的自定义插件,然后自己主动安装。,需要我们独自分离这两个包,因为我们安装的是。配置里的引用自己定义的插件,其他不需要改动。注释掉了,所以断定是这个依赖的版本有问题。文件,我们可以去全局搜索哪里使用了。插件:里面的代码直接复制。启动服务就报错了:错误如下。我的做法是自己复制一份。启动服务,就没有报错了。原创 2022-09-28 16:44:41 · 3922 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 41:如何管理系统中使用的图标
/ 使用 vue-svg-loader 时 Logo 是函数式组件。// 没有使用 vue-svg-loader 时 logo 是路径。效果如下,使用起来都是比较方便的,都是转为了 svg 元素。【Vue 开发实战】学习笔记。在 404 页面里面引入图标。原创 2022-09-27 20:48:16 · 366 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 40:自己封装一个支持自动校验的表单项
自定义或第三方的表单控件,也可以与 Form 组件一起使用。提供受控属性 value 或其它与 valuePropName-参数) 的值同名的属性。提供 onChange 事件或 trigger-参数) 的值同名的事件。不能是函数式组件。原创 2022-09-27 18:02:47 · 920 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 39:创建一个分步表单
【Vue 开发实战】学习笔记。第二步:填写密码提交。// 以载荷形式分发。// 以对象形式分发。原创 2022-09-27 16:29:49 · 1375 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 38:表单初始数据、自动校验、动态赋值
ant design vue 的表单设计模式是自动校验不能使用双向绑定,而是将数据托管给 form,form 就像一个黑盒,里面的数据不会影响到其他的数据,如果需要数据同步到其他组件,需要调用 form 提供的 api 进行获取。v-decorator 指令什么都没做,就是一个标志位。便于form去劫持数据。【Vue 开发实战】学习笔记。原创 2022-09-27 10:48:31 · 856 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 37:创建一个普通表单
在基础表单添加下面基础代码,里面是手动校验的方式,这种方式相对来说还是要写很多代码去校验,下一节采用自动校验的方式去处理。【Vue 开发实战】学习笔记。"必须大于5个字符""必须大于5个字符"原创 2022-09-27 09:48:18 · 445 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 36:如何与服务端进行交互(Axios)
windows 需要安装 cross-env 才能拿到参数。我们使用一个不存在的 api 测试一下。【Vue 开发实战】学习笔记。'ECharts 入门示例'里面使用 jsx 的语法。原创 2022-09-27 00:21:56 · 380 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 35:如何高效地使用Mock数据进行开发
我们通过 mock 数据来进行开发,比如下面的图表数据来自我们的 mock 数据调用接口。需要清除缓存,不然每次都是一样的数据,可以看这个状态是否是 304。【Vue 开发实战】学习笔记。'ECharts 入门示例'原创 2022-09-26 14:15:43 · 378 阅读 · 0 评论 -
Proxy error: Could not proxy request xxx from localhost:8080 to http://localhost:3000(ECONNREFUSED)
的意思就是:ECONNREFUSED(连接被拒绝):无法建立连接,因为目标机器主动拒绝了它。这通常是由于尝试连接到在外部主机上不活动的服务造成的。我们可以将 target 端口 3000 改成跟起的服务一样。里的 devServer 的 proxy 时报错,错误如下。在 mock 数据的时候,配置。,都是 8080 端口即可。原创 2022-09-26 11:43:49 · 8318 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 34:如何在组件中使用ECharts、Antv等其他第三方库
这里我们使用 echarts 为例在项目里面添加 echarts 库。// 基于准备好的dom,初始化echarts实例。// 基于准备好的dom,初始化echarts实例。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。【Vue 开发实战】学习笔记。原创 2022-09-26 10:33:20 · 404 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 33:更加精细化的权限设计(权限组件、权限指令)
组件式相对来说比较灵活,但是需要用的都要嵌套一层。指令的缺点就是如果权限是动态的,就不好处理,具体可以根据业务选择。实现两种方式实现权限组件的控制,比如下面两个地方的按钮控制,如果是user用户,就没有权限控制。【Vue 开发实战】学习笔记。原创 2022-09-26 01:22:35 · 354 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 32:如何使用路由管理用户权限
菜单也是根据权限进行展示,比如是user用户没有表单的权限访问。访问没有权限的路由跳转到403页面。【Vue 开发实战】学习笔记。原创 2022-09-25 23:41:47 · 288 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 31:如何将菜单和路由结合
【Vue 开发实战】学习笔记。SiderMenu.vueSubMenu.vue路由配置参考https://github.com/vueComponent/ant-design-vue/blob/1.4.0/components/menu/demo/SubMenu.vue原创 2022-09-25 23:05:54 · 337 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 30:实现一个可动态改变的页面布局
【Vue 开发实战】学习笔记。完成下面的一个布局,效果如下SettingDrawer 抽屉配置Ant Design Vue helperant-design-vue-helper 是 Ant Design Vue 的 VS Code 扩展。可以自己安装 vscode 的扩展。https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper原创 2022-09-25 00:05:01 · 1256 阅读 · 0 评论 -
vue里使用docx-preview预览docx文件
/ boolean:如果为true,图片、字体等会转为base 64 URL,否则使用URL.createObjectURL。// boolean:如果为true,解析前会从 xml 文档中移除 xml 声明。// boolean:启用文档更改的实验性渲染(插入/删除)// boolean:启用围绕文档内容的包装器渲染。// string:默认和文档样式类的类名/前缀。// boolean:禁用页面的渲染宽度。// boolean:启用额外的日志记录。// boolean:禁用字体渲染。原创 2022-09-23 17:38:54 · 17313 阅读 · 26 评论 -
【Vue 开发实战】实战篇 # 29:如何设计一个高扩展性的路由
只需调用 start() 和 done() 来控制进度条。【Vue 开发实战】学习笔记。设计嵌套路由跟文件夹匹配。安装 nprogress。原创 2022-09-22 18:07:57 · 224 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 28:如何自定义Webpack和Babel配置
这个问题有下面两种方式:第一种是降低less版本,另一个是配置css的 less-loader,我们使用第二种。我们可以看到小了很多,但是这样还是很不方便,需要每个都这样去引入单个组件的东西。我们按照文档上的添加babel配置,修改。如果你使用了 babel,那么可以使用。重启下服务,我们可以看到效果是一样的。我们可以看到全局注册所有组件会很大。查看 vuecli 的 官网配置。【Vue 开发实战】学习笔记。我们可以使用到的时候在引入。文件,添加下面的配置。文件里的引入组件方式。原创 2022-09-22 12:09:02 · 731 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 27:使用Vue CLI 3快速创建项目
安装 ant-design-vue moment 库。【Vue 开发实战】学习笔记。原创 2022-09-22 01:09:50 · 179 阅读 · 0 评论 -
【Vue 开发实战】实战篇 # 26:Ant Design Pro介绍
ANT DESIGN PRO:开箱即用的中台前端/设计解决方案。【Vue 开发实战】学习笔记。原创 2022-09-22 00:52:48 · 845 阅读 · 0 评论 -
【Vue 开发实战】生态篇 # 25:单元测试的重要性及其使用
测试间谍是一个函数,它记录所有调用的参数、返回值、this 的值和抛出的异常(如果有的话)。有两种类型的间谍:一些是匿名函数,而另一些则封装了被测系统中已经存在的方法。【Vue 开发实战】学习笔记。原创 2022-09-21 14:09:50 · 298 阅读 · 0 评论 -
vue里使用虚拟列表处理element-ui的el-select选择器组件数据量大时卡顿问题
当我们使用el-select选择器下拉数据很大的时候,会出现页面卡顿,甚至卡死的情况,用户体验很不好。我目前采取的方案是使用虚拟列表的方式去处理这个问题。数据获取完毕:点击输入框:我们可以看到 2 万条数据只展示了 30 条。我们滚动找到 kaimo-666,选择它我们再次点击输入框,我们以及定位到了 kaimo-666 这个位置另外拓展了点击项目跟输入框数据改变的事件我基于 跟 实现了下拉虚拟列表,解决下拉选择框数据量大时卡顿问题。代码地址:https://github.com/kaimo31原创 2022-09-20 16:24:10 · 5944 阅读 · 2 评论