Vue
Tencent IT
小强个人搭建的个人博客,小强会在这上面记录分享自己的个人项目经历,开发中遇到的问题以及解决方案,同时还会记录自己在学习生活中遇到的困难,包括关于前端开发方面学习困惑,学习方法,以及学习干货分享等!
个人专属站点www.TencentIT.com
展开
-
Vue3写法注意事项
Vue3写法注意事项原创 2022-10-24 15:34:38 · 499 阅读 · 0 评论 -
vue3 setup语法糖
Vue3 Setup 语法糖原创 2022-08-26 18:01:58 · 1745 阅读 · 0 评论 -
Vue解决webpack打包后请求接口404问题
Vue解决webpack打包后请求接口404问题原创 2022-06-28 17:25:49 · 3710 阅读 · 1 评论 -
vue项目中http请求中如何携带token
http请求中全局配置token原创 2022-06-12 13:48:48 · 7706 阅读 · 0 评论 -
nvm安装 nodejs 时报错:http://your_urllatest/SHASUMS256.txt.
Windows电脑使用nvm命令切换node版本报错Could not retrieve https://nodejs.org/dist/latest/SHASUMS256.txt.如下图如何解决添加如下代码:arch: 64proxy: nonenode_mirror: http://npm.taobao.org/mirrors/node/npm_mirror: https://npm.taobao.org/mirrors/npm/切换本地nvm下载命令获取获取依赖地址,手动改成原创 2022-05-13 15:25:40 · 744 阅读 · 0 评论 -
http请求的思考
http请求分类:get 请求 一般是获取列表数据 ,获取信息post 请求 一般是提交数据,常用于新增接口put请求 一般是修改数据,常用于编辑接口delete请求 一般是用于删除接口请求分为两种:1. 简单请求get, post 属于简单请求2. 非简单请求put delete属于非简单请求另外还有一种情况,content-type 为 application/json 类型时,也是属于非简单请求,例如,有些post请求,content-type 有时候为 applicatio原创 2020-10-28 16:59:30 · 134 阅读 · 0 评论 -
vue中赋值操作深入
直接对computed的变量进行赋值,这个操作说不行的,如果需要改变computed里面变量的值,需要改变这个变量里面依赖的变量,依赖的变量值发生了改变,computed里面就能监听到变化,自然而然computed里变量的值就发生了变化;引用赋值的思考 data() { return {productTypeList: [] }; }, created() { this.productTypeList = this.$store.state.productT..原创 2020-10-28 16:13:49 · 3914 阅读 · 0 评论 -
element-ui form表单键盘回车键enter会导致整个页面的刷新问题
问题以下代码,此时按 enter 回车键,整个页面都会刷新<el-form /> <el-form-item> <el-input v-model="query"></el-input> </el-form-item></el-form>原因当一个form元素中只有一个输入框时,在该输入框中按下回车应提交该表单。所以整个页面就刷新了。解决办法在el-form便签里加上 @submit.native.prevent原创 2020-10-26 15:21:21 · 2535 阅读 · 0 评论 -
vue项目如何配置rem
在config文件夹下 新建一个rem.js文件(function(d, w) { const doc = d.documentElement; function rem() { const width = Math.min(doc.getBoundingClientRect().width, 768); doc.style.fontSize = width / 7.5 + 'px'; } rem(); w.addEventListener原创 2020-10-24 14:26:14 · 3553 阅读 · 0 评论 -
使用Vuex项目中刷新页面权限码消失的解决方案
开发项目中,关于项目中权限模块,前端的处理方式,存在本地sessionStorage 或者 localStorage里不太安全,存在vuex里,也就是存在内存里,是比较安全的,但是存在vuex内存里的话,会遇到一个问题,那就是刷新页面,vuex中存的权限对象就会消失,这也是vuex本身的缺点 。解决方案:在项目的路由守卫里,进行下处理,做个判断,每次进去一个新的路由模块的时候首先都会进入路由守卫,如果路由守卫里没有权限变量users,那么就再请求一次权限接口,然后从接口中把权限变量存到vuex中。上代原创 2020-09-17 11:56:59 · 745 阅读 · 0 评论 -
vue项目打包优化之-productionSourceMap设置
这个是优化之前项目打包后dist目录文件大小,约为20.6MB打包后里面的js文件****打包后每个js文件都有一个map文件map文件的作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。productionSourceMap: 改成false后优化后,打包目录大小优化后打包目录里的前端文件productionSourceMap: 改成false后 所有打包生成原创 2020-08-31 11:15:07 · 21579 阅读 · 4 评论 -
vue 中全局filter过滤器的配置及使用
在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可以考虑注册全局的过滤器。定义方法如下:新建filters/index.jsconst isNullOrEmpty = function(val) { if (val == null || val == "" || typeof(val) == undefined) { return原创 2020-08-26 11:16:50 · 1779 阅读 · 0 评论 -
Vue打包后JS文件夹中出现一些map文件的解决方法
1.在项目下进入目录:项目包/config/index.js找到productionSourceMap /* Source Maps */ productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production devtool: '#source-map',2.将productionSourceMap的true改为false即可 productionSo原创 2020-08-19 15:14:09 · 2362 阅读 · 0 评论 -
强制SPAN不换行
HTML代码 <span class="spanStyle">80000000</span> css代码.spanStyle{ white-space: nowrap; /*强制span不换行*/ display: inline-block; /*将span当做块级元素对待*/ width: 32px; /*限制宽度*/ overflow: hidden; /*超出宽度部分隐藏*/ text-overf原创 2020-08-17 17:15:36 · 708 阅读 · 0 评论 -
vue中关于数据是在父组件中获取还是子组件中获取的问题
描述:如果现在有一个父组件,3个子组件。 每个组件展示的数据不同,现在有2种数据获取方式。第一种,在父组件中获取所有的数据,然后使用props传递给每个子组件。第二种:各个子组件中获取各自的数据。你觉得哪种好?为什么?回答:根据实际业务来如果数据其他组件用不到,那么可以由子组件自己获取如果数据可能被同级组件 复用 共享 那么由父组件统一获取然后分发下去如果数据可能被跨级组件 复用 共享 那么你需要vuex 或者eventshub 统一分发至不同级别的组件...原创 2020-08-07 11:25:06 · 1615 阅读 · 0 评论 -
vue实现文件下载功能
方法1使用 超链接 href来实现方法2 掉接口走 blob形式里面有一个小坑,记得配置下axios,responseType: "blob"要不然下载的文件会偏大<a download="true" @click='certDownload' style="cursor:pointer;" > <i class="iconspoc2 iconxiazai" aria-hidden="true" style="color: #326ED原创 2020-07-15 15:27:57 · 5404 阅读 · 0 评论 -
巧妙使用 translate(-50%,-50%)
如果知道宽高 正常使用 绝对定位,left: 50;top:50%; margin-left: -width / 2; margtin-top:-height/2;在 不知道宽高的情况下,如何做?translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.。当使用:top: 50%;left: 50%;, 是以左上角为原点,故不处于中心位置translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。原创 2020-07-10 11:20:36 · 803 阅读 · 2 评论 -
Vue项目中使用setTimeout存在的潜在问题
在开发项目中遇到这样的序曲,点击按钮弹框,每次进入的时候都需要默认选中Android,这个时候就遇到了一个小坑,当用户点击弹框后,选择iOS,再点击cancel或者OK,楼主在开发的时候,点击cancel按钮,执行下面代码 this.showDialog = false; // 关闭弹框 this.createForm.platform = "Android"; // 重置下拉框的默认选择项为Android this.createForm.secureCoreVersion = ""; // 清空输原创 2020-07-02 15:42:33 · 1116 阅读 · 0 评论 -
如何删除node_modules
1.安装npm包–rimrafnpm install rimraf -g2.在cmd指令下,进入所需删除的node_modules文件夹的位置,再输入指令rimraf node_modules3.简单粗暴得秒删完成原创 2020-06-29 10:46:56 · 739 阅读 · 0 评论 -
element-ui中如何设置el-dropdown-menu的top值?
需求:调整elementUI dropdown 下拉菜单默认的高度样式,发现使用/deep/ .el-dropdown-menu .el-popper { top: 50px !important;}没有起效果,最终的解决办法.el-dropdown-menu { top: 40px !important;}在当前文件 直接这么写就行,不用加deep,就能修改成功,是不是很方便~...原创 2020-06-10 09:32:57 · 4778 阅读 · 2 评论 -
如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题
情景:开发PC端管理系统,项目左侧目录可收缩,右侧是对应的页面,右侧页面里面包含了echarts开发的几个折线图,如图:当左侧目录展开的时候,会把右侧页面压缩,右侧页面的echarts折线图宽度就会发生改变,因为项目考虑到适配大屏的问题,所以,右侧两个echarts使用的都是百分比宽度,左侧菜单展开后的样子如图:会导致echarts折线图超出画布,所以为了解决这个问题,第一个想法是:...原创 2020-04-15 16:09:35 · 7690 阅读 · 24 评论 -
单项数据流☞Vue里面父组件给子组件传递数据
Vue 里面 父组件 传递给子组件是单项数据流,父组件给子组件传递值,不允许直接在子组件里面进行修改,如果直接在子组件里面修改父组件传递过来的值,虽然能修改成功 ,但是违背了Vue 里面的单项数据流,控制台会报错,为什么会这么设计呢???根本原因:因为如果父组件给子组件传递的是一个对象,这个对象在多个子组件里面使用,某个子组件把父组件传递过来的对象给修改后,会导致其他子组件也会受到影响。...原创 2019-10-24 20:43:36 · 112 阅读 · 0 评论 -
vue代码给变量初始化小技巧
原来的写法:data () { return { overviewData: null, } }但是 template里面需要用到overviewData里面的属性比如 <div class="left_cont">{{overviewData.isAlphaIns}}</div> <div class="right_con...原创 2019-10-15 16:48:29 · 2232 阅读 · 0 评论 -
Vue h5 里面如何动态设置返回时候meta 里面的title属性
Vue h5 里面如何动态设置返回时候meta 里面的title属性百度了很多博客,有两种方法,方法1 :通过设置router.js 里面,路由切换时候 修改 meta 属性 但是感觉没必要这样{ path: '/teachers', name: 'TDetail', component: TDetail, meta: { ...原创 2019-10-09 15:41:18 · 2322 阅读 · 1 评论 -
基于Swiper封装的图片滑动框架
手动封装一个图片滑动插件技术栈Vue + swiper引入 vue-awesome-swiperimport { swiper, swiperSlide } from 'vue-awesome-swiper'import 'swiper/dist/css/swiper.css'主要是利用swiper的滑动 ,<template> <div class="swi...原创 2019-10-08 21:03:36 · 420 阅读 · 0 评论 -
Vue watch & computed之深入思考比较
watch computed属性1 watch属性每次监听一个属性,其实是执行这个属性里面的handler,watch: { firstName : { handler (newName, oldName) { this.firstName = newName + ' ' + oldName }, immedi...原创 2019-08-22 21:07:11 · 636 阅读 · 0 评论 -
vue2.0修饰符sync用法
vue2.0修饰符sync用法如果子组件是一个弹窗,我们想通过点击关闭按钮来关闭子组件弹窗,子组件弹窗的v-show由变量isVisible控制,这个变量通过props由父组件来注入,而子组件无法改变props里面的变量的值,但可以通过sync修饰来实现,代码如下:子组件:<button @click="close">关闭</button>复制代码export...转载 2019-06-24 20:03:47 · 352 阅读 · 0 评论