草庐IT

Vue-Instant

全部标签

Linux部署VUE项目

记录一次部署VUE项目的过程1.安装Nginx部署VUE项目之前,首先要部署一下Nginx,用Nginx来做代理转发一、安装教程1、官网下载地址:nginx:download2、下载教程:1)选择Stableversion版本下载到本地(该版本为Linux版本),下载完成后直接在本地解压后放入linux系统中2)在linux环境中使用命令下载:下载前:(1)安装依赖包:yum-yinstallgcczlibzlib-develpcre-developensslopenssl-devel (2)创建存放目录及下载解压安装包: 切换目录:cd/usr/local 新建文件夹:mkdir nginx

Vue实现面包屑功能(el-breadcrumb)

vue3+elementPlus实现面包屑功能文章后面附效果图数据结构首先展示一下数据基础结构红色框框是默认存在的数据,其他数据就是通过选中侧边栏菜单进行数据插入关键数据字段为path,meta准备侧边栏首先需要自己准备一个侧边栏这边就不进行讲解,上个效果图实现面包屑代码template>//面包屑组件,separator为分割线,具体可以去elementPlus官网查看el-breadcrumbseparator="/">divclass="breadcrumb-content"> //动画组件[官网链接](https://cn.vuejs.org/guide/built-ins/trans

Vue 3 中的极致防抖/节流(含常见方式防抖/节流)

各位朋友你们好呀。今天是立春,明天就是正月十五元宵节了,这种立春+元宵相隔的时候,可是很难遇到的,百年中就只有几次。在这提前祝大家元宵快乐。今天给大家带来的是Vue3中的极致防抖/节流(含常见方式防抖/节流)这篇文章,文章中不仅会讲述原来使用的防抖或节流方式,还会带来新的一种封装方式,使用起来更简单、更清晰。前言在前端的开发过程中,在涉及到与用户交互的过程中是基本上都是需要处理的,常规操作就是在对应位置加上防抖或者节流。加上防抖或者节流的作用:一是为了防止用户频繁操作;二是为了节约一定的服务器资源,减少资源浪费的情况。防抖或节流原理防抖(debounce)如果用户多次频繁操作以最后一次为准,当

基于Vue实现文件上传

文件上传的几种实现方式form-data、base64、缩略图、进度条、拖拽上传、切片上传1.Form-Data方式上传主要使用form表单方式实现文件上传letformData=newFormData();console.log(this.file);formData.append('file',this.file);formData.append('filename',this.file.name);instance.post('/upload_single',formData).then(res=>{if(+res.code===0){this.fileTip='图片上传成功!'retu

Vue和React的优缺点

Vue和React是目前最流行的前端框架之一,它们都有自己的优点和缺点。在这篇文章中,我将会详细介绍Vue和React的优缺点,并给出一些建议,帮助你选择适合自己的框架。一、Vue的优点1.简单易学Vue的语法简单易懂,学习曲线较为平缓,即使是初学者也能够快速上手。Vue的模板语法和组件化思想也非常容易理解。2.渐进式框架Vue是一个渐进式框架,可以根据项目的需求选择使用不同的功能。如果只需要使用Vue的模板语法和基本的数据绑定功能,那么只需要引入Vue的核心库即可。如果需要使用Vue的路由、状态管理等高级功能,可以再引入相应的插件。3.双向数据绑定Vue支持双向数据绑定,可以实现数据的自动同

前后端分离项目,vue+uni-app+php+mysql在线小说电子书阅读小程序系统设计与实现

功能介绍用户首次登陆系统需要注册一个用户作为账号,用户在登录平台后,可以进行平台的操作。主要模块包括以下几点:登录功能:注册普通账号登录;登录后可以修改用户的基本信息,也可以退出。资讯功能:后台录入资讯,在微信小程序在线电子书阅读系统的资讯模板展示,用户可以任意浏览资讯列表和详细信息  图书列表:后台录入图书的相关信息,点击主菜单“图书”可以查看所有图书。图书分类:为了管理图书,在后台设置了图书的相关的分类;在后台录入图书信息的时候会选择属于哪个分类;在前台小程序可以通过点击“分类”来筛选所需要的图书。图书查询:在首页或者图书列表的顶部,可以输入要查询的图书关键字,然后点击“查询”按钮,查询所

antd的upload组件的各种上传、下载操作(vue)

 作为前端小白刚刚接触上传、下载文件的操作也让我很头疼,所以利用时间记录一下方便巩固,希望能够帮到大家。 我将情况分为以下几种:1.点击按钮上传单个文件//html上传文件//action表示上传的地址,baseUrl是我们公司服务器的IP地址,加上后面的接口地址就组成了完整的上传地址//headers表示设置上传的请求头部,因为是后台管理系统所以会在里面存放必要的token//file-list就是我们上传文件的数组,一个文件就是一个数组元素//@change就是提交文件的回调//data{baseUrl:baseUrl,headers:{accesstoken:sessionStorage

VUE·13:事件处理之 @click用法

总览1.传参的事件绑定2.不传参的事件绑定一、不传参的事件处理1.原理1.1我们在vue模板实例中,给标签设定一个属性:v-on:click=“xxx”(可以简写为@click=“xxx”),然后赋一个函数名A。1.2意思就是,如果我们点击这个标签,那么就会执行这个函数A中的内容1.3请注意,我们给vue模板实例对应的事件函数也要写在实例对象vm的method:{}中,请看代码就懂了2.代码示例DOCTYPEhtml>html> head> metacharset="UTF-8"/> title>事件的基本使用title> scripttype="text/javascript"sr

Vue项目中引入高德地图步骤详解

高德地图API官网:高德开放平台|高德地图API。目录一、案例效果二、开发准备1.注册高德开放平台账号2.创建应用添加key值三、项目中使用地图组件1.npm获取高德地图API2.在项目中新建MapContainer.vue文件,用作地图组件。3.在MapContainer.vue地图组件中创建div标签作为地图容器,并设置地图容器的id属性为container;4.定义地图初始化函数initMap并调用:5.完整代码+详细注释:四、在地图中添加覆盖物、图层、插件、事件等属性1.添加图层2.在地图中使用插件(地图控件)3.其他设置 一、案例效果多边形吸附 二、开发准备需要注意想要使用JSAPI

前后端分离项目,vue+uni-app+php+mysql订座预约小程序系统设计与实现

功能介绍【后台功能】广告管理:设置小程序首页轮播图广告和链接留言列表:所有用户留言信息列表,支持删除会员列表:查看所有注册会员信息,支持删除录入资讯:录入资讯标题、内容等信息管理资讯:查看已录入资讯列表,支持删除和修改座位分类设置:设置开放的座位类型,设置好后不要动座位录入:选择分类,录入开放的座位名称座位管理:查看所有录入的座位信息,支持修改和删除座位预约列表:所有用户预约的座位记录列表座位预约管理:支持审核和拒绝,支持删除【用户功能】用户注册登录:注册普通账号,然后使用注册的账号登录登录资讯功能:用户可以任意浏览资讯列表和详细信息  留言:用户可以在小程序对管理平台留言。预约规则:默认只能