VueJS
文章平均质量分 74
QC班长
CSDN程序员学院讲师,CSDN内容合伙人,全栈领域优质创作者,高级瑜伽导师-阿斯汤加瑜伽练习者,透过IT看世界!
展开
-
Vue3.2.33、 VueCLI4.5.0打包 chunk-vendors.js 文件过大解决方案(compression-webpack-plugin)
最近项目发布到公网服务器,发现首次打开加载时太慢了,查看js文件发现chunk-vendors.js太大了,于是想着优化,发现了其中一种方案是使用压缩插件compression-webpack-plugin,压缩打包编译后的代码。将文件打包成 .gz 文件,然后通过 nginx 的配置,让浏览器直接解析 .gz 文件,可以大大提升文件加载的速度,浏览器可以直接解析 .gz 文件并解压。压缩文件格式介绍.gz:浏览器可以直接解析并解压。.br:BR 文件是使用 Brotli(一种开源数据压缩算原创 2022-04-28 22:37:32 · 3325 阅读 · 0 评论 -
Vue3.2.31报错ESLint: ‘v-model‘ directives require no argument.(vue/no-v-model-argument)解决方法
最近在升级前端框架,又出现新问题,记录下。ESLint: 'v-model' directives require no argument.(vue/no-v-model-argument)这个错误出现在Vue3中,我绑定value这个属性,对于input标签来说,其实是v-model默认绑定的就是value,所以不需要再写一个value,开启了Eslint , 报错如下解决方法:把v-model后面那个value去掉,就好了...原创 2022-04-05 11:04:14 · 9777 阅读 · 0 评论 -
Vue3.0.0、VueCLI4.5.0启动运行时报错Cannot read properties of undefined (reading ‘NormalModule‘)解决方法
最近升级前端框架尝鲜,用VueCLI4.5.0脚手架工具创建项目,然后在开发工具中把项目的node_modules文件夹删除,package-lock.json文件删除后,重新npm install,没什么问题。然后启动就报错了ERRORTypeError: Cannot read properties of undefined (reading 'NormalModule')NormalModule属性未定义,缺少了某些了依赖然后只能用排除法逐个排出问题,我又用了vue脚手架vue c..原创 2022-01-25 16:35:27 · 18576 阅读 · 7 评论 -
Vue3使用element-plus1.3.0版本的el-menu菜单组件引入动态渲染icon图标时,图标组件刚好是Menu时报错,菜单不显示的解决方法
目前在升级前端框架,UI组件element-plus升级到了目前最新的1.3.0beta8版本,图标也换成了官方提供的SvgIcon图标,官方提供了组件导入的方式使用图标。而我的图标是全局导入的,默认使用官方的命名。在菜单栏使用图标,并且是动态渲染的,刚好用到图标组件名称是Menu时,点击带有这个图标名称的菜单,就出问题了,导致其他菜单不显示。下面是在main.js中全局引入图标的方法:import {createApp} from 'vue'import App from './App..原创 2022-01-25 15:39:59 · 8299 阅读 · 4 评论 -
Vue3使用element-plusUI解决菜单高度自动自适应的问题,使用CSS3的vh单位
最近在升级Vue的前端项目,把所有的框架升级到较新稳定版,前端UI用的elementUI,也升级到了element-plus,菜单组件的高度设置了height:100%也无效,于是设置了min-height:800px可以用,但我想让它占满屏幕高度,于是查询到了css3的单位属性:vw 、vh。vm、vh、vmin、vmax是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,单位 1,代表类似于 1%。 视窗(Viewport)是你的浏览器实原创 2022-01-20 18:07:23 · 11275 阅读 · 4 评论 -
Vue3安装最新版sass-loader node-sass报错解决方法
最近在升级前端项目框架,之前的前端框架是Vue2.0构建的,最近打算全部都升级到最新版的,nodejs升级到了目前最新版v16.13.2,Vue ^3.0.0,VueCLI~4.5.0,然后在升级SASS预处理器时执行安装命令报错了执行vue-loder官网的安装命令npm install -D sass-loader node-sass报错如下:大概意思是依赖包冲突了,VueCLI4版本用的webpack版本依赖和sass-loader用的webpack依赖冲突,需要更新依赖或者降原创 2022-01-18 15:08:42 · 3713 阅读 · 0 评论 -
VueJS如何使用axios.post()或者axios.get()请求下载文件、音频、视频?并且显示下载进度,后端是SpringBoot
前端如何使用axios下载文件呢?最近遇到了前端下载音频及文件的功能,记录下,因为通过传统的window.location.href=xxx链接下载不能携带Token参数,后端无法验证请求放行,所以就用了axios。前端下载需要注意的是axios.interceptors.request的拦截器不要设置响应超时设置,不然由于网速慢,文件还没下载完就中断了。下面是axios的HTTP请求的统一封...原创 2019-12-08 22:52:48 · 3098 阅读 · 2 评论 -
js字符串数组转数字数组,并去掉最后一个元素
js把字符串数组转数字数组let menuIds=["1,2,3","3,6,7,4,2"2,5,3"]//测试数据let newArr = [];//初始化数组if (Array.isArray(menuIds)) { for (let o of menuIds) {//循环数组 let menuId = o.split(",").map(Number...原创 2019-11-19 23:48:04 · 1076 阅读 · 0 评论 -
VueJS Element UI自定义控件:Cascader级联下拉框,解决查看时树形数据回显
下拉框在业务开发中还是很常用的,比如下拉菜单,上级组织机构选择,各种分类等等。在用到Element UI的Cascader 级联选择器下拉框组件时,不能满足我的需求,就在此基础上自定义了控件。存在的问题:1、Element UI官方的级联下拉控件el-cascader选择数据后,被选中的数据是数组形式的,例如:[7,6,1],但在数据库中保存时,一般只保存ID,不保存数组。所以就需要我们...原创 2019-11-16 13:10:33 · 5502 阅读 · 0 评论 -
关于前后端分离项目的 VueJS前端Token 存储问题,如何做更安全
关于Vue前端token的存储问题:Vuex的store,localStorage,sessionStorage三者都可以存记录登录状态一般都是token,例如:存在token说明已经登录,不存在就没登录->跳转登录页面每一次请求都携带token在后台验证,如果token合法,没过期则返回请求的数据,否则返回token错误/过期等状态码。至于浏览器开发调试手动改 你阻止不了其他...原创 2019-10-15 13:08:50 · 5839 阅读 · 0 评论 -
Mac(版本10.15 (19A583))执行npm install xxxx报错gyp类错误解决方法
最近新装了MacOS的最新版10.15,重新安装开发环境,nodejs安装的是最新的,再用npm 安装包时总会报 gyp ERR!错gyp ERR! configure errorgyp ERR! stack Error: EACCES: permission denied, mkdir解决方法,在命令后加上--unsafe-perm例如sudo npm insta...原创 2019-10-12 13:31:41 · 3895 阅读 · 0 评论 -
Mac OS 控制台使用Gulp报错Cannot read property 'apply' of undefined
gulp -vCLI version 3.9.1Local version 4.0.0这里的CLI版本是什么意思?不懂?但是npm上发布的gulp-cli的版本最新是2.0.0,执行gulp命令后才会出现下面的错误在gulp的github的issue里找到解决方案是全局安装下gulp-cli:sudo npm i gulp-cli -g ...原创 2018-11-26 07:57:57 · 1551 阅读 · 0 评论 -
最新Vue2.0+组件开源项目库集合
是最新的由OpenDigg整理并维护的Vue相关开源项目库集合。原文地址:https://github.com/opendigg/awesome-github-vue内容UI组件开发框架实用库服务端辅助工具应用实例Demo示例UI组件element ★13489 - 饿了么出品的Vue2的web UI工具套件Vux ★8133 - 基于Vue和WeUI的组件库iview ★6634 - 基于 Vu...原创 2018-07-16 09:55:10 · 5066 阅读 · 0 评论 -
nodejs 前端项目编译时内存溢出问题的原因及解决方案
现象描述昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory。并且打包速度相当慢,估计项目过大了。解决方案一:通过 package.json 中的 "build" 加大内存/* ...原创 2018-07-17 16:52:16 · 41835 阅读 · 5 评论 -
npm 安装vue 报错Failed at the chromedriver@2.37.0 install script 'node install.js'
原因一般是下载源被封了,我们连接淘宝的下载源下载:npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver原创 2018-04-03 14:00:47 · 14895 阅读 · 0 评论 -
VueJS2.0 生命周期和钩子函数的一些理解
所谓“生命周期”,是指对象从构造函数开始执行(被创建)到被gc回收销毁的整个存在的时期。“钩子”就是在某个阶段给你一个做某些处理的机会。vuejs2.0的生命周期可以总共分为8个阶段:beforeCreate(创建前),created(创建后),beforeMount(载入前),mounted(载入后),beforeUpdate(更新前),updated(更新后),beforeDestroy(销毁...原创 2018-02-24 10:57:46 · 677 阅读 · 0 评论 -
nodejs更新package.json中的dependencies依赖到最新版本
如果手动去修改dependencies中各个包的版本号,那就太麻烦了,借助npm-check-updates工具可以很方便的将package.json中的依赖包版本号更新为最新版本。1、安装:npm install -g npm-check-updates使用:2、检查package.json中dependencies的最新版本:ncu3、更新dependencies到新版本:ncu -u更新全部...原创 2018-03-02 09:55:24 · 8295 阅读 · 1 评论 -
Net::ERR_INCOMPLETE_CHUNKED_ENCODING问题跟踪,顺藤摸找出解决方法
最近项目用Nginx做反向代理,项目放在Linux上没出来数据,在Windows server上可以出来,于是加载时打开了浏览器控制台,看到 Net::ERR_INCOMPLETE_CHUNKED_ENCODING,从字面上理解的话应该是响应被截断了。进一步深入可能是Nginx的配置问题, 找到Nginx的日志文件查看,看到了报错原因, open() "/usr/local/nginx-1.8.0原创 2018-01-19 11:21:17 · 18341 阅读 · 0 评论 -
vuejs 页面跳转和跳转到外链(其他外站)
1、vuejs 是单页面应用,应用内的跳转,可以用router-link标签 router-link tag='a' :to="'/'" >跳转demorouter-link>router-link tag='span' to="#" @click.native="handleEditPassword">span class="a-inner">i class="el-ic原创 2017-12-27 11:21:42 · 112464 阅读 · 0 评论