Vue
文章平均质量分 60
一个爱运动的前端程序媛
这个作者很懒,什么都没留下…
展开
-
Vue中获取第三方UI组件库类名并修改样式
前言明明是比较简单的问题,也曾经遇见过两次,被我整复杂了,愣是来回试了一个多小时,好记性不如烂笔头,为了防止下次还走弯路,记录一下,提醒自己。问题想要修改第三方组件库 loading 组件的样式,无论如何覆盖样式都不生效,加了 /deep/ 和 !important 也是白搭。排查思路如下:查看想要覆盖的样式是否是行内样式,不是行内样式,根据其优先级才可以覆盖生效 ---- 不是行内样式;加 /deep/ 获取类名,未生效,加 !important, 不生效;这里踩了一个大坑,以前遇到过原创 2021-10-28 21:00:46 · 742 阅读 · 0 评论 -
Vue-SSR 客服端混合失败(Vue hydration fails)
Lynne,一个能哭爱笑永远少女心的前端开发工程师。身处互联网浪潮之中,热爱生活与技术。前言前一阵遇到了一个Bug…Error: [nuxt] Error while mounting app: HierarchyRequestError: Failed to execute 'appendChild' on 'Node':This node type does not support this method. at some-file.js:1整整排查了2个多小时,如果要追究其根本原因,找.翻译 2021-06-26 00:04:42 · 4629 阅读 · 3 评论 -
postcss-pxtorem中使某些样式不进行rem转换
在移动端项目中使用 postcss-pxtorem 做适配,同时也使用到了第三方 UI 库。在多数时候如果我们不希望对某些文件下的组件做 px 转 rem 处理,可以在配置文件 postcssrc.js 中配置postcss-pxtorem 的 exclude 属性来过滤掉。exclude 配置的值可以是字符串也可以是正则匹配,它匹配的是文件名或目录。用法如下:module.exports = { "plugins": { "postcss-import": {}, "postcs原创 2021-04-25 13:09:04 · 9129 阅读 · 3 评论 -
Vue进阶系列之计算属性Computed传参
作为一名进击中的前端小菜鸡,当然要会用Vue呀,还得熟练应用,计算属性computed大家也一定不陌生,但是如果遇到要传参的情况要怎么处理呢?我们知道,计算属性computed和方法method的用法及作用极为相似,区别在于计算属性基于响应式依赖进行缓存,而函数在每次重新渲染都会重新求值。方法的传参我们也应用得炉火纯青,毕竟函数传参嘛,怎么好意思说不会呢?因此我们第一反应都是像方法一样在计算属性中传参。次出我们要注意区分,计算属性是个属性,不能像函数方法一样使用,直接在属性内传参,但我们可以通过返回一个原创 2021-04-03 18:24:32 · 1107 阅读 · 0 评论 -
深入学习服务端渲染原理及实现
一、 CSR vs SSR不同于传统拉取JS进行解析渲染的CSR(JS负责进行页面渲染),SSR实现了服务器端直接返回Html代码让浏览器进行渲染。由此,我们就很容易理解以下代码实现了一个页面SSR:// server.jsvar express = require('express')var app = express()app.get('/', (req, res) => { res.send( ` <html> <head>原创 2021-02-21 21:10:58 · 456 阅读 · 0 评论 -
项目实战跨域之配置nginx反向代理(基于开发环境和生产环境分析后端分别运行在本地和服务端的情况)
问题描述:前端后台项目都在本地运行,考虑到端口不同,在前端配置了代理如下,能够实现跨域请求,正常获取数据。但当我把后台项目都迁移到服务器运行时,前台却总是获取不到数据。最近在VUE项目中遇到Ajax异步请求的跨域问题,之前也有系统地学习过跨域问题,网上关于跨域的解决方案整理有很多,我就不再赘述,只在本次实战中提供个人经验。我选择了传说中最简单的跨域解决方案—nginx反向代,那么根据前后端项目都运行在本地(前端开发环境)、后端运行在服务器、前端项目分别运行在本地(前端开发环境)或者服务端进行以下三种情原创 2020-08-10 07:20:30 · 704 阅读 · 0 评论 -
最全解决方案:Vue 项目中 Swiper 轮播图分页器 swiper-pagination 无法显示问题(解决方案集合)
最近用Vue做项目需要加个轮播效果,结果分页器死活出不来,但轮播效果和前进后退箭头以及滚动栏都是正常显示的。基础代码如下:<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div&g原创 2020-07-25 23:16:24 · 12389 阅读 · 19 评论 -
Vue组件编写之Alert提示框组件编写
Alert提示框的vue组件编写最近一直学习vue,跟着视频敲代码,敲了两三个组件后,终于对编写组件有一个大致的思路了,以下通过编写一个alert提示框组件大致梳理一下我编写组件的思路。主要分为三个部分:组件引入(注册路由器)、定义组件内容样式及实现组件间通信。(注册路由器使用路由组件也可放到最后一步,个人习惯先引入然后定义组件及样式便于观察组件显示效果)下面是本组件引入后显示效果,通过登匹配验证为false触发alert提示框显示,点击确认关闭提示框::组件引入一种是写入路由,要先在在rou原创 2020-05-11 18:04:19 · 1417 阅读 · 0 评论