随笔分类 - Vue项目
🪢Nginx前端部署测试🥓🎈【本地部署测试+线上部署】
摘要:
🪢Nginx前端本地部署测试 前端开发中虽然把本地的前端包部署到线上 服务器,部署,测试...等都属于运维的工作范围内,但是作为一个前端开发者需要学会这些步骤的😬⚛:今天我就带大家先来个小实验,我们今天就尝试着进行本本地的nginx简单部署,等到后期,我们用购买的服务器进行线上的测试~~ 下载n
![🪢Nginx前端部署测试🥓🎈【本地部署测试+线上部署】](https://img2024.cnblogs.com/blog/1462173/202502/1462173-20250211111906811-1604481578.png)
【大屏可视化】系统(Vue3 + ECharts5)快速实现和应用 🎶🎈🗓️
摘要:
🎶【大屏可视化】系统(Vue3 + ECharts5)🎶 这八部~~按照,难易的顺序来进行绘制!!!💯 横向柱形图 竖向柱形图 雷达图 环形图 关系图 数据云图 数据展示图 地图可视化 02:基于 vite 与 tailwindcss 创建大屏可视化项目 1,基于 vite 创建项目,使用:
![【大屏可视化】系统(Vue3 + ECharts5)快速实现和应用 🎶🎈🗓️](https://img2024.cnblogs.com/blog/1462173/202501/1462173-20250120172917925-758972648.png)
vue项目中API接口的管理和axios的使用详解(附登录小案例)🚩✔✔✔
摘要:
在项目中,和后台交互数据这块,有三个流行的库。 jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {} })
![vue项目中API接口的管理和axios的使用详解(附登录小案例)🚩✔✔✔](https://img2024.cnblogs.com/blog/1462173/202407/1462173-20240723161046528-1425397736.png)
数据展示动态(跑分)显示
摘要:
1.页面显示(强烈推荐) <template #header> <avue-data-tabs :option="dataOptions" :data="tabData" style="width: 75%;"></avue-data-tabs> </template> 2.具体代码阿和方法实现 2
![数据展示动态(跑分)显示](https://img2024.cnblogs.com/blog/1462173/202405/1462173-20240528170622464-651959759.png)
日期选择器:年 月 日 动态切换显示
摘要:
1. 组件样式部分(elementUI)实现 <el-row> <el-col :span="10"> <el-button-group> <el-button :class="{ 'is-active': selectedButton 'year' }" @click="changeToYearP
![日期选择器:年 月 日 动态切换显示](https://img2024.cnblogs.com/blog/1462173/202405/1462173-20240528165017390-846872595.png)
vue 图片转base64格式方法+将base64流数据转成pdf文件可打印的方法✔️✔️✔️
摘要:
1. 图片转base64格式方法 (主要的代码)(其实用的还是FileReader) handleRemove(file, fileList) { console.log(file); var reader = new FileReader(); reader.readAsDataURL(file.
![vue 图片转base64格式方法+将base64流数据转成pdf文件可打印的方法✔️✔️✔️](https://img2023.cnblogs.com/blog/1462173/202310/1462173-20231031161152688-1611631001.png)
Vue中使用vue-count-to(数字滚动插件)
摘要:
效果图 1. 简单介绍 npm官网:vue-count-to vue-count-to 就是一个组件插件,咱们引入进来,可以去打印一下,它就是一个组件实例,使用components注册一下,就可以在模板中使用了,具体方式如下: 2. 安装 npm install vue-count-to 3. 引入
![Vue中使用vue-count-to(数字滚动插件)](https://img2023.cnblogs.com/blog/1462173/202310/1462173-20231024154037625-815406594.png)
实现:修改密码🔑~确认新密码🔒~重置密码🔗~提交操作✔
摘要:
1. 功能效果图: 2. 基本布局 先需要引入elementUI插件- 注册 基本布局code <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>重置密码</span> </div> <!
![实现:修改密码🔑~确认新密码🔒~重置密码🔗~提交操作✔](https://img2023.cnblogs.com/blog/1462173/202309/1462173-20230906103610751-24312777.png)
上传图片【选择文件📁+上传图片🎨】
摘要:
1. 上传图片的流程分析:【选择文件📁+上传图片🎨】 2.1 功能步骤 2.1 页面基本布局 基本布局 <template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>更换头像</span> </d
![上传图片【选择文件📁+上传图片🎨】](https://img2023.cnblogs.com/blog/1462173/202309/1462173-20230904121015677-1941749287.png)
localstorage本地存储token,vuex刷新数据丢失问题⚡⚡⚡
摘要:
1.vuex和axios安装,引入,使用 1.1vuexa安装和使用 vuex3.x版本的官网安装教程:安装 | Vuex vuex4.x版本的官网安装教程:安装 | Vuex npm install vuex --save 2.在src下新建文件夹store,并在文件夹中新建文件index.js,
![localstorage本地存储token,vuex刷新数据丢失问题⚡⚡⚡](https://img2023.cnblogs.com/blog/1462173/202308/1462173-20230825085257195-1666344371.png)
element表单校验(注册密码-确认密码)~提交🔑🔒
摘要:
💎目标界面: 1.引入elementUI组件,路由和axios配置 2.实现表单页面布局 <!-- 注册的表单区域 --> <el-form :model="regForm" :rules="regRules" ref="regForm" label-width="10px" class="dem
![element表单校验(注册密码-确认密码)~提交🔑🔒](https://img2023.cnblogs.com/blog/1462173/202308/1462173-20230824113925157-1848013285.png)
vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?
摘要:
出现的问题: 在 vue-cli 创建的项目中,创建文件并命名后,会报 “Component name "*****" should always be multi-word” 报错; 报错截图示例如下: Component name "******" should always be multi-
![vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?](https://img2023.cnblogs.com/blog/1462173/202308/1462173-20230823172110887-1481477156.png)
vue表格分页以及增删改查的实际应用
摘要:
效果: 1:表格以及分页 2:增加一条数据 3:删除一条数据 4:修改一条数据 5:查询一条数据 <template> <div class="tab-container"> <div class="filter-container" style="margin-bottom: 20px"> <el
![vue表格分页以及增删改查的实际应用](https://img2023.cnblogs.com/blog/1462173/202308/1462173-20230806221120651-857992721.png)
vue项目安装lees-loader报错:Module build failed: Error: Cannot find module 'less'
摘要:
1-新搭建的一个项目,运行时报Module build failed: Error: Cannot find module 'less'错误 原因:vue文件里面的style添加了 lang="less" 解决方案: 安装less npm install less 2-安装less后运行报错: Mo
![vue项目安装lees-loader报错:Module build failed: Error: Cannot find module 'less'](https://img2023.cnblogs.com/blog/1462173/202308/1462173-20230811011140394-557327549.png)
Vue过滤器的使用详解(代码实现)
摘要:
过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据 过滤器,其实不是必须要用的东西,它只是vue给我们提供的新的数据处理方式,过滤器能做到的,用计算属性,methods方法,依然可以实现 案例1:(过滤器简单使用) <template> <h3>{{str
![Vue过滤器的使用详解(代码实现)](https://img2023.cnblogs.com/blog/1462173/202307/1462173-20230729153625950-185919254.png)
登录-退出功能(管理系统Vue)
摘要:
一、登录业务流程 在登录页输入用户名和密码 调用后台接口进行校验 验证通过之后,根据后台的响应状态跳转到项目主页 使用路由导航守卫控制访问权限 - 4.1 项目中出现登录之外的其他API接口,必须在登录后才能访问,未登录状态下不能看到其他页面 - 4.2 将登录成功之后的token,保存到客户端se
![登录-退出功能(管理系统Vue)](https://img2023.cnblogs.com/blog/1462173/202308/1462173-20230805234949466-1273922997.png)
Vue组件之间几种传值的方法(看代码)
摘要:
简单额总结一下几种组件之间的传参方式 一. props(父传子) 父组件 传递 <template> <div> <HelloWorld :msg="msg" /> </div> </template> <script> import HelloWorld from "./components/He
![Vue组件之间几种传值的方法(看代码)](https://img2023.cnblogs.com/blog/1462173/202307/1462173-20230723185624678-1740033100.png)
elementui表格中实现点击单个单元格和表头--带参数触发事件/跳转路由
摘要:
对于element表格做点击跳转的功能有两大类:1,表头的点击跳转2,表格内容单元格进行点击跳转 是因为该表格只有tabs标签也第二个选项被选中的时候才能让他起效果,所以先做判断,第二个tabs标签被选中的时候实现该功能 1,tabs标签做判断 this.saveTableName1是第二个tabs
![elementui表格中实现点击单个单元格和表头--带参数触发事件/跳转路由](https://img2023.cnblogs.com/blog/1462173/202307/1462173-20230724085234825-1477055490.png)
echarts点击柱状图带参数跳转到指定页面(路由)
摘要:
echarts点击柱状图带参数跳转到指定页面(路由) 项目开发者常用echarts来实现数据可视化功能。上次遇到了一个问题,就是通过后台返回的数据渲染echarts数据完成后需要点击柱形图图标的时候跳转制定的新的页面展示(当然新的页面内容,后台通过柱形图的参数来给我们返回过来的) 1,引入echar
![echarts点击柱状图带参数跳转到指定页面(路由)](https://img2023.cnblogs.com/blog/1462173/202307/1462173-20230724084741014-1368284576.png)