紫菀檀ss-CSDN博客

原创报错 - If you are using vue-loader@＞=10.0, simply update vue-template-compiler...

昨天在拉代码下来安装依赖成功后，对项目进行编译启动，结果报错- [email protected] (E:\项目xxx-mobile\node_modules\vue\dist\vue.runtime.common.js)- [email protected] (E:\项目\xxx-mobile\node_modules\vue-template-compiler\package.json)

2023-02-15 16:04:59 9678 1

原创 vue3+ts - element-plus封装上传文件图片组件

近期做到的项目中有涉及到上传图片上传文件的需求，因为是pc管理后台，用到了element-plus框架，所以我也一起使用element-plus中的上传图片上传图片功能，并对它进行封装成一个组件，方便在多个地方使用。

2023-02-07 14:23:51 6056 2

原创 vue3+ts - wangeditor 富文本编辑器的使用

近期开发的一个项目有涉及到富文本编辑器的使用，所以在这里总结一下。对比了一下网络上的多种富文本框组件，发现wangeditor组件相对来说功能比较齐全也比较简单，所以在这里我分享一下这个的使用方法。

2023-02-06 17:31:07 4805 1

原创 vue3+ts - 折线图和柱状图综合使用

近期，在做项目的时候有涉及到柱状图和折线图共同放在一个图表里面的效果，所以在这里简单总结一下，有需要的朋友们可自行参考。

2023-02-06 16:20:34 778

原创 vue3+ts - 折线图的使用

近期，在做项目的时候有涉及到折线图的模块，所以在这里简单总结一下，有需要的朋友们可自行参考。说到折线图这种图形模块，我们很自然的就想到了echarts 插件了，里面有格式各样的图形效果，可供我们使用。

2023-02-06 16:07:13 946 1

原创 vue/js - 关于 echarts - 柱状图的使用

近期，在做项目的时候有涉及到柱状图的模块，所以在这里简单总结一下，有需要的朋友们可自行参考。说到柱状图这种图形模块，我们很自然的就想到了echarts 插件了，里面有格式各样的图形效果，可供我们使用。

2022-11-07 11:49:20 469

原创报错 - Error in render: “TypeError: Cannot read properties of null (reading ‘distributeFlag‘)“

今天在修复同事的测试bug的时候遇到 Error in render: "TypeError: Cannot read properties of null (reading 'distributeFlag')" 这样的报错，这种报错的大概意思就是浏览器读取 distributeFlag 这个字段的时候读取不到。一、报错二、报错原因及解决方法报错原因是因为浏览器（网页）无法读取到isdistributeFlag 这个字段，或者是无法解析这个字段，把它当作了null。然后查看代码我们会

2022-05-17 10:56:25 5936 1

原创 css - 给页面加渐变式蒙层效果

近期做了一个项目，需要根据ui图在内容和展开之间做一个渐变式蒙层效果，然后根据同事提醒发现css3里面的filter滤镜可以做到这个效果。一、效果图二、实现过程需要先将一个白色部分定位到需要做蒙层的地方，然后再对这块做蒙层效果。代码如下：...

2022-05-16 10:48:57 2183

原创报错 - 使用marked报错 marked__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function

今天在vue项目中需要用到 marked 插件来解析markdown类型的内容，发现直接使用默认的方式 import marked from 'marked' 导入提示这个报错： marked__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function，通过多次尝试解决，发现其实解决方法很简单，只需要将使用es6解析marked即可，即 import { marked } from 'marked' 。一、报错使用marked插件的

2022-02-22 15:11:10 7166 2

原创 vue3.0 - 报错Uncaught ReferenceError: exports is not defined

今天遇到了一个很奇葩的问题，就是在使用vue3.0的router的时候出现了 exports is not defined 的报错，尝试了很多方法都无法解决，后面看到一位大佬的文章说可以尝试着给router安装下一个版本npm install vue-router@next -D，当前我用的是"vue-router": "^4.0.0"，然后我安装之后就没有报错了，但是当我重新安装回 4.0.0 版本的时候，这个报错也不存在了，我还是没找到照成这个问题的原因所在。不过如果大家遇到了这个问题，可以通过我上

2022-02-14 14:27:27 6432 6

原创微信小程序 - 实现带滑块的进度条

应微信小程序项目需求，要实现一个带滑块并可左右滑动的进度条，看了小程序的文档，发现上面的progress组件无法满足需求，所以我自己写了一个，在这里总结一下。一、效果图二、实现逻辑功能实现的逻辑比较简单，这里简单说明一下：首先用一个标签将相关代码包裹起来，加上静态定位；画两条一模一样的线条，其中一条加上相对定位改变线条的颜色，动态设置它的宽度；画一个滑块，使用相对定位定到线条上面，给它加bindtouchmove事件，获取它距离左边的宽度，然后对应设置上去即可。三、相关代码1、

2021-12-08 11:58:52 2431 1

原创 vue - vuedraggable的使用以及处理兼容问题（拖拽无效问题）

在实现一个移动端项目的时候，根据产品需求，要实现一个既能增加删除又可以拖拽调换位置的效果，然后我使用了draggable组件，然后发现放到手机上的时候苹果(ios)手机可以正常使用，但是安卓手机（例如华为pro40）的有些是不可以正常拖拽、增加和删除，只能一开始正常操作两三个，然后后面就怎么点都没有什么反应。通过多次尝试和查找方法，最终找到了解决办法，我在这里总结一下。一、效果图二、拖拽及点击无效解决方法只需要在设置handle属性就可以了，vuedraggable的文档中有说明 optio

2021-10-20 18:26:59 7567 5

原创 vue - 报错 Uncaught TypeError: Cannot read property ‘install‘ of undefined

vue项目在线上打包的时候遇到了 Uncaught TypeError: Cannot read property 'install' of undefined 这样的报错，然后在本地可以正常打包。研究了一下发现是node-model包的问题，我在这里总结一下。一、报错二、解决方法删除node-model包，然后重新安装（npm i）就可以解决了。...

2021-10-20 17:49:10 5745 1

原创 vue - 实现省市区的级联选择

最近要实现一个pc端的省市区级联选择效果，省市区的数据都是使用的本地数据，实现起来逻辑会有一点复杂，我在这里总结分享一下，希望对大家有所帮助。一、效果图二、实现逻辑我这里的实现逻辑是先通过省份来获取城市，然后通过城市来获取区县，街道因为不是固定的，所以让用户自己输入。获取对应市区的逻辑是：每个省份、城市、区县都有唯一的编码，然后省份编码的前两位跟城市是一样的，通过截取的方式来筛选出城市，然后城市的前四位编码跟区县的是一样的，也同样通过截取的方式来筛选出区县即可。因为pc端我是使用了elemen

2021-10-20 11:16:59 4408 3

原创 vue3 - 将 axios 等方法绑定到原型上供全局使用

今天来说说在vue3 中如何将像axios这样的方法绑定到vue原型上供全局使用。我们用过vue2.x 都知道，在vue2.x中是通 Vue.prototype 来绑定的，像这样Vue.prototype.$toast = Toast。在vue3中取消了Vue.prototype，推荐使用globalProperties来绑定，所以下面我分享一下使用方式谦代码。PS：这里以axios为例，大家可根据需要稍做修改。一、设置全局在使用axios之前，要记得先安装axios，然后在main.js文件中

2021-08-31 16:50:06 957

原创 vue3 - 父子组件之间的传值

近期学习 vue3 的父子组件之间的传值，发现跟 vue2.x的父子组件之间的传值并没有太大的区别，我这边总结一下，希望对大家有所帮助。一、父组件向子组件传值父组件向子组件传值的时候，子组件是通过props来接收的，如果在子组件中要放到setup函数中使用的话，就要先通过props接收到传递过来的参数，然后以变量的形式将props传递到setup函数中使用。如下图所示：1、父组件传递方式2、子组件接收方式和使用3、效果图二、子组件向父组件传值 vue3中子组件向父组件传递值和

2021-08-31 11:35:04 11804 7

原创 vue3 - setup函数的使用（一）

这两天学习了一下setup函数的使用，学到了一些比较基础的使用，所以在这里总结记录一下。一、setup函数的特性1、setup函数在beforeCreate和created之前执行 setup函数执行于beforeCreate和created之前，也就是说setup函数里面无法使用data和methods方法中的数据。这里我们可以打印一下它们的执行顺序：由上图我们可以看出来setup函数比beforeCreate和created先执行。2、在setup函数中定义的变量和方法需要return

2021-08-27 17:05:48 6653

原创 vue - v-html的使用

近期在写需求的时候get到一个新的知识点，那就是使用 v-html 编译后台返回的富文本内容，使它可以正常显示到页面中。大家可能不知道，在富文本编辑的内容，最终都会变成了标签+内容的形式来保存的，所以在其它地方使用到这一内容的时候，它是以字符串的形式传递过来的，此时我们就需要用到 v-html 指令来将标签编译。一、举个例子这里举例是使用jsp实现了后台管理系统富文本编辑器，然后需要将在富文本编辑器中的内容返回给前端在移动端进行显示，如下图：后台接口返回的数据是这样的：以属性值的方

2021-08-26 14:03:47 1857

原创报错 - Failed to resolve component: rotuer-view at ＜App＞

在创建vue3项目的时候报了 Failed to resolve component: rotuer-view at <App>的错误，发现是我写错了单词，将 router-view 写成了 rotuer-view。一、报错情况二、报错原因及解决之所以报错是因为我写错了标签名，应该是router-view 而不是rotuer-view，所以只需要将rotuer-view改成router-view即可。...

2021-08-25 15:56:34 1249

原创报错 - 解决vue3报错：Cannot use ‘in‘ operator to search for ‘path‘ in undefined

在创建vue3的路由时，报了这样的错：Cannot use 'in' operator to search for 'path' in undefined，经过多次排查发现是我在路由文件里面用错了createWebHashHistory()方法，将它用成了变量。一、报错情况二、报错原因及解决报这样的错误是因为我在路由文件里用错了createWebHashHistory()方法，将它用成了变量，只需要将它写成方法即可解决问题。希望对大家有所帮助！！！...

2021-08-25 15:22:40 8985 3

原创报错 - 解决vue3报错：export ‘createRouter‘ was not found in ‘vue-router‘

最近在开始学习vue3，因为之前一直在使用vue2.x，然后在写vue3的时候会发现两者存在一定的差别，然后在练习的时候会出现各种各样的问题，在这里总结并且分享一下给大家。一、报错情况 "export ‘createRouter’ was not found in 'vue-router’ "export ‘createWebHashHistory’ was not found in 'vue-router’二、报错原因及解决办法如果看过我的上一篇文章大家应该能一眼就看出报错的原因了

2021-08-25 15:11:04 2911 1

原创 vue - vue3和vue2.x的区别(三)：路由的使用

今天来总结一下vue3和vue2.x的区别 - 路由的使用。用了很久的 vue2.x 之后再来使用 vue3 ，我们不难看出它们二者之间创建路由的方式是不一样的。一、安装 vue-router 在使用 vue-router 之前我们需要先安装一下依赖，要注意 vue2.x和vue3使用的依赖是不一样的，不然会报错 export 'createRouter' was not found in 'vue-router'// vue2.x的安装方式npm install vue-router --s

2021-08-25 14:53:24 1525

原创 vue - vue3与vue2.x的区别(二)：创建Vue应用实例

今天总结一下vue3与vue2.x的区别之创建Vue应用实例。在开发vue3的时候，大家会发现，vue3的创建Vue实例和vue2.x的其实是不一样的，vue2.x是使用 new Vue() 来实例化的，而vue3是用了Vue中的 createApp() 方法来实例化的。同时，它们在全局使用的框架注入方式也不一样，下面我来详细介绍一下。一、创建 vue3 应用实例 vue3 是通过使用 createApp() 这个API返回一个应用实例，它可以通过链条的方式继续调用其他的方法来实现全局使用。

2021-08-24 15:19:30 634

原创 vue - vue3与vue2.x的区别(一) ：目录结构不一致

今天总结一下vue3与vue2.x的区别之目录结构不一致，相对的也造成了一些问题的存在，比如打包项目之后打开出现白屏现象。一、目录结构不一致通过上图可以发现 vue3 的目录结构跟 vue2.x 还是有很大的区别的，特别明显可以看出 vue3 是没有 build 和 config 这两个配置文件夹的，然后 static文件夹在vue3 变成了 public文件夹，它们同样都是用于存放静态文件。二、造成的问题及其解决方法当我们直接打包项目之后，打开对应的html文件，我们会发现页面出现

2021-08-23 18:18:51 1736

原创 vue - 开始vue3项目的搭建

近期开始学习vue3，所以在这里记录一下，主要使用的是脚手架的方式搭建的项目。注意点：我这里是直接在vue2.x的基础上全局安装vue3脚手架的，达到vue2.x和vue3可以同时使用的效果，所以跟官网的安装介绍会有所不同。一、环境搭建1、安装node环境版本需要在8.9以上，包括8.9版本。可以使用 node -v 检查自己安装的node版本。2、搭建脚手架 vue-cli3.0 （全局安装）npm install @vue/cli -g可以使用 vue -V 检查是否安装成功。

2021-08-23 16:22:59 598 2

原创报错 - npm run dev 报错 Error: listen EADDRINUSE: address already in use :::8000(或者8080等等)

今天我来记录一下近期在实现一个项目的时候，发现运行npm run dev 一直报错： Error: listen EADDRINUSE: address already in use :::8000 npm ERR! [email protected] dev: cross-env NODE_ENV=online node build/dev-server.js发现这其实是因为端口被占用了，我们可以关掉被占用的端口，或者是换一个端口重新编译来解决这个问题。报错：报错原因及解决出现这种报错情况

2021-08-19 10:00:51 1444

原创报错 - 解决 Vue is not defined

近期在使用vue开发多页面时，发现页面会报 Vue is not defined 这样的错误，以至于页面直接崩了。这里我分享一下解决办法。一、报错二、解决在每一个多页面文件夹下面的html文件引入vue.js文件即可希望对大家有所帮助哦！！...

2021-08-09 10:13:57 8809

原创报错 - 解决 Assertion failed: new_time ＞= loop-＞time, file c:\ws\deps\uv\src\win\core.c, line 309

在运行项目的时候发现刚运行完成，然后成功的打开了浏览器之后就崩了，报了这样的错误：Assertion failed: new_time >= loop->time, file c:\ws\deps\uv\src\win\core.c, line 309，然后百度大家可以发现有些推荐的是同步时钟，这个对于一部分人或许是有用的，当然，在我这里是没有效果的哈，所以在多次查找的之后发现好像是因为node版本的问题，所以我改了一下：只需下载node.zip并替换安装NodeJS 14.4.0的文件夹中

2021-08-04 16:02:54 4516

原创微信小程序 - 使用 swiper 踩的坑

这里总结一下我在项目中使用 swiper 标签踩过的坑，轮播图 swiper标签不能用两层以上的view 标签进行包裹，不然是无效的。下面这个是有效的代码：

2021-08-04 11:53:15 271

原创 vue - keep-alive 的使用

当不希望组件被重新渲染影响使用体验，或者处于性能考虑，避免多次重复渲染降低性能，希望组件可以缓存下来，维持当前的状态，此时就可以用到 keep-alive 组件。keep-alive 主要用于保留组件状态或避免重新渲染。我们可以看到的现象：如果没有使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发 created 钩子，使得用户体验并不好。当然，使用这个组件的前提时页面的数据是保持不变的，不需要重新请求接口对数据进行更新。 keep-alive的生命周期：初次进入

2021-08-04 11:39:00 187

原创企微 - 使用jsdk的 openDefaultBrowser 实现打开默认浏览器

今天应项目需求，要使用企业微信的jsdk 写一个demo实现一进入页面就跳转默认浏览器的功能，一开始我直接使用的是wx.config来实现这个需求的，但是发现并不能实现这样的功能，跟大佬找了很多方法，但是都无法实现，后面才发现 wx.config 和 wx.agentConfig 是有很大的区别的，config 注入的是企业的身份和权限，而 agentConfig 注入的是应用的身份和权限。尤其是当调用者为第三方服务商时，通过config无法准确区分出调用者是哪个第三方应用，而在部分场景下，又区分严谨

2021-07-21 15:26:27 4039 5

原创报错 - 项目直接引入 .scss文件报错及解决方案

近期项目中直接使用了scss 发现报错了，这个导致的原因我到现在都不是很了解，只是大概知道是 node 的原因，不过解决方法已经找到了的。下面分享一下：一、报错./src/components/alert_tip/alert_tip.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!

2021-07-19 14:51:03 1911

原创解决 - 解决ios input 和textarea不能输入的问题

写移动端项目总有一些兼容性需要我们解决滴，就比如我现在遇到的问题：ios 无法正常在input和textarea上面输入我们需要的内容，而安卓手机是可以正常输入的，一点问题都没有。那么我现在就给大家分享一下如何解决 ios 上面的问题啦。解决方法：直接在标签中加入style="-webkit-user-select:text !important" contenteditable="true" 这些代码即可。这里举个栗子：<textarea id="test" styl

2021-07-19 14:36:25 2197

原创解决 - vue页面在iOS上滑动不流畅

近期一直在写移动端的项目，偶尔会出现一些手机不兼容的问题，比如下面我要分享的这个页面在安卓手机上面可以正常滑动，但是在ios手机上面滑动偶尔会卡顿。然后我在这里就分享一下我的解决方案啦。其实解决的方法很简单，只需要在 app.vue的全局样式中加入-webkit-overflow-scrolling: touch;就好啦。 #app{ -webkit-overflow-scrolling: touch; }希望对大家有所帮助哦！...

2021-07-19 14:28:18 1887

原创解决 - vue移动端项目在IOS上点击输入框失效，需要点击多次

近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题，一、导致这个问题发生的原因&emsp;&emsp;是因为我在这个项目种使用了 FastClick ，它的作用是解决移动端延迟300毫秒的问题。当使用FastClick 时，在ios上点击输入框，调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。二、解决方法修改一下 FastClick 的使用代码，如下：FastClick.proto

2021-07-19 14:19:59 954

原创报错 - npm run dev报错 JS stacktrace（Node内存溢出）

最近写的项目运行npm run dev 的时候经常报错，内存溢出，因为项目的体积太大了。由于出现的次数太多了，最终无法忍耐，找了一下解决方法，分享给大家参考，希望对大家有用。一、报错二、解决方法这里我介绍两种方法，大家可以选择其一使用哦。第一种、在node_modle下面的 .bind 文件夹里面修改一下文件（1）webpack-dev-server.cmd文件加入 “–max_old_space_size=2048”@IF EXIST "%~dp0\node.exe" ( "%~

2021-07-19 14:01:48 2504 1

原创报错 - Unable to preventDefault inside passive event listener due to target being treated as passive

近期写项目的时候遇到了 Unable to preventDefault inside passive event listener due to target being treated as passive 这样的问题，出现这个报错的情况是页面滑动卡顿问题，下面给大家分享一下我的解决方案，希望对大家有用。报错：Unable to preventDefault inside passive event listener due to target being treated as passive

2021-07-19 13:48:04 1447

原创报错 - Cannot find module ‘stylus‘

对近期遇到的 bug 总结一下解决方案。一、报错情况二、报错原因没有正确的安装stylus依赖三、解决方案重新运行以下两行代码即可: npm install stylus --save-dev npm install stylus-loader --save-dev 希望以上的解决方案对大家有用！...

2021-07-19 11:47:28 444

原创 js - 使用input标签实现上传文件夹和上传文件

最近做了一个项目，需要实现上传文件夹和批量上传文件的功能，发现input标签是可以实现这两个功能的，但是上传文件夹功能还不能兼容全部的浏览器，目前只有谷歌浏览器和Microsoft Edge可以实现上传文件夹的功能，其他浏览器会直接变成上传文件。实现上传文件夹的功能只需要在input标签中加入 webkitdirectory='true'即可，而 multiple='true' 表示可以上传多个文件，注意，这里指定是上传多个文件，目前的文件夹暂时不支持同时上传多个。下面举个例子：1、上传文件夹&l

2021-07-05 11:53:42 3358

原创 css - 关于IE8 不支持 border-radius 属性问题（圆角）的解决方法

最近在做几个pc端的页面的时候涉及到了各种浏览器的兼容问题，这里总结一下关于IE8 不支持 border-radius 属性问题（圆角）的解决方法。一、问题：IE8 不支持 border-radius 属性问题（圆角）二、解决方法使用 css pie.htc 就可以解决了。具体如下： /* 在css样式中引入 PIE.htc 文件 */ behavior: url(css/PIE.htc); border-radius: 50%;ps：PIE.htc文件可以直接去网页上下载

2021-04-06 15:01:54 1053

area-data.js

中国省-市-区 的级联数据

空空如也

中国省-市-区的级联数据