vue
文章平均质量分 56
梓喻
加我v号Joseph---wang,我们有好多IT民工群,一起来划水呀~~~
展开
-
vue2的ElementUI的form表单报错“Error: [ElementForm]unpected width”修复
ElementUI的form表单,当动态切换显示表单时报错 `Error: [ElementForm]unpected width`。原创 2024-02-20 19:04:07 · 1085 阅读 · 0 评论 -
el-select的多选multible带全选组件二次封装(vue2,elementUI)
Select 选择器 多选需要增加 全选 和 取消全选 功能,前端框架为vue2,UI组件为elementUI。原创 2023-12-07 22:36:06 · 697 阅读 · 0 评论 -
form表单的单输入框回车出现同步提交事件处理
form表单中如果只有一个输入框,在输入时按Enter回车键会出发默认事件自动提交表单,该交互是同步发生的,会导致页面刷新。原创 2023-02-22 11:19:30 · 2382 阅读 · 0 评论 -
vue2的element自定义表单(支持数据联动和表单联动)
vue2关于element自定义表单实现,支持数据联动和表单联动原创 2023-01-10 10:57:23 · 1691 阅读 · 0 评论 -
vue使用codemirror
vue项目有不同的依赖可以对应2和3版本的codemirror。原创 2022-12-14 22:02:06 · 1293 阅读 · 0 评论 -
vue-router在module内部访问其它模块数据、计算属性或者调用其它模块方法
我们在用时将数据 store 划分成不同的,如果我们在当前模块里需要访问不同模块的数据、计算属性或者调用其它模块的方法该怎么处理呢?原创 2022-09-20 16:28:09 · 792 阅读 · 0 评论 -
vue在调用摄像头扫码(vue-qrcode-reader)
在浏览器端html中有一款依赖可以直接调用摄像头扫码,。分别提供vue-qrcode-reader用来识别二维码。原创 2022-09-12 22:59:48 · 14360 阅读 · 20 评论 -
vue2关于监控屏幕宽度做自适应
在根节点App.vue监听。缩放的控件一定要设置宽高。原创 2022-08-10 13:09:06 · 466 阅读 · 0 评论 -
vue2如何在html模板里重新定义变量
在vue的循环嵌套中,有时候多重循环之后会出现很长的嵌套变量取值,然后模板中使用多有不便。原创 2022-08-05 18:14:55 · 1518 阅读 · 3 评论 -
vue2关于EventBus使用
这一版主要讲EventBus在VUE2中的使用。原创 2022-07-30 17:43:36 · 1477 阅读 · 1 评论 -
[mini-css-extract-plugin]Conficting order between告警warning(vue构建打包)
打包时发现项目出现了黄色的信息。Conflicting order between原创 2022-07-25 15:25:46 · 801 阅读 · 0 评论 -
vue项目动态加载JSON并显示
1. 封装JSON请求方法1> 安装 axiosnpm install axios2> 引入并封装axios请求路径 src/utils/requestJSON.jsimport axios from 'axios';// create an axios instanceconst service = axios.create({ method: 'get', crossDomain: true, dataType: 'json', cache: false,原创 2021-10-08 15:54:27 · 3094 阅读 · 0 评论 -
vue项目动态设置浏览器icon
代码很简单,获取 <link> 标签中 rel 相关设置的值为 icon 的标签元素,将 icon 地址的值赋给该标签的属性 href。// 比如某个路径 browerIconUrldocument.querySelectAll("link[rel*='icon']").forEach(item => { item.href = browserIconUrl;})...原创 2021-09-28 12:09:31 · 1549 阅读 · 0 评论 -
vue-router处理刷新query参数消失问题
概念-路由对象属性$route.query 一个 key/value 对象,表示 URL 查询参数。$route.path 字符串,对应当前路由的路径$route.fullPath 完成解析后的 URL,包含查询参数和 hash 的完整路径。分析当浏览器刷新时,触发 导航守卫 beforeEach方法等,只有在 next(path: to.path) 时改变了路由参数解决方案将 next(path: to.path) 修改为 next(path: to.fullPath),这样就不会发生原创 2021-09-22 19:52:58 · 4928 阅读 · 5 评论 -
vue3.0新特性总结
Vue 3.0 终于在上2020-09-18发布了,使用了Typescript 进行了大规模的重构,带来了 Composition API RFC 版本,类似 React Hook 一样的写Vue,可以自定义自己的hook ,让使用者更加的灵活。vue 3.0 部分新特性。setup()ref()reactive()isRef()toRefs()computed()watch()LifeCycle Hooks(新的生命周期)Template refsglobalProperties转载 2021-09-16 12:04:11 · 671 阅读 · 0 评论 -
websocket/vue-socket.io/socket.io-client相关认识理解
前言因为项目需要在vue用到websocket所以找了很多帖子与资料,但是原生的需要封装逻辑比较复杂,对于仅仅是使用学习成本比较大,第三方插件的话我找的有vue-socket.io、socket.io、socket.io-client,其中vue-socket.io与socket.io我使用时都遇到个问题,就是全局组件挂载后没有找到io实例,找到了io实例与相关方法但是却无法使用,例如on方法,使用时无任何报错,但是控制台没打印后台传输的数据,而最后找到了socket.io-client直接挂载io实例使转载 2021-09-15 10:54:47 · 2987 阅读 · 0 评论 -
SassError: expected selector /deep/ (module build failed)
问题有些项目npm run serve运行时报错 SassError: expected selector,指向的是 /deep/ 的问题。原因因为 /deep/ 写法会在 vue 3.0 下报错,请改用官方推荐的操作符 ::v-deep代替使用。vue 官方深度作用选择器 2.0 用的是 >>>, 而 vue 3.0 官方推荐用 伪类 :deep(), 因为某些预处理器不支持解析,所以使用 /deep/ 或者 ::v-deep 操作符替代。参考有些像 Sass 之类的原创 2021-09-13 17:42:13 · 4053 阅读 · 1 评论 -
组件域内样式渲染和深度作用选择器
1. 组件域内样式渲染单文件组件样式 <style> 标签带有 scoped attribute 的时候,它的样式只会应用到当前组件元素上,具体实现是这个可选的 scoped attribute 会自动添加一个唯一的 attribute (比如 data-v-8sdf9s2) 为组件内的 css 指定作用域。PostCss 转化处理如下:<style scoped>.example { color: red;}</style><template&g原创 2021-09-13 17:17:55 · 244 阅读 · 0 评论 -
vue项目同路由名称的路径参数变化处理
场景vue项目路由的路径由参数变量组成,虽然切换路径,但页面并未发生变化import User from '@/components/User';const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:userId', component: User } ]})vue-router官方解释提醒一下,当使用路由参数时,例如从 /user/foo导航到 /user/bar,原来的原创 2021-08-31 14:13:41 · 542 阅读 · 0 评论 -
TypeError: Cannot read property ‘range‘ of null(eslint-loader)
原因babel-eslint版本过高解决修改 package.json中指定babel-eslint版本,然后运行相关命令# 移除整个依赖rm -rf node_modules# 清空缓存npm cache clean# 安装依赖npm install# 再次清空缓存npm cache clean# npm cache clean -force 强制清空缓存或者# 移除指定依赖npm uninstall babel-eslint# 清空缓存npm cache cle.原创 2021-08-11 19:18:36 · 514 阅读 · 0 评论 -
Critical dependency: the request of a dependency is an expression(import)
定位到vue文件问题所在位置export default { created() { // 告警所在 import(`@/md/${file}`).then(moduleFile => { // }).catch(err => {}); }}原因webpack 版本问题,webpack4中动态import不支持变量方式解决办法用 require方法替代 importexport default { created() { // 告警所在 requ.原创 2021-08-11 19:08:38 · 4374 阅读 · 0 评论 -
TypeError: this.getOptions is not a function(html-loader)
在 vue 项目引入 md 文件 中安装了 html-loader 报错。原因当前项目安装的 html-loader版本过高,需要调整 html-loader版本解决办法先移除之前的版本npm uninstall html-loader安装较稳定版本npm i [email protected] --save...原创 2021-08-11 18:57:51 · 1325 阅读 · 0 评论 -
vue项目引入md文件
1. 安装相关依赖npm i html-loader markdown-loader --save需要注意的是,请安装一些稳定的版本,避免报错{ "html-loader": "^1.3.0", "markdown-loader": "^5.1.0"}2. 配置md文件解析规则vue.config.js 中增加配置加载md文件的规则,如果没有则在项目根目录下新建该配置。// All configuration item explanations can be find in // h原创 2021-08-11 18:30:43 · 2024 阅读 · 1 评论 -
vue项目刷新当前页
provide / inject描述provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。inject 一个字符串数组,或一个对象,对象的 key 是本地的绑定名。作用以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。需要关注的是provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。原创 2021-05-11 17:58:37 · 123 阅读 · 0 评论 -
配置基础的vue.config.js
我们用 vue-cli3 搭建项目时,可以手动配置 vue.config.js,在根目录下新建 vue.config.js。如果存在该文件,会被 @vue/cli-service 自动加载,它是一个可选的配置文件。module.exports = { // 基本路径 baseURL已经过时 publicPath: './', // 输出文件目录 outputDir: 'dist', // 输出代码目录 assetsDir: 'static', //原创 2021-05-08 15:14:17 · 323 阅读 · 0 评论 -
vue动态增加路由addRoute
描述router.addRoute 添加一条新路由规则。如果该路由规则有 name,并且已经存在一个与之相同的名字,则会覆盖它。addRoute(route: RouteConfig): () => void如果需要给某个子节点更新路由router.addRoute 添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name,并且已经存在一个与之相同的名字,则会覆盖它。addRoute(parentName: string, route: RouteConfig原创 2021-05-08 14:44:10 · 8746 阅读 · 6 评论 -
vue-cli 3.x 加载图片
以前是static,现在是public文件夹,在index.html里引用public的ico可以使用插值效果如图所示而在vue单文件中引用public中的静态文件可以直接这么引用这时路径很简单也可以通过相对路径来设置public文件夹的内容不过出现的是webpack编译后的路径src中assets放置动态文件,可以用来编译解析输出直接在vue模板文件里使用“@”开头的路...原创 2019-07-17 18:47:15 · 1527 阅读 · 0 评论 -
vue2.x实现简单banner的setTimeout自动切换
完整代码如下:BannerList.vue文件<template> <div class="banner"> <ul class="banner-list"> <template v-for="(item,index) in bannerList"> <BannerLi v-bind:key="index" v-bin...原创 2019-07-19 18:15:54 · 464 阅读 · 0 评论 -
将scss引入vue项目中
需要在模版里编译scss文件我们使用的是vue init webpack安装sass的依赖包npm install --save-dev sass-loader// sass-loader 依赖于 node-sassnpm install –save-dev node-sasscss-loader 和 vue-style-loader 在官方的脚手架中已经存在了,不需要安装,可以在...原创 2018-11-27 17:30:20 · 391 阅读 · 0 评论 -
浏览器图标引入vue项目中
浏览器的tab中有个icon的图标需要显示主要有两种方法一、在webpack中配置打开build/webpack.dev.conf.js文件进行配置找到plugins这个属性,在里面添加属性favicon,值为icon的地址有些文章说这里还需要在index.html中添加link,地址为favicon的地址,测过之后发现不需要修改完配置文件之后一定要npm run dev才能生效,如...原创 2018-11-27 20:00:50 · 384 阅读 · 0 评论 -
如何快速开始一个vue的项目
**我们开发vue的项目首先要先安装node**1.node.js为了更好的管理node.js的版本,我们可以使用nvm来安装node如果已经安装了node,可以先卸载了避免麻烦安装包地址https://github.com/coreybutler/nvm-windows/releases ,选择nvm-setup.zip下载后安装当然,也可以安装最新版的nvm安装的时候去d盘安......原创 2018-11-16 11:06:31 · 1107 阅读 · 0 评论