![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小储今天暴富了
努力考公,努力考公,努力考公~
展开
-
vue组件传参的方法--bus事件总线
vue项目中bus事件的使用原创 2023-02-16 14:55:47 · 300 阅读 · 0 评论 -
VUE更改项目默认图标
运行后你会发现一个比较神奇的事:你之前特别想替换的Vue图标 它自动变成了你的图标!这样的话就可以删除static文件夹,然后将index.html代码修改成以前的(重新运行后也可以不手动删那两行代码,它可以自动变成下面这样)使用方法:下载软件后,直接双击exe文件完成自动安装,然后如下图所示,右键点击需要转化的PNG图片,可以发现此时选项中多出了“”选项,直接点击,然后就会发现此文件夹中已经多出了一项同名ICO文件。把其他格式的图片转为ico格式的软件用的是:PNG-to-ICO。原创 2022-12-30 11:42:33 · 2888 阅读 · 0 评论 -
生产环境打包去除console.log
其中环境的配置在package.json文件里。注意 环境和mode后面的字段匹配对应上。原创 2022-12-29 18:03:11 · 221 阅读 · 0 评论 -
理解vue生命周期以及父子组件的生命周期顺序
更新前后: beforeUpdate/updated 销毁前后: beforeDestroy/destroyed。创建前后: beforeCreate/created 渲染前后: beforeMount/mounted。每个vue实例都有一个生命周期 一共分为八个阶段。但是dom结构依然存在。原创 2022-12-29 15:08:55 · 1034 阅读 · 0 评论 -
vue动态组件切换
在需要动态切换组件的位置加入,其中currentTabName是当前切换的tab状态。页面里实时计算当前tab状态。原创 2022-12-28 11:06:11 · 142 阅读 · 0 评论 -
纯css定义样式变量,可全局使用
使用 CSS 变量会是更好的选择,有利于后期更改,精简代码,减少冗余,代码更直观,有利于响应式开发借助结构性伪类中的 :root{ } 中,在全局 :root{ } 中定义了一个 CSS 变量,命名为 --xxxx,名字前面一定要注意符号(--)原创 2022-12-09 17:12:10 · 1397 阅读 · 0 评论 -
vue中css变量的使用
1、css中声明变量--color:red2、使用变量color:var(--color) //color:red获取到全局声明变量值为reddata中声明变量colordata(){retrun {color:red}}或者使用this.$refs.devcolor.style.setProperty('--color',this.color)color:var(--color) //使用变量co原创 2022-12-07 14:58:42 · 5532 阅读 · 0 评论 -
Vue封装组件并发布到npm仓库(无第三方依赖)
使用Vue框架进行开发,组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用,甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用,比如iview、element-ui这一类的组件库。但是每个公司的需求是不一样的,我们可以封装自己的组件库并发布到npm上去,这样可以不用碰到相似的项目就复制一大串代码了,简洁明了,要用的时候可以直接从npm安装使用。封装的是Vue组件,所以我们直接在Vue脚手架项目里面进行封装即可(1)初始化Vue项目(2)运行项目 因为我们可能会封装多个原创 2022-12-07 14:39:08 · 2372 阅读 · 1 评论 -
vue中mixin使用和事件执行顺序
混入 (mixins):mixins就是组件的变量、方法抽离。方便在多个组件引用同样的方法(注意: 多个组件的mixin变量不会相互污染影响,每个引用都是独立的)vue页面:mixin页面: 事件钩子中,mixin优先组件执行1.不同名方法 - 正常调用2.mixin和组件 方法名同名:- mixin方法不执行被覆盖,组件方法正常执行 和普通组件的变量一样使用。注意: 多组件引用同一个mixin,不会相互污染改变变量原创 2022-12-05 12:14:13 · 1583 阅读 · 2 评论 -
transform:scale实现大屏自适应
大屏使用rem 耗时 而且对浏览器最小字体不支持,使用transform:scale可以节省百分之九十工作量且保证页面宽高在任何情况下等比例缩放一、使用步骤//先用设计图3840x1080的模式当基础宽高,项目开始可以根据设计图自定义// 1080px// 3840pxscale:1,}}}};}}以上就是今天要讲的方法,简介明了~希望可以帮到你~原创 2022-11-22 18:00:14 · 2511 阅读 · 0 评论 -
slot插槽封装公共组件
项目中不可避免的有很多相同的组件,封装公共组件可以简化代码,提高开发效率,slot可以完美的实现封装这个例子组件默认卡槽时如下但是组件有时又会有些许差异,比如会在最右边多一点东西,比如一个下拉框,这是就会使用具名卡槽。原创 2022-11-18 19:22:35 · 512 阅读 · 0 评论 -
axios前端请求全局封装及引入
说明:process.env.NODE_ENV的值是根据package.json文件mode 后面值确认的,根据不同的运 行命令获取不同的mode值,以便获取不同的baseURL。3.在utils文件夹里新建http.js文件,封装常见的get、post、put、delete等请求。2.在utils文件夹里新建request.js文件,同时引入ip-config文件。4.在入口文件main.js里全局引入http.js文件并全局挂载。原创 2022-11-08 15:09:52 · 568 阅读 · 0 评论 -
vue2 脚手架从0到1搭建完整项目
这里我们选择默认的纯净版vue2(不含router、vuex、ts、单元测试等)创建纯净版 vue2,(不含router、vuex、ts、单元测试等)空格键:切换选中,enter回车:选择结束 - 执行。项目名不能有大写字母,可用短横线、下划线。1.安装node(如果已安装可以忽略)检查是否安装成功命令:node -v。创建纯净版 vue3,(同上)2.安装脚手架:vue-cli。原创 2022-11-08 14:07:13 · 611 阅读 · 0 评论 -
Element ui 以及Echart 在vue项目里的按需引入
1.Element ui的按需引入(先使用npm/cnpm/yarn安装element ui,这里不详细描述)2.Echarts的按需引入(先使用npm/cnpm/yarn安装echarts,这里不详细描述)(1)在utils文件夹里添加echarts.js文件(文件名自定义)(1)安装 babel-plugin-component插件。(2)在babel.config.js文件里配置如下。(2)在main.js文件里全局引入。(3)在main.js里全局引入。原创 2022-11-08 11:54:45 · 489 阅读 · 0 评论 -
Vue配置文件中的devServer proxy配置方式详解
pathRewrite :检查代理的请求中是否有 /api ,有的话把 /api 替换为冒号后面的内容,案例为替换成空字符串,也就是删去 /api。所以代理完成后真正发送给后端的请求就是 http://XX.XX.XX.XX:8084/zzz/one。设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one。代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one ->2.代理多个接口( 即发送的请求不是都以 /abc 开头,例如下图)原创 2022-11-08 11:15:50 · 9118 阅读 · 0 评论 -
vue-cli打包部署性能优化
所以就会造成进入首页时,需要加载的内容过多,时间过长,在浏览器中可能会出现很久的空白页,从而降低用户体验,而运用路由懒加载是将各个模块分开打包,用户查看的时候再加载对应的模块,减少加载的时间,从而打开页面的速度也会变快。在assets文件夹里新建一个fonts文件夹,fonts下新建font.css 和 index.html 以及放入文件.ttf文件。“npm run build”之后,可以发现生成了许多“.gz”格式的文件,这些文件就是压缩后的。vue前端页面里会有很多不同的页面路由组件。原创 2022-11-01 17:36:13 · 456 阅读 · 0 评论 -
vue底层原理总结
面试常问vue相关底层总结原创 2022-11-01 16:26:48 · 2517 阅读 · 1 评论