VUE的踩坑日志
沧州刺史
Hello朋友你好!我是一名西安电子科技大学研一在校学生,目前主要在做web方向,别的方向也有尝试。
如果对博客内容有疑问,或者有想法,欢迎私信或评论,看到一定会回复、尽力为大家解决问题!
如果你对web感兴趣,也可以一起交流讨论,比如学习路线、项目经验、技术点等等。
同时我会不定期写一些学习心得、技术教程、项目教学等博客,希望能丰富大家的技术视野。
技术不易,我们,继续努力!
展开
-
vue v-for 渲染大量数据卡顿的优化方案
vue 中使用 v-for 渲染大量数据的优化方案 - 动态渲染前端中我们难免会遇到需要展示大量数据的情况,如果基础数据量过大,那么在初始化组件时,可能会造成严重卡顿,影响用户体验。在我参与的开源项目 swanlab 中,某些情况下需要大量渲染程序日志,最近对其进行了一下优化,将使用方案记录于此。原创 2024-03-05 10:15:30 · 4036 阅读 · 0 评论 -
vite 使用 vite-plugin-mock 和 mockjs 配置 mock 模式
当后端还没有完全弄好,而前端需要同时启动的时候,一般会使用 mock 模拟后端响应,这样在后端接口准备完成之后,前端能以较小的工作量和接入接口,完成生产开发。最近正好尝试了一下,记录一下配置过程。原创 2023-12-02 13:32:30 · 4917 阅读 · 3 评论 -
打包时循环依赖(circular dependency)警告
我在打包构建我的vue3项目的时候,有这么一个警告信息:Export "useProjectStore" of module "src/store/modules/user.js" was reexported through module "src/store/index.js" while both modules are dependencies of each other and will end up in different chunks by current Rollup setting原创 2023-10-28 18:56:05 · 2172 阅读 · 0 评论 -
Vue3 bus 事件总线解决兄弟组件传参、不同层级组件传参
Vuex 和 Pinia 都是 vue 中常用的状态管理解决方案。但是他们主要都是用来解决不同组件公用参数或存放重要参数的,将其作为传参的方式,未免有些不妥和浪费,所以我们还可以使用另一种方式进行组件之间的传参:事件总线 bus原创 2023-02-09 22:00:06 · 2399 阅读 · 2 评论 -
Record with path “/“ is either missing a “component(s)“ or “children“ property.
那么解决这个报错的方法很简单,不要使用上面那种引入方式,而需要使用图二注释掉的,通过箭头函数引入的方式。这个问题不知道是怎么触发的,因为我有时候用第一种引入方式完全没有问题,而有些情况就会触发如标题报错。有没有大佬知道原理,求评论传授。这个问题在于,组件的引入方式。...原创 2022-08-27 14:57:45 · 20464 阅读 · 7 评论 -
Uniapp 微信小程序@click点击事件失效
我在一个页面上做了一个遮罩层,遮罩层上面绑定了点击事件,有一些能被点击,但是有一些还是失效了。层级遮盖的问题,但其实,就算遮罩层明显可见,遮罩在页面上方,当页面和遮罩层都默认保持同一个。,有时候虽然本地测试是好的,但是也不能保证在所有分辨率不同的屏幕上没有BUG。的时候,可能因为隐藏的遮盖效,而导致触发点击处被遮盖,导致无法点击。所以建议,当需要在遮罩层上设置点击事件的时候,不要偷懒,手动设定。因为遮罩层明显可见,所以我就没有考虑是。之类的方法,还有可能有一个错误。...原创 2022-08-26 12:18:00 · 12074 阅读 · 0 评论 -
VUE使用 :v-if 或 :v-show 无效
和v-on事件绑定的缩写是@一样,只是v-bind的缩写,而v-if和v-show本身就是VUE的指令体系中的指令,他本身就是响应式的。所以呢,不用再加冒号啦,直接写JS变量或者表达式就可以!可能会想,这怎么不对?可以引入响应式呀,可是,我们真的没有理解错的意思嘛?可能不熟悉,或者一段时间没有写的朋友使用这两个指令的时候,会写出这种代码。...原创 2022-07-28 23:07:43 · 1722 阅读 · 2 评论 -
If this is a native custom element, ...... via compilerOptions.CustomElement.
报错信息是这个,标题字数限制放不完If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 这错误是我好久没写VUE,重写的时候发现的,这时候我已经忘记了,自己写了一个组件,导入到父组件时候的导入规则,所以我是这样的:import my_nav from "./components/nav/my_nav.vue"原创 2022-04-28 18:31:10 · 35995 阅读 · 4 评论 -
Eslint太烦了,怎么关,想用但是不想看见红色波浪怎么办
在配置文件vue.config.js里面添加这个module.exports = defineConfig({ lintOnSave: false})如果没有这个文件自己建一个,有文件但是没有lintOnSave: false这句话的补一句就OK了如果要用Eslint,但是写一句就给你打红色波浪怎么办:在VS code 的设置里面,搜eslint,把他的enable勾选取消就不会总是画波浪线,但是运行的时候如果不符合规范会报错。...原创 2022-04-23 15:29:39 · 2782 阅读 · 0 评论 -
module not found: error: can‘t resolve ‘@vue/composition-api‘ in + 路径
这个问题主要是,没安装@vue/composition-api为插件,一般更改就行了:npm install @vue/composition-api或者yarn add @vue/composition-api用NPM很可能会error,原因我猜是VUE的版本问题,但yarn应该能正常下载。...原创 2022-04-23 15:24:12 · 7228 阅读 · 4 评论 -
VUE项目运行报错Syntax Error: Cannot find module ‘./utils‘
大概率是依赖出了点儿问题,把modules文件夹全删了,然后在项目目录里面把终端打开,运行下面命令:npm i或者运行npm install上面那个命令就是下面这个的缩写,这个指令会根据你项目的配置文件中,dependencies这个配置下,所记录的依赖,来一一下载。大概只要报错找不到依赖之类的,都可以试试这个方法。...原创 2022-04-23 15:04:05 · 7607 阅读 · 1 评论 -
v-model argument is not supported on plain elements 和 ‘v-model‘ directives require no argument.
好久没写VUE,再写的时候踩了个小坑:<input type=“text” v-model:value="value"/>如果你开启了Eslint , 报错应该是 'v-model' directives require no argument. 我去查了下,大概说的是是eslint对vetur插件的检查出现的问题。但其实根本不是,如果你关闭了Eslint,会发现仍然报错: VueCompilerError: v-model argument is not supported on原创 2022-01-23 02:03:19 · 4594 阅读 · 0 评论 -
向Vue的prototype上绑定或.use()时Cannot read properties of undefined (reading ‘prototype‘)
使用cli3创建的项目,main中的语法是:import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';import localData from "../src/assets/js/local"new Vue({ el: '#app', render: h => h(App)}原创 2022-01-23 22:41:23 · 5678 阅读 · 0 评论 -
VUE : Uncaught (in promise) TypeError: dataOptions.call is not a function
哟西。今天遇到一个问题,使用VUE3的时候,由路由链接到一个页面的时候,报错Uncaught (in promise) TypeError: dataOptions.call is not a function,上面还有两个data options的警告。报错的英文意思看着是,data的回调必须是一个函数。起初我以为是我页面的 data 不是函数形式:export default{ // 应该是这样 data(){ return { ... } }}但是检查所有的data原创 2022-01-27 23:32:31 · 10923 阅读 · 9 评论 -
[Vue warn]: Component is missing template or render function.
从组件库导入组件的时候,要用{ }括起来例如import {NButton} from "naive-ui";如果这样import NButton from "naive-ui";那么就会报错Component is missing template or render function.原创 2022-01-29 00:49:05 · 4562 阅读 · 0 评论