css，sass，less，elementplus.....

码龄3年

关注

原创 2025-03-24 13:28:32 409 阅读 GEO检测

从ElementUI升级到ElementPlus，我的表单组件踩了哪些坑？本文分享了从ElementUI升级到ElementPlus过程中表单组件遇到的常见问题与解决方案。重点分析了验证方法调用方式的变化、组合式API下的表单验证陷阱、样式类名的破坏性变更等关键差异，并提供了实用的升级检查清单，帮助开发者顺利完成技术栈迁移。阅读详情

element-plus

步骤

先在项目下执行安装语句
执行按需导入的命令
按照官方文档修改vitest.json

图标引用

在阿里云图标库得先加入购物车然后刷新！！！！！！！！！！！！！
第二步骤和第三步

sass样式定制

npm -i sass -D
在项目下准备定制的样式文件 styles/element/index.scss(!注意这里是.scss文件
在vitest.json 修改配置文件

Components({
      resolvers: [
        ElementPlusResolver({importStyle:"sass"})
      ],
    }),

css:{
    preprocessorOptions:{
      scss:{
        additionalData:'@use"@/styles/element/index.scss" as*; '
      }
    }
   }

关于scss的两种全局注入方式分析

好的，我现在需要回答用户的问题：“三个不都作用于全局有什么区别吗”。用户之前询问了为什么三个SCSS文件被分成不同的处理方式，而这次的问题是在确认这三个文件是否都是全局作用，以及它们的区别在哪里。

首先，我需要回顾之前的对话。用户提供了三个SCSS文件，分别处理变量、Element Plus主题覆盖和重置样式。前两个通过Vite配置全局注入，第三个在main.js中引入。用户现在可能不太明白，既然三个都是全局的，为何处理方式不同，以及它们的区别到底在哪里。

用户可能存在的疑问点：

如果三个文件都是全局生效的，为什么需要不同的引入方式？
它们的全局作用有什么不同？
为什么变量文件需要通过Vite配置，而样式文件直接引入？

我需要分步骤解释这三个文件在全局作用上的差异，以及处理方式不同的原因。可能需要从SCSS预处理和CSS实际应用的区别入手。比如，变量需要在编译阶段被所有组件使用，而样式文件直接引入则属于常规的全局CSS，不需要预处理。同时，要强调即使都是全局，但作用层面不同，一个是在预处理阶段注入变量，另一个是直接生成CSS样式。

还需要注意用户可能对Vite的工作流程不太清楚，所以可能需要简要说明Vite如何处理SCSS文件，特别是preprocessorOptions的作用，以及直接在JS中引入CSS的效果。例如，通过Vite注入的SCSS变量会在每个组件编译时包含这些变量，而直接引入的CSS则是全局样式表的一部分。

另外，用户提到的第三个文件包含重置样式和工具类，这些属于具体的CSS规则，不需要变量处理，因此直接引入即可。而前两个文件涉及SCSS变量和主题覆盖，必须通过预处理器配置，确保在编译时正确处理。

需要避免使用技术术语过多，尽量用通俗的语言解释，同时结构清晰，分点说明。可能还需要举例说明，比如如果变量不在Vite中配置，每个组件需要手动引入，导致冗余；而直接引入CSS在main.js则让所有页面都加载这些样式。

最后，总结它们的区别在于作用层面和编译处理方式，尽管都是全局，但处理方式因内容类型而异，以达到最佳实践和项目维护的便利性。

这三个文件虽然都作用于全局，但它们的 作用层面、编译方式和应用场景 存在本质区别，具体差异如下：

1. 第一个文件（变量定义）

$xtxColor: #27ba9b;
$helpColor: #e26237;
// ...其他变量

作用层面：SCSS 预处理阶段的全局变量
这些变量需要通过 SCSS 预处理器解析后，才能被其他 SCSS 文件或组件使用（如 color: $xtxColor;）。
如果未全局注入，每个使用变量的组件都需手动 @import，导致代码冗余。
- 编译方式：通过 vite.config.js 的 preprocessorOptions 注入
```
css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/styles/variables.scss";`
    }
  }
}
```
优势：在编译时自动注入到所有 SCSS 文件的头部，所有组件无需手动引入即可使用变量。
必要性：SCSS 变量本身是静态的，需在代码编译阶段处理，无法直接通过 JS 运行时加载。

2. 第二个文件（ElementPlus 主题覆盖）

@forward 'element-plus/theme-chalk/src/common/var.scss' with (...);

作用层面：覆盖 UI 库（ElementPlus）的底层主题变量
修改的是 ElementPlus 组件内部的 SCSS 变量（如 $colors.primary.base），影响组件默认样式。
需在组件源码编译前完成变量覆盖，否则无法生效。
- 编译方式：同样通过 preprocessorOptions 注入
原因：ElementPlus 的样式文件在编译时会读取这些变量，必须通过预处理器在编译阶段注入修改后的值。
特殊性：如果直接在 JS 中引入此文件，变量覆盖会发生在运行时，此时 ElementPlus 的样式已编译完成，修改无效。

3. 第三个文件（全局重置样式）

* { box-sizing: border-box; }
body { color: #333; }
.ellipsis { ... }

作用层面：浏览器渲染阶段的全局 CSS 规则
直接作用于 DOM 元素（如 body、a 标签），或定义工具类（如 .ellipsis）。
不需要依赖 SCSS 变量或预处理逻辑，只需最终生成的 CSS 生效即可。
- 编译方式：通过 main.js 直接引入
```
import '@/styles/reset.scss';
```
优势：作为全局 CSS 直接插入到页面，所有组件和 HTML 元素自动继承。
必要性：无需预处理器的变量解析，直接通过 CSS 规则生效。
优先级问题：某些重置样式（如 body 的 min-width）可能需要覆盖第三方库的默认值，直接全局引入可确保样式层级优先级。

总结：同为“全局”，但作用阶段不同

文件类型	作用阶段	处理方式	必要性
SCSS 变量	编译时（预处理器阶段）	`vite.config.js` 注入	确保所有组件共享静态变量
主题覆盖变量	编译时（UI 库编译前）	`vite.config.js` 注入	修改第三方库的内部变量
全局 CSS 规则	运行时（浏览器渲染）	`main.js` 直接引入	直接作用于 DOM 和工具类

即使都作用于全局，编译阶段和运行时阶段的分离能避免冗余代码、确保变量覆盖优先级，同时优化构建流程。

css复习

属性

color font-size(字号大小) font-weight（字体加粗font-weight:bold font-weight:normal font-style(italic normal是否斜体) text-decoration(underline none是否有下划线)
background-color（背景颜色）
字体属性和文本属性
- 单位分为绝对单位和相对单位(px)
- font-size line-height行高（这两个一般为偶数）
- font-famliy字体样式
- font-style是否斜体 font-weight是否粗体
- 如果需要对英文和中文的family都设置的话：英文必须在前面
文本属性
- 常见的文本属性：
  - letter-sapcing 单个字母之间的间距word-spacing 单词之间的间距
  - text-decoration：none/undrtline/line-through中划线/overline上划线
  - text-align当前容器的对齐方式
overflow属性
auto（有超出就用滚动条） hidden（超出的地方就隐藏） visible（超出就直接显示）
鼠标属性
p:hover{
cursor:auto/pointer;（还有其他很多可以自己查找）
}

flex

flex 布局的优势
flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。
但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 flex 提供了非常丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。
flex 布局不支持 IE9 及以下的版本；IE10及以上也只是部分支持。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
但是，比如网易新闻、淘宝这样的大型网站，面对的是海量用户，即便使用低版本浏览器的用户比例很少，但绝对基数仍然是很庞大的。因此，这些网站为了兼容低版本的 IE 浏览器，暂时还不敢尝试使用 flex 布局。

Flexbox布局的核心知识点总结：

2. Flex 容器属性

display: flex;：将容器设置为 Flexbox 布局。
flex-direction：定义主轴方向，可选值：
- row（默认，水平排列）
- row-reverse（水平反向排列）
- column（垂直排列）
- column-reverse（垂直反向排列）。
flex-wrap：控制子元素是否换行，可选值：
- nowrap（默认，不换行）
- wrap（换行）
- wrap-reverse（反向换行）。
justify-content：定义子元素在主轴上的对齐方式，可选值：
- flex-start（默认，左对齐）
- flex-end（右对齐）
- center（居中对齐）
- space-between（两端对齐，间隔相等）
- space-around（每个子元素两侧间隔相等）。
align-items：定义子元素在交叉轴上的对齐方式，可选值：
- flex-start（顶部对齐）
- flex-end（底部对齐）
- center（居中对齐）
- baseline（基线对齐）
- stretch（默认，拉伸以填满容器）。
align-content：定义多行子元素在交叉轴上的对齐方式，可选值与justify-content类似。

3. Flex 子元素属性

flex-grow：定义子元素在剩余空间中的放大比例，默认值为0（不放大）。值越大，分配的空间越多。
flex-shrink：定义子元素在空间不足时的缩小比例，默认值为1（等比例缩小）。值为0时，子元素不缩小。
flex-basis：定义子元素的初始大小，默认值为auto（根据内容决定）。可以设置为具体长度（如100px）或百分比。
flex：flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。常用值：
- flex: 1：等价于1 1 0%，子元素等分剩余空间。
- flex: auto：等价于1 1 auto，子元素根据内容分配空间。
- flex: none：等价于0 0 auto，子元素不放大也不缩小。
order：定义子元素的排列顺序，数值越小越靠前，默认值为0。
align-self：覆盖容器的align-items属性，单独设置子元素在交叉轴上的对齐方式。

4. Flexbox 的计算规则

剩余空间：容器宽度减去所有子元素的flex-basis值。
放大比例：剩余空间按flex-grow值分配。
缩小比例：空间不足时，子元素按flex-shrink值缩小。

5. Flexbox 的常见应用

水平居中：justify-content: center;。
垂直居中：align-items: center;。
等分布局：flex: 1;。
响应式布局：通过flex-wrap和flex-grow实现自适应。

6. 注意事项

兼容性：Flexbox 在现代浏览器中广泛支持，但在旧版浏览器（如 IE10 及以下）中可能需要使用前缀（如-webkit-flex）。
默认值：flex-grow为0，flex-shrink为1，flex-basis为auto。
flex-basis优先级：当同时设置flex-basis和width时，flex-basis优先。

通过以上知识点，可以灵活使用 Flexbox 实现各种复杂的布局需求。

遗忘

选择器

在这里插入图片描述

`&`符号的作用

在CSS中，&符号通常用于引用父选择器或实现嵌套规则。然而，需要注意的是，CSS本身并不直接支持&符号作为选择器的一部分，而是某些CSS预处理器（如Sass或Less）中引入了这一语法。

引用父选择器：
在Sass或Less等CSS预处理器中，&符号用于引用当前选择器的父选择器。例如：

   .parent & .child {
     color: blue;
   }

这段代码会将.child类的样式应用到.parent类的子元素上，相当于CSS中的.parent .child { color: blue; } 。

嵌套规则：
&符号还可以用于嵌套规则，使得代码更加简洁和模块化。例如：

   .button {
     background-color: red;
     &.active {
       background-color: blue;
     }
   }

这段代码会生成以下CSS：

   .button {
     background-color: red;
   }
   .button.active {
     background-color: blue;
   }

这种嵌套方式可以避免重复书写相同的父选择器。

生成重复的类名：
&符号还可以用于生成重复的类名，从而简化代码。例如：

   .item {
     &-one, &-two, &-three {
       color: red;
     }
   }

这段代码会生成以下CSS：

   .item-one {
     color: red;
   }
   .item-two {
     color: red;
   }
   .item-three {
     color: red;
   }

这种用法在需要为多个元素应用相同样式的场景中非常有用。

改变选择器顺序：
在某些情况下，&符号可以用于改变选择器的顺序。例如：

   .a {
     & + .b {
       display: block;
     }
   }

这段代码会将.b类的样式应用到紧接在.a类之后的元素上。

生成组合选择器：
&符号还可以用于生成组合选择器。例如：

   .a {
     &-b, &-c {
       font-size: 16px;
     }
   }

这段代码会生成以下CSS：

   .a-b {
     font-size: 16px;
   }
   .a-c {
     font-size: 16px;
   }

这种用法在需要为多个组合选择器应用相同样式的场景中非常有用

ie盒子和标准盒子

在这里插入图片描述

块级元素和行内元素

在这里插入图片描述

DAY ONE

如何让body中的如登录页面位于页面之居中

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;//前四条配合
    overflow: hidden;
}

关于flex

1. 默认行为

flex-grow：默认值为0，表示子组件不会分配剩余空间。
flex-shrink：默认值为1，表示子组件在空间不足时会缩小。
flex-basis：默认值为auto，表示子组件的初始大小由内容或显式设置的宽度决定。

2. 示例

<div class="container">
    <div class="item item1">Item 1</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
</div>

.container {
    display: flex;
    width: 600px;
}

.item {
    border: 1px solid black;
    padding: 10px;
}

.item1 {
    flex: 1; /* 占据剩余空间的1份 */
}

.item2 {
    /* 未设置 flex，默认 flex-grow: 0 */
}

.item3 {
    flex: 1; /* 占据剩余空间的1份 */
}

3. 效果分析

假设三个子组件的初始内容宽度分别为100px、100px和100px。
剩余空间 = 600px - 300px = 300px。
item1和item3各占据1份，item2不分配剩余空间。
分配比例 = 1 : 0 : 1。
实际宽度：
- item1 = 100px + (1 / 2) * 300px = 100px + 150px = 250px
- item2 = 100px（不分配剩余空间）
- item3 = 100px + (1 / 2) * 300px = 100px + 150px = 250px