草庐IT

vue-elementul

全部标签

webpack与vue-cli合并配置,打包生产环境代码时如何删除所有的console.log、代码注释和debugger

本文基于vue-cli5.0.0,webpack5.0,TerserWebpackPlugin最近公司项目开发上线后,发现控制台有很多当时测试时打印的信息。但是如果手动删除然后打包的话工作量太大,而且不利于以后的维护和debugger。所有必须通过webpack打包时自动帮我们删除console和注释。第一步上网找到webpack关于优化console.log语句的插件---------uglifyjs-webpack-plugin,但是查看npm库后发现这个库很久没更新过怀疑可能不适配webpack5 最后在webpack官网找到这个插件TerserWebpackPlugin 接下来就是下载

Vue3自定义简单的Swiper滑动组件-触控板滑动&鼠标滑动&左右箭头滑动-demo

代码实现了一个基本的滑动功能,通过鼠标按下、鼠标松开和鼠标移动事件来监听滑动操作。具体实现逻辑如下:在 onMounted 钩子函数中,我们为滚动容器添加了三个事件监听器:mousedown 事件:当鼠标按下时,设置 control.isDown 为 true,记录鼠标起始位置 control.startX 和滚动条位置 control.scrollLeft。mouseup 事件:当鼠标松开时,设置 control.isDown 为 false,表示鼠标已经抬起。mousemove 事件:当鼠标移动时,如果 control.isDown 为 true,则计算鼠标的滑动距离 walk,并将滚动容

Vue+Axios发送网络请求,跨域问题和配置方法

Axios网络请求Axios这是一个基于promise的网络请求库,作用于node.js和浏览器中在实际开发中,前端页面所需要的数据往往需要从服务器获取Axios在浏览器端使用XMLHttpRequest发送网络请求,并能够自动完成JSON数据的转换安装npminstallaxios文档https://axios-http.cn使用在main.js或者需要的组件中导入importAxiosfrom'axios'使用created:function可以在组件被创建时调用其中的方法,mounted:function函数是在组件被渲染到页面上时调用exportdefault{created:func

vue + video.js 加载多种视频流(HLS、FLV、RTMP、RTSP)

起因:由于需要在一个项目内接入多种常用的视频流,所以接触到video.js,这里就做个记录。框架:vue2+video.js+videojs-contrib-hls+videojs-flvjs-es6+videojs-flash+video-js.swfvue安装就不讲了,直接从项目开始了。第一步:安装依赖//video.jsnpminstallvideo.js//安装hls,用于播放HLSnpminstallvideojs-contrib-hls//安装flv,用于播放FLVnpminstallvideojs-flvjs-es6npminstallflv.js//安装flash用于播放RTM

Vue3 关于 provide、inject 的用法

前言:在前端项目中牵扯的最多的莫过于组件之间的传值了,除了最最常用的props和emit,其实在Vue中还额外提供了另外几种方法。今天分享一种组件之间通信的方法。一.场景再现先别着急考虑标题这个api的含义。在这里我先动手写一个比较常见的场景。所对应的组件内部代码比较简单,这里我就不展示了,逻辑上就是这三个组件层层引用。所对应的页面效果如下:如上图,这是一个在项目中很常见的一个场景,三层嵌套的组件。(其实还有深层次的嵌套,目前我们拿三层嵌套举例足矣)ok,你现在的需求是:在爷爷组件内需要提供一个字符串数据“韩振方”去提供给儿子组件使用。聪明的你肯定想到了props,废话不多说,我们直接上手。二

Docker 方式 部署 vue 项目 (docker + vue + nginx)

1.安装好nginx。2.把vue项目的源码克隆到确定目录下。用git管理,所以直接gitclone到既定目录就行了。如我的目录是:/root/jiangyu/projects/gentle_vue/gentle_vue_code。3.项目打包:npmrunbuild复制会自动生成dist文件夹。4.在任意目录下新建文件dockerfile。内容如下:#设置基础镜像FROMnginx#定义作者MAINTAINERjiangyu#将dist文件中的内容复制到/usr/share/nginx/html/这个目录下面COPYdist//usr/share/nginx/html/复制5.构建镜像:#-

Vue openAi

1、提示由于国内注册https://api.openai.com比较麻烦,直接购买的第三方接口和key淘宝购买,几块钱1个月3、自己娱乐够用2、前端框架Vant移动端使用axios3、创建拦截器,api/request.js/**@Descripttion:文件说明*@version:0.0.1*@Author:pengshuai*@Date:2023-11-0110:39:22*@LastEditors:PengShuai*@LastEditTime:2023-11-0210:33:28*/importaxiosfrom'axios'//创建axios实例constservice=axios

Vue + element ui 实现后台数据渲染到下拉框选项中,同时将input框与下拉框联动,select选定之后,input显示对应的值

实现过程:使用element的select以及input输入框在data中定义一个数组用于接收后台请求的数据method中定义一个方法,用于请求数据在created中实现显示:listMidMapping为封装好的get请求至此实现后台数据渲染到下拉框选项中,效果图:以上借鉴于:(21条消息)Vue+element实现动态显示后台数据到options上_LyCat_00的博客-CSDN博客_vue动态显示数据https://blog.csdn.net/weixin_43853746/article/details/119112758?ops_request_misc=&request_id=&

vue项目打包流程、反向代理Nginx的使用、内存溢出导致打包失败

目录前言参考文章正文1.打包前的配置工作做反向代理的原因(Vue项目打包后Proxy失效的问题):内存溢出导致打包失败参考文章第一步:执行命令安装内存扩展插件fix-memory-limit第二步:执行fix-memory-limit脚本  第三步:执行打包2.Nginx使用前言突发灵感想学习下打包,第一反应是学习webpack,翻找一通后发现用不着webpack,因为vue有内置打包命令,配置好vue文件后在项目文件执行npmrunbuild即可!下方内容是我多方查找总结得出参考文章http://t.csdn.cn/rAjXzhttp://t.csdn.cn/DBju1http://t.cs

基于java+springboot+mysql+vue开发的外卖点餐系统 - 毕业设计 - 课程设计

文章目录源码下载地址项目介绍项目功能界面预览项目备注毕设定制,咨询源码下载地址源码下载地址点击这里下载源码项目介绍项目功能界面预览![在这里插入图片描述](https://img-blog.csdnimg.cn/f898481ccab3425baa7251793e86b120.png![在这里插入图片描述](https://img-blog.csdnimg.cn/709f51652aa0483fbf2aa047d1ac4d15.png项目备注1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用!2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信