Vue
关注
分享
扫一扫
Vue前端开发中遇到的各种问题异常总结
7柒丶
GOIM
https://blog.csdn.net/qq_32998153/article/details/79529704?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164031695716780261927713%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164031695716780261927713&biz_id=0&utm_medium=distribute.pc_search_resul
展开
-
Vue3编写命令式弹窗组件
【代码】Vue3编写命令式弹窗组件。原创 2022-10-31 17:26:28 · 1404 阅读 · 1 评论 -
vue和vue-server-renderer的版本不一致，导致编译打包异常（This may cause things to work incorrectly）
This may cause things to work incorrectly. Make sure to use the same version for both。原创 2022-10-17 11:53:00 · 1210 阅读 · 0 评论 -
Cannot find module ‘vite-plugin-compression‘ or its corresponding type declarations
【代码】Cannot find module 'vite-plugin-compression' or its corresponding type declarations。原创 2022-08-21 17:02:27 · 3734 阅读 · 2 评论 -
yarn 报错 文件名、目录名或卷标语法不正确
改变 yarn 全局 link 位置。查看 yarn 全局cache位置。改变 yarn 全局cache位置。改变 yarn 全局安装位置。执行Yarn命令时报错。原创 2022-08-21 15:28:10 · 1586 阅读 · 0 评论 -
vue 使用lottie-web创建动画
<template> <div class="box"> <h1>{{ msg }}</h1> <button @click="startFun">播放</button> <button @click="suspendFun">暂停</button> <div id="lottie_box"></div> </div></temp原创 2022-01-08 14:22:59 · 1846 阅读 · 0 评论 -
@media （媒体查询）多个只生效一个最大的、不生效
媒体查询的细节:（判断最小值，并且从小到大进行判断.如果是判断最大值，就应该从大到小写）1.向上兼容：在窄屏设置的样式。默认在大屏也会存在；2.向下覆盖：宽屏的样式设置会覆盖窄屏的样式设置； 1、如果判断最小值(min-width / min-height)，那么就应该从小到大写;body{ background: #f00;}@media screen and (min-width: 900px){ body { background: pink; }}@me原创 2022-01-06 16:32:18 · 1582 阅读 · 0 评论 -
Swiper样式堆叠在一起（vue-awsome-swiper内容全部堆在一起）问题解决
前段时间笔者在使用swiper（好长时间没用了）的时候发现内容全部堆在一起了，可以滑动，但是就是不正常显示。就像下面这样：然后我调试半天也没调试出来结果，突然在浏览器中发现swiper 没有样式，这才想起来没有引入swiper.css import "swiper/dist/css/swiper.css";引入就好了，妈的摆置了半天。俺是真滴菜！！！...原创 2021-12-24 15:27:55 · 1617 阅读 · 0 评论 -
Vue手机版原生下拉滑动事件控制
<template> <div class="all-body"> <div class="sliper-content"></div> <div class="other-content"></div> </div></template><script lang="ts">import { Vue, Options } from 'vue-class-原创 2021-12-18 22:41:31 · 443 阅读 · 0 评论 -
xgplayer 自定义加载loading样式时，显示视频（直播）封面
首先你需要通过官网的方式解压出来xgplayer的诸多内置样式，（详情见笔者的这片博客：xgplayer如何自定义样式）然后再在你解压出来的内容中找到这个文件 loading.js 在/skin/controls/loading.js这个路径下import { createDom } from 'xgplayer/src/utils/util'import Loading from '../assets/loading.svg'import '../style/controls/loading.sc原创 2021-12-14 16:59:08 · 3623 阅读 · 0 评论 -
xgplayer自定义播放器样式
这段时间组内的直播项目，前端笔者采用的字节的西瓜播放器，第一眼觉得雀氏是挺好用的，反正笔者是觉得比videoplayer好用。关于自定义样式，可以看下官方文档讲述的。注意：笔者用的是2.3.1的xgplayer版本也是可以进行自定义的。但是不支持CDN进行自定义样式其次抛开事实（安装步骤）不谈就是一下两步安装: npm install xgplayer@2.3.1安装完成之后在console里面执行这个命令npx xgplayer eject ./src/assets/ my-custom这原创 2021-12-08 10:57:50 · 3443 阅读 · 11 评论 -
Vue3 + TS ： Unexpected token,Did you mean `{‘}}` or `&rbrace`
笔者今天开发的时候遇到了这样一个错误：Unexpected token,Did you mean `{'}}` or `&rbrace上述的是错误提示，如下图：问题出现的原因：问题出现的原因是因为在上图的73行，我这边做了一个类型的预测，后面获取的dom元素是 <HTMLElement>类型的。而问题就出现在这个泛型的简括号，TS语法检测时候可能将这个判断成为了 标签元素，因为在tsx或者jsx中是可以直接写元素标签，不需要引号包裹的，所以语法校验可能是判断到了这一点，于是我就将这原创 2021-11-05 22:55:20 · 8362 阅读 · 0 评论 -
VUE3+TS 引入JQuery
先执行如下安装命令，安装jquerynpm install jquerynpm install @types/jquery然后在main.ts中引入import $ from 'jquery'createApp(App).use($)在shims-vue.d.ts 配置/* eslint-disable */declare module '*.vue' { import type { DefineComponent } from 'vue' const component: D原创 2021-11-02 20:42:54 · 3821 阅读 · 1 评论 -
Vue3.x 深度选择器（样式穿刺）＞＞＞ 和 /deep/ 和 ::v-deep 被弃用desprecated
近期笔者使用Vue3 + TS写项目的时候，使用深度选择器发现如下提示[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.一、深度选择器淘汰>>>/deep和如下的写法在vue3.x中被淘汰了<style lang="less" scoped>/deep/ .ant-table-tbody > tr >原创 2021-10-27 14:25:52 · 4185 阅读 · 4 评论 -
Vue使用animate.css无效
animate.css官网animate.css中文网Vue 官网引用的是 animate.css 3.5 版本!!!如果你直接采用npm install animate.css ;在引入：import animated from "animate.css" ;Vue.use(animated);结果就是没有作用!!!原因：两者版本兼容性问题导致动画不起作用！！！处理方法：就是安装对应低版本的动画插件，比如官网引入的3.x的animate.cssnpm install anim原创 2021-09-25 18:01:36 · 1918 阅读 · 1 评论 -
Typescript + Vue3 引入Element-UI组件
vue-cli3 引用Elment,需要载入Element Plus 组件import { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import ElementPlus from 'element-plus'import 'element-plus/lib/theme-chalk/index.css'createApp(Ap原创 2021-09-25 11:56:08 · 945 阅读 · 0 评论 -
element ui 安装失败的问题解决
npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: xy_admin@0.1.0npm ERR! Found: vue@3.2.16npm ERR! node_modules/vuenpm ERR! vue@"^3.0.0" from the root projectnpm ERR!npm ERR! Could not res.原创 2021-09-24 22:48:35 · 3772 阅读 · 1 评论 -
EsLint报错解决合集
Newline required at end of file but not found解决方案在该页面最后一行加一个回车，及最后一行没有任何字符即可vue项目报错Expected indentation of 2 spaces but found 4报错原因严格的检查缩进问题，不是报错，我们可以关闭这个检查规则解决方案找到以下的文件，添加"indent": [“off”, 2]error Unnecessarily quoted property ‘145’ found q..原创 2021-09-24 21:52:43 · 2321 阅读 · 0 评论 -
vue父组件传递props异步数据到子组件的问题
https://www.cnblogs.com/goloving/p/9114389.html原创 2021-06-25 10:25:48 · 227 阅读 · 1 评论 -
创建一个Vue的命令式弹窗组件（Vue2.x版本）【目前全网最好用最简单的】
目前全网最好用最新的Vue2命令式弹窗组件、样式诸位大神自己写哈！原创 2021-05-17 16:06:52 · 1062 阅读 · 0 评论 -
解决 Vue 项目中使用 iView 组件库设置样式不生效的问题
有时候我们使用iview 组件库样式达不到需要的效果我们可以通过重写对应的CSS样式，来达到效果，但是有时候，我们不管是怎样写，他就是不生效，我们可以使用下面的方法，贼暴力。找到要设置样式的类名，直接按照下面写法设置就可以了！(这里用的是vue 的 less-loader 插件)/deep/ 深度选择器在写一些vue项目时候，经常会引入一些组件。无论是自定义组件还是引入的外部组件。style标签上都有scoped属性。防止影响到其他页面上的样式。但是又是需要在父组件更改自组件的样式。就要用到组件穿透原创 2021-05-17 16:04:21 · 2376 阅读 · 0 评论 -
Vue 点击其他地方关闭弹窗
<!doctype html><html lang="en"><head> <title>Document</title> <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <style> #box { position: fixed;原创 2021-04-21 19:02:58 · 901 阅读 · 0 评论 -
CSS中垂直水平居中
方法一：使用flex布局，父级元素设置justify-content和align-items<div class="cont"> <div class="item"></div> </div> .cont { width: 100px; height: 100px; background: red; display: flex;转载 2021-04-20 19:15:22 · 132 阅读 · 0 评论 -
Css3滚动条样式修改
/*滚动条整体样式*/::-webkit-scrollbar{ width: 5px;/*竖向滚动条的宽度*/ height: 5px;/*横向滚动条的高度*/}::-webkit-scrollbar-thumb{/*滚动条里面的小方块*/ background: #666666; border-radius: 5px;}::-webkit-scrollbar-track{/*滚动条轨道的样式*/ background: #ccc; border-radius: 5px;原创 2021-04-20 10:27:28 · 199 阅读 · 0 评论 -
使用iframe标签时，如何阻止嵌入的页面跳转(Vue、HTML 均可使用)
<iframe :src="pannelInfo.pannelURL" id="web" frameborder="0" class="web-frame" security="restricted" sandbox=""></iframe>security是js 的属性，后面的sandbox是h5的属性值描述" "应用以下所有的限制。allow-same-origin允许 iframe 内容被视为...原创 2021-04-19 17:31:28 · 3519 阅读 · 0 评论 -
Vue2.x与Vue3.x生命周期
文章目录Vue2.xVue3.xVue2.xVue2.x生命周期从图中我们大致可以看出Vue 的生命周期大致分为这几个阶段：new Vue() => beforeCreate => created => beforeMount =>mounted => beforeUpdate => updated => beforeDestroy => destroyed咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了，总结一下，对原创 2021-04-12 10:48:17 · 473 阅读 · 0 评论 -
[Vue warn]: Computed property “username“ was assigned to but it has no setter.
因为你将从username是从vuex中获取的，你又双向把绑定到了页面上，但是从计算属性方面只获取操作，没有赋值操作，加上就ok。computed: { userName:{ get(){ return this.$store.state.user.userName }, set(val){ this.$store.commit('SET_USERNAME', val) } }}原创 2021-04-06 09:27:38 · 564 阅读 · 0 评论 -
Vue实用插件大全 汇总
一、UI组件及框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用vue-blu - 帮助你轻松创建we原创 2021-03-23 17:21:40 · 617 阅读 · 0 评论 -
使用Vue前端生成二维码-----插件qrcodejs2
先安装qrcodejs2 npm install qrcodejs2 --save<div class="code1"> <span class="label2">二维码</span> <span class="img-qrcode"> <div class="qrcode" id="qrcodeWatch" ref="qrcodeWatch"></div> </span> <原创 2021-03-11 16:40:56 · 156 阅读 · 0 评论 -
Vue手机布局使用rem布局
(function(window, document) { var viewWidth = 720; var pick = viewWidth / 100; var mode = "resize"; function change() { var view = document.documentElement.clientWidth || window.innerWidth; if(view >= 720) { .原创 2021-03-02 19:10:58 · 96 阅读 · 0 评论 -
Vuex如何避免 NavigationDuplicated: Avoided redundant navigation to current location
问题描述 出现这个原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。 所以当没有回调函数的时候，错误信息就会交给全局的路由错误处理，因此就 会报上述的错误。即使出现了这个错误，对我们的界面渲染也没什么影响， 强迫症一点就可以采用下面代码直接复制过去或者降版本~~~解决方式Vue.use(VueRouter);//获取原型对象上的push函数const originalPush = VueRouter.prototype.push/原创 2021-02-02 15:15:19 · 135 阅读 · 0 评论 -
Vue编译中出现 Parsing error: x-invalid-end-tag vue/no-parsing-error 问题
出现这种问题目前笔者发现的有以下几种可能一、如果是使用IDEA和WebStorm的小伙伴在项目根目录下找到.eslintrc.js 文件在rules下面添加 "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]重新启动项目即可二、如果是使用VSCode 的小伙伴需要关闭 VSCode 的代码检查Vetur 使用了一个特定版本的 eslint-plugin-vue，用于检查代码的 <template> 部分。 L原创 2021-01-11 11:39:46 · 17680 阅读 · 5 评论