![](https://img-blog.csdnimg.cn/20190927151101105.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 61
Vue
RogerQianpeng
“While the world sleeps, you dream.”
展开
-
【Vue】defineProperty与数据代理
0 前言defineProperty在Vue中有着广泛的应用,其设计及使用思想也很值得学习与借鉴。在Vue2中,用defineProperty实现了数据代理。另外,应当注意,Vue3中改用proxy实现数据代理,这与Vue2不同。1 defineProperty1.1 是什么Object.defineProperty,defineProperty是js对象的方法。1.2 目标需求person有name和sex,要给person添加age属性。读取person.age,就获得number值原创 2022-05-22 17:23:27 · 316 阅读 · 0 评论 -
【VUE】过滤器Filter
前言注意,filter在Vue3中已经删除。本文回顾filter,并扩展内容,再引出下一篇的Computed。是什么功能:对需要显示的数据,进行一定的格式化操作后再显示注意:filter不会修改原本的数据,而是基于原本的数据来产生新的数据。使用方法HTML中<!-- 1 在双花括号中 -->{{ message | capitalize }}<!-- 2 在 `v-bind` 中 --><div v-bind:id="rawId | formatId原创 2022-03-27 15:21:04 · 6666 阅读 · 0 评论 -
【Vue】初识Composition Api
0 前言从Vue2升级到Vue3,可能最大的变化之一就是Composition Api了。Composition Api是什么东西为啥要用它?怎么用它?有什么需要注意的吗?面对陌生的它,我们在这儿先简单认识一下它,而具体如何使用以及使用的注意点,将会在后续的文章更新中介绍,可以关注本文最后持续更新的扩展阅读部分。1 是什么Composition Api,也就是组合式Api。我认为,它解决的主要是两大痛点:逻辑性、复用性。在Vue2中的Options Api,我们用data、components原创 2022-03-20 16:43:21 · 1824 阅读 · 2 评论 -
【Vue】Mixin相关问题解析
0 前言本文将回答三个问题:是什么、为什么、注意点。即Mixin是什么怎么用,为什么要用它什么时候用,其他应当注意的问题。1 是什么Mixin是什么?Mixin就是“混入”、“混合”,是一个对象,在组件中使用,可以将一部分对象选项“混入”到另一个对象中,从而实现可复用。如下代码://Student.vue<template> <div> <h2 @click="showName">学生姓名:{{name}}</h2> </div&原创 2022-03-20 16:11:17 · 1523 阅读 · 0 评论 -
【Vue】Vue2,Vue3 学习笔记
Vue2,Vue3 学习笔记说明本帖是若干学习中发现和积累的问题的记录,也是一份知识重点的目录,需要进一步的学习、整理、实践。清单mixinfilter(Vue3移除)watchcomputeddefineProperty(Vue2)el消息订阅与发布事件总线自定义,指令、事件生命周期css库的整理vue动画其他常用css布局slottemplatevuex与新的vue-router的api与进阶原创 2022-03-20 15:34:38 · 864 阅读 · 0 评论 -
【VUE】npm install报错“found * vulnerabilities( * high), run npm audit fix, or npm audit”相关问题的解决
前言一个vue2的项目,从mac上传到gitee,然后windows clone之后npm install报错。原因核心问题是node版本问题,windows11下载了node v16,然后版本过高导致各种无法resolve。需要降级为node v14版本。解决控制面板,卸载,nodenode官网,下载老版本关闭cmd,关闭webstorm(项目),然后再重新打开,node -v查看版本,如果是14那就oknpm install还是会有一些少量版本高或低的问题,但是nod原创 2022-01-29 20:39:46 · 15012 阅读 · 3 评论 -
【VUE】跨标签页多页数据传输的实现
前言需要借助后端实现,是个有效但不够优雅的笨办法。需求数据可视化分析。A页面是一张表单,在此填入各种筛选条件,然后点击提交。在新标签页B页面展示结果图表。可以在A页面更新提交表单,B页面实时更新图表结果,但不会弹出新的页面。关闭B页面,再点击A页面,会弹出新的B页面。可以点击侧边栏“图表分析”直接跳转到B页面,“数据选择”跳转到A页面,两个页面已经填入和已经展示的数据不能消失。简单地说,核心需求就是,在一个页面输入表单,在另一个页面实时更新数据。解决思路排除的解决方法vue是单页面原创 2022-01-25 14:37:49 · 7823 阅读 · 2 评论 -
【VUE】用nodejs快速搭建简易的mock数据服务器
问题详情前端项目需要一些mock数据,用nodejs写一个后端完成数据的返回、请求参数的读取、请求参数的处理。最简易解决办法创建一个叫service.js的文件。const express = require('express');const app = express();//设置允许跨域访问该服务.app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*');原创 2021-10-30 20:32:47 · 766 阅读 · 0 评论 -
【VUE】vue3+vite中process.env的配置方法
问题详情在request.js中,使用process.env.BASE_API,需要对请求路径进行全局配置// 创建axios实例const service = axios.create({ baseURL: process.env.BASE_API, // api 的 base_url timeout: 5000 // 请求超时时间})解决方法在vite.config.js中,添加define: { 'process.env': { 'BASE_API':"ht原创 2021-10-30 19:55:02 · 16806 阅读 · 2 评论 -
【VUE】解决“Request header field content-type is not allowed by Access-Control-Allow-Headers”问题
问题描述在向用nodejs快速搭建的mock服务器发送请求时出现“Request header field content-type is not allowed by Access-Control-Allow-Headers”报错。问题解决在request配置中添加请求拦截器即可import qs from 'qs'// 添加请求拦截器service.interceptors.request.use((config) => { //在发送请求之前做某件事 if(confi原创 2021-10-30 19:48:35 · 3948 阅读 · 0 评论 -
【VUE】使用白名单,含参路由仍不被导航守卫拦截的方法
思路很简单,原来在白名单中配置的是’/liveroom’这样的路由,现在配置为’liveroom’的名称,然后将导航守卫中的to.path改成to.name即可。这样’/liveroom/124235’或者更复杂的路径也都不会被拦截。代码含参的路由白名单导航守卫...原创 2021-10-21 16:00:00 · 2205 阅读 · 1 评论 -
【VUE】类似斗鱼直播的web侧边栏实现方式
如果与斗鱼直播的效果完全相同,也即需要在侧边栏隐藏时有Icon显示,建议直接使用element-plus的menu组件的垂直布局方式。我的实现目标是不显示Icon,也不使用element-plus,而是自己实现侧边栏的显示与隐藏效果。具体看下图。除了实现了左侧的侧边栏效果,也实现了右侧的侧边栏效果。两者代码上会有一定区分,在文末会简单补充。斗鱼效果隐藏状态展开状态。实现效果隐藏状态。展开状态。实现思路查阅了一些资料,很多都是使用路由相关的功能。但是我觉得太麻烦..原创 2021-10-19 21:06:22 · 448 阅读 · 0 评论 -
【VUE】Vite中使用less全局变量
Vite中对less的全局变量进行配置,方法与vue-cli并不相同,这里做个记录首先,common.less的文件路径是:src/styles/common.js然后,在vite.config.js中进行配置:export default defineConfig({css: { preprocessorOptions: { less: { javascriptEnabled: true, additionalData: `@import ".原创 2021-10-15 11:36:08 · 5485 阅读 · 0 评论 -
【VUE】使用gitee实现简单的版本管理(零基础逐步实现)
使用git进行版本管理,实现多人协同开发,是非常常用的基本技能。但之前总觉得有些云里雾里,似懂非懂,这里做一个简单的总结,写一个逐步教程。连接远程仓库逐步实现流程注册一个gitee账号创建一个gitee仓库2.1 点击右上角的加号2.2 选择新建仓库复制链接,后面6.3要用创建一个本地项目先创建一个本地仓库5.1 如果不是mac或者窗口界面不一样也没关系,找到“Create Git Repository”即可5.2 直接默认项目位置即可连接远程仓.原创 2021-10-10 17:14:37 · 1021 阅读 · 0 评论 -
【VUE】用户登陆的token实现(vue-admin-template中使用的方式)
新写的小项目中,需要实现用户的登陆功能,以及部分功能未登录即无法使用需要登陆的导航守卫功能。阅读和修改了vue-admin-template中的实现方法,最终完成了登陆功能demo,在这里整理一下相关的实现流程及一些实现原理。实现流程登陆功能实现流程Web页面,填写用户名和密码,点击登陆,触发handleLogin function验证表单后,将登陆表单数据推给vuex中的Login acntion。Login action,调用login api,给后端指定api发送请求,包括用户名与密码数.原创 2021-10-09 10:45:46 · 3429 阅读 · 0 评论 -
【VUE】process.env,require,vite.config.js等问题的解决
问题产生的原因:1.用vite进行项目构建。2.部分使用的是以前迁移过来的vue2的代码。3.npm及node更新版本之后出现的区别。问题1:process.env找不到(process is not defined)问题描述:在vue2中可以使用process.env,但vue3中不再使用。问题解决:在vite.config.js中添加define: { 'process.env': {} },即可解决图片:参考:https://blog.csdn.net/henryhu712/artic.原创 2021-10-08 21:56:00 · 4546 阅读 · 0 评论 -
【VUE】code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree解决
问题描述在使用vue-admin-template 3.8.0版本时,npm install之后,出现“code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree”报错问题解决npm i --legacy-peer-deps其他补充因为vue-admin-template 3.8.0已经是很久之前的了,所以出现报错时就猜测有可能是版本过老导致的相关问题。而事实上,ERESOLVE相关的报错原因大多也确实是npm7与npm6原创 2021-09-28 16:36:59 · 2904 阅读 · 0 评论 -
【VUE】vue报错“‘vue-cli-service‘不是内部或外部命令,也不是...”的解决办法
问题描述项目执行npm run serve后报错产生原因(最大概率原因)由于在该代码中含有node_module依赖包,再拷贝到其他计算机时,项目路径发生变化,导致找不到vue-cli-service于是报错(其他出错情况,见下文扩展)因为该问题是出现在其他计算机上的,我本机上一直没有问题没有复现出bug,所以出错原因只是分析得出。而出现这个报错的情况也不止这一种,具体写在下文扩展中。解决办法删除node_module文件夹npm installnpm run serve即可解原创 2021-07-17 20:22:29 · 91019 阅读 · 17 评论