Vue总结
关注
分享
扫一扫
文章平均质量分 51
汇总在项目开发中遇到的一些问题，并提供解决方案
打小就霸
事在人为，每天学一点点
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Antd-vue 上传文件总结
Antd-vue 上传文件总结原创 2023-02-08 15:34:12 · 2927 阅读 · 0 评论 -
vue中使用echarts 动态渲染数据
Echarts动态渲染原创 2023-01-16 14:15:45 · 5240 阅读 · 5 评论 -
Vue 面包屑三级路径改变但页面不跳转解决方案
Vue 面包屑三级路径改变但页面不跳转解决方案原创 2022-12-14 11:17:06 · 4196 阅读 · 0 评论 -
antd-vue 累加表单编辑和删除(完善版)
antd-vue 表格自增原创 2022-12-12 10:57:28 · 722 阅读 · 0 评论 -
Vue 单向数据流报警
Vue 单向数据流报警原创 2022-11-19 22:19:20 · 228 阅读 · 0 评论 -
antd-vue FormModel 表单排列方式设置
表单排列方式设置不生效解决方案原创 2022-11-10 09:16:58 · 3550 阅读 · 1 评论 -
DataV中边框组件不生效解决方案
DataV中边框组件不生效解决方案原创 2022-10-18 09:41:43 · 3118 阅读 · 5 评论 -
antd-vue 划上表格内容显示气泡框及提示内容
antd-vue 划上表格内容显示气泡框及提示内容原创 2022-10-13 16:11:18 · 2523 阅读 · 0 评论 -
token到期时axios响应拦截信息提示并重定向到登录页解决方案
token到期时axios响应拦截信息提示并重定向到登录页解决方案原创 2022-09-22 09:09:37 · 2143 阅读 · 0 评论 -
vue : 无法加载文件 C:\Users\Mr.D\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本
vscode创建Vue项目报错原创 2022-07-17 10:43:54 · 717 阅读 · 1 评论 -
Vue项目中手机号脱敏（星号代替）
最近接到一个需求，身份敏感信息只显示前面两位和后面两位，中间其他部分进行打码，就在全局搞了一个过滤器1、在main.js中进行全局过滤Vue.filter('replacestar', function (value) { if (!value) return ''; let str = value; str = str.replace(new RegExp("[^0-9]+","g"),"") if(str.length==11){ str = str.toString原创 2022-04-10 13:10:44 · 4579 阅读 · 1 评论 -
Vue项目打包成exe可执行文件（无瑕疵，完美版）
Vue项目打包成exe可执行文件实现思路：从electron官网上拉取代码，把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html，输入打包exe的命令即可1、 拉取electron官网上的demo，拉下来之后安装依赖，项目跑起来之后，就不用管demo了，开始配置自己的Vue项目git clone https://github.com/electron/electron-quick-startnpm inpm run start2、修改自原创 2021-11-09 17:49:21 · 18873 阅读 · 49 评论 -
Vue项目中使用Echarts实现中国地图
echarts现在已经不提供地图map包的下载了（5.0之前会自带这个包），所以很多小伙伴做地图需要走很多弯路，今天给大家分享一下地图的实现1、先在终端安装 npm install echarts --save2、在main.js中引入echarts （注意这里有两种引入方式）<1> 5.0以下版本： import echarts from 'echarts ’<2> 5.0以上版本： import * as echarts from ‘echarts’我这里用的是原创 2021-10-14 16:09:38 · 6151 阅读 · 1 评论 -
vue中table表格导出为图片格式
vue中table表格点击下载为图片格式实现思路：给页面中需要导出为图片的内容添加id名，调用封好的方法即可直接导出。以下是具体的实现方法1、安装依赖npm install --save html2canvas2、在需要导出的页面引用import html2canvas from "html2canvas";3、具体实现<template> <div style="min-height: 450px;"> <button @click="downlo原创 2021-09-23 14:12:11 · 2520 阅读 · 0 评论 -
Vue页面任意内容导出为pdf格式
Vue项目页面任意内容导出为pdf格式1、安装依赖npm install JsPDF --savenpm install html2Canvas --save2、在项目的src同级目录 新建util文件夹 并新建htmlToPdf.js，粘入以下代码import html2Canvas from "html2canvas";import JsPDF from "jspdf";import { Loading } from "element-ui"; //此处根据你实际使用的框架的loadin原创 2021-09-23 14:00:53 · 1084 阅读 · 3 评论 -
Vue面包屑导航实现方案
面包屑导航实现1、给路由文件添加meta标签，meta的title必须和你想要展示的标题一致 { path: '/layout', component: Layout, // redirect: '/home' //重定向 防止页面进来空白 默认选中侧边栏上的文字 children: [ { path: '/center', name: 'C原创 2021-09-22 11:21:33 · 4662 阅读 · 0 评论 -
Vue项目打包成exe可执行文件
Vue项目打包成exe可执行文件1、先在package.json里面添加如下代码 (electron老版本不易出错，装新版本出错请自行百度！)添加完以后安装依赖 npm i2、安装完成后 在src目录下新建background.js并粘入以下代码'use strict'import { app, protocol, BrowserWindow } from 'electron'import { createProtocol, installVueDev原创 2021-09-18 10:31:39 · 2482 阅读 · 3 评论 -
Vue中渲染页面前插值表达式闪烁解决方案
这两天写页面出现了 在使用vue绑定数据的时候，渲染页面时会出现变量闪烁的情况，给大家总结分享一下直接看代码<style>[v-cloak] { display: none !important;}</style><body><div class="#app" v-cloak> <p>{{msg}}</p></div></body><script> ne原创 2021-03-12 19:24:43 · 329 阅读 · 0 评论 -
DataV数据可视化之轮播表
第一步安装 npm install @jiaminghi/data-view//在main.js中引入 自动注册所有组件为全局组件import dataV from ‘@jiaminghi/data-view’Vue.use(dataV)第二步HTML部分<div class="recentlyReportScollList" style="width:392px;height:290px;background: white"> <div style=原创 2021-01-19 18:43:23 · 9068 阅读 · 45 评论 -
在同一页面下点击下拉框切换不同的div
最近在写vue项目 用到了vue+elementui等技术 由于对element组件库不是太熟悉 踩了一些坑，接下来分享给大家，希望能给大家带来一些帮助。需求是这样的：在同一页面下点击下拉框切换不同的div （el-select 中 el-option下拉框绑定事件并切换）我的思路是这样的1、给需要切换的div 加上v-show指令v-show两个div的切换隐藏比较简单 但是多个就得需要费些功夫了（通过绑定点击事件来解决）刚开始被下拉列表绑定事件并切换div困扰了好一阵后续看过原创 2020-12-11 18:56:44 · 2531 阅读 · 0 评论 -
同一页面 点击div中的视频 在不同div中展示播放
今天在写后台的时候碰到一个需求 感觉挺有意思的 就给大家一起分享一下在同一个页面 点击左侧两个小视频（红色） 在右侧播放（黄色）实现思路：给右侧黄色区域的视频的 src动态绑定，点击红色的第一个的时候，把src赋值给黄色，让黄色自动播放，点击红色第二个的时候，把红色第二个src赋值给黄色，让黄色播放看重点定义url 并给定默认视频右侧黄色区域动态绑定src左侧红色区域添加点击事件点击事件内部处理代码如下右侧黄色区域 <p>区域监控</p>原创 2021-03-18 11:43:26 · 1589 阅读 · 0 评论 -
vue模板在html里直接使用
最近没啥紧急的项目，就想着用vue写一些demo，奈何每次都要引入vue和elementUI，索性直接把它封成代码片段，方便以后直接使用走你<!DOCTYPE html><html><head> <meta charset='UTF-8'> <!-- 先引入 Vue --> <script src='https://unpkg.com/vue/dist/vue.js'></script>原创 2021-05-08 18:34:42 · 1860 阅读 · 0 评论 -
vue中使用echarts
vue中使用echarts原创 2021-02-02 00:09:51 · 1554 阅读 · 0 评论 -
json-server 模拟假数据进行前后端交互
最近遇到了需要使用假数据来填充系统的情况 看了一眼json-serve 发现用很方便只需要一个json文件就可以随意操作 跟大家分享一下使用前环境 安装好node环境第一步全局安装json-server npm install -g json-server想要查看安装是否成功 json-server -v安装第二步在任意文件夹下创建一个json文件这里我是在桌面上创建了一个 名为 test.json的文件第三步进行json文件的监听json-server原创 2021-03-25 09:46:19 · 401 阅读 · 0 评论 -
本地文件上传部署至github
总体思路是：先拉取远程仓库地址，然后把本地文件放进去，在上传到github即可，以下是具体操作：1、首先在github新建远程仓库登录github官网 地址2、点击new进入创建仓库页面3、填写信息后创建仓库4、创建完成后显示页面5、复制仓库地址，方便上传时使用6、在本地任意目录打开git命令7、在命令行输入 git clone + 之前创建的仓库地址按回车键可以看到文件中将远程仓库的文件拉取了下来8、将要上传github的文件移原创 2021-06-01 16:02:52 · 462 阅读 · 0 评论 -
keep-alive包裹router-view不生效解决方案
要解决的问题：最近使用vue3.0保留组件状态时，发现直接用keep-alive包裹router-view不生效解决方案：利用插槽的写法可以完美解决实现思路：组件状态保留不成功，看到浏览器控制台给出了提示信息，替换自己写的代码即可控制台会给出提示，直接用就行今天的分享就这些，欢迎大家一起交流，共同成长...原创 2021-08-31 17:19:45 · 2130 阅读 · 0 评论 -
vue项目登录页粒子效果显示（vue-particles插件）
Vue粒子特效（vue-particles插件）上图那些类似于星座图的点和线，是由vue-particles插件生成的，不仅自己动，而且能与用户鼠标事件产生互动。使用教程：1、先安装 插件npm install vue-particles --save2、main.js里加入以下代码：import VueParticles from 'vue-particles' Vue.use(VueParticles) App.vue 文件——一个完整的例子：<template>原创 2021-09-15 14:10:07 · 1088 阅读 · 0 评论 -
Vue路由守卫（拦截）
要解决的问题：最近做项目时，发现不登录账号和密码，在浏览器的地址栏直接输入路径也能跳转页面，就聊一下路由守卫吧，也叫路由拦截,话不多少 直接看操作解决方案：在登录成功后，设置一个sessionStorage，通过这个sessionStorage来决定路由是否跳转实现思路：点击登录按钮时向后端传递账号密码并设置sessionStorage，在router.js文件中设置全局路由守卫，通过这个sessionStorage来决定路由是否跳转//点击登录按钮时向后端传递账号密码并设置sessionStor原创 2021-08-05 10:49:34 · 2889 阅读 · 1 评论 -
vuepress踩坑总结
使用vuepress踩到的坑：最近在研究尤大的vuepress，发现有许多的坑，给大家分享一下遇到的问题以及解决方案，避免大家走弯路，话不多少 直接上代码1.根据官网项目创建完成后 .vuepress/templates 需要在创建的文件内初始化模板，不然会报 app is not defined.模板内容：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <原创 2021-08-30 11:25:08 · 3892 阅读 · 9 评论 -
Vue导出表格数据为Excel
1、安装插件（1）npm install xlsx --save（2）npm install file-saver --save2、引入插件import XLSX from ‘xlsx’import FileSaver from ‘file-saver’3、给导出数据的按钮添加一个点击事件<el-button type="primary" @click="exporttableinfo">导出数据</el-button>4、在要导出的表格标签上添加一个id名原创 2021-09-16 13:30:13 · 499 阅读 · 0 评论 -
vue项目中html标签上 字符串中解析变量
要解决的问题：最近在对接上传文件这块的接口，发现如果环境不一样或者ip改变了 这个请求地址就需要一直手动修改，一两个还好，多了真的是让人很烦。解决方案：在全局定义地址源 引入需要使用地址的页面 把地址赋给需要使用页面一个变量实现思路：只需把要拼接前的属性设置为动态，就可以把变量拼接上去动态修改前 地址固定写死，修改麻烦 <div class="centerx"> <vs-upload automatic action="http://原创 2021-07-30 15:07:42 · 2017 阅读 · 0 评论