Vue3 +TypeScript 项目总结

前端项目记录

一、Html + Css

1. css 属性继承问题

• 可继承属性
  • 字体相关属性
    • font-family ( 字体族 )
    • font-size ( 字体大小 )
    • font-weight ( 字体粗细 )
    • font-style ( 字体族 )
  • 文本相关属性
    • color ( 文本颜色 )
    • text-align ( 文本对齐方式 )
    • line-height ( 行高 )
  • 列表相关属性
    • line-style-type ( 列表项标记类型 )
    • line-style-position ( 列表项标记位置 )
• 不可继承属性
  • 盒模型相关属性
    • width ( 宽度 )
    • height ( 高度 )
    • margin ( 外边距 )
    • padding ( 内边距 )
    • border ( 边框 )
  • 背景相关属性
    • background-color ( 背景颜色 )
    • background-image ( 背景图像 )
• inherit关键字的主要作用是让元素强制继承其父元素的某个属性值，不管该属性在默认情况下是否具备继承性
  • 但是某些情况下，inherit 是无法继承父类属性的，而要解决这个问题，可能需要 ，比如 子类元素 设置高度为 height：100%，来继承父级的高度。
  • inherit 无法继承父级元素的情况有：
    • 父元素没有明确的高度。
    • 父元素的高度被绝对定位的子元素撑开。
    • 父元素的高度被浮动的子元素撑开。
    • 父元素使用flex布局。
      • 当父元素使用flex布局时，子元素默认会根据其内容的大小来决定宽度（主轴），而不是继承父元素的宽度（主轴）。
      • 而高度，子元素是会继承父元素的高度（侧轴）的。

2. 居中问题

• 当父级元素的布局为 display：flex，我们希望子元素（子元素无论是块级元素还是行内元素），可以通过设置子元素：margin：auto ；实现子元素水平和垂直居中。margin：xxpx auto xxpx 实现子元素水平居中。
• 如果不用弹性布局，使用子容器绝对定位，父容器相对定位，子容器即同样用margin：auto，并且加上 right：0，left：0，top：0，bottom：0，也可实现居中效果。该方法不推荐。如果只用 margin：auto，由于盒子问题，不能实现垂直居中效果。
• 文字居中（行内元素）：
  • 设置 line-height = height 达到文字居中的效果，但是当出现多行文字时，不不适用。
    
  • 弹性布局可以解决这个问题，父容器中 开始弹性布局：display：flex，并使用属性：align-items:center。
    
  • 如果不适用弹性布局，也可以让多上文字居中，使用 display：table-cell + vertical-align：middle 实现同样的效果。
    
• 如果子元素是块级元素，如何实现居中呢。

  • 使用弹性布局：display：flex，水平居中：justify-content：center，垂直居中：align-items：center。

  • 也可以父级用相对定位：position：relative，子级用绝对定位：position：absolute，并且子集位置相对于父级左侧和顶部位移 50%：left：50%，top:50%：
    

  • 最后子集还需要根据自己的宽度向上和向左位移50%：translate(-50%,-50%)；从而达到子容器居中效果。
    

3. 块级元素、行内快级元素、行内元素

• 块级元素（block）

  • 独占一行。

  • 多个块状元素标签写在一起，默认排列方式为从上至下。

  • 支持所有样式。

  • 不写宽度的时候，跟父容器的宽度相同，高度取决于内容的高度。

  • 所占区域是一个矩形。

  • 块级元素有：

    <address>// 定义地址<caption>// 定义表格标题<div>// 定义文档中的分区或节<dl>// 定义列表<dt>// 定义列表中的项目<dd>// 定义列表中定义条目<form>// 创建 HTML 表单<h1>// 定义最大的标题<h2>// 定义副标题<h3>// 定义标题<h4>// 定义标题<h5>// 定义标题<h6>// 定义最小的标题<hr>// 创建一条水平线<li>// 标签定义列表项目<ol>// 定义有序列表<ul>//定义无序列表<p>// 标签定义段落<table>//标签定义 HTML 表格<tbody>//定义标签表格主体（正文）<td>//表格中的标准单元格<tfoot>//定义表格的页脚（脚注或表注）<th>//定义表头单元格<thead>// 标签定义表格的表头<tr>// 定义表格中的行

• 行内元素：（inline）

  • 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化；

  • 高宽、行高无效，对外边距（margin）和内边距（padding）仅设置左右方向有效，上下无效；

  • 设置行高有效，等同于给父级元素设置行高；

  • 元素的宽度就是它包含的文字或图片的宽度，不可改变；

  • 行内元素中不能放块级元素，a 链接里面不能再放链接；

  • 行内元素最常使用的就是 span，其他的只在特定功能下使用。与之间只能包含文本和各种文本的修饰标签，如加粗标签、倾斜标签等，中还可以嵌套多层。

  • 行内元素有：

    <a>// 标签可定义锚<acronym>// 定义只取首字母缩写<b>// 字体加粗<br>// 换行<em>// 定义为强调的内容<i>// 斜体文本效果<kbd>// 定义键盘文本<label>// 标签为 input 元素定义标注（标记）<q>// 定义短的引用<select>// 创建单选或多选菜单<span>// 组合文档中的行内元素<strong>// 加粗<sub>// 定义下标文本<sup>// 定义上标文本<textarea>// 多行的文本输入控件

• 行内块元素（inline-block）

  • 高度、行高、外边距以及内边距都可以控制；
  • 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙，设置它上一级的 font-size 为 0，才会消除间隙；
  • 可以在一行中放置多个行内块级元素。比如：input、img就是行内块级元素，它可设置高宽以及一行多个；
  • 以下元素为行内块元素：

    <button>// 普通按钮<input>// 创建表单元素<textarea>// 创建表单文本域<img>// 插入图片

4. 定位 position

• position：用于指定一个元素在文档中的定位方式，其中的 top、right、bottom 和 left 属性则决定了该元素的最终位置。
  • relative：相对定位
    • 相对定位的元素是在文档中的正常位置偏移给定的值。
    • 不影响其他元素布局。
    • 相对于自身进行偏移。
    • 不会脱离文档流。
  • absolute：绝对定位
    • 绝对定位的元素脱离了文档流，绝对定位元素不占空间。
    • 具备内联盒子特性：宽度由内容决定。
    • 具备块级盒子特性：支持所有样式。
    • 绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位。通常父级容器添加 relative，就会相对于父级元素进行偏移。
  • fiexd：固定定位
    • 固定定位于绝对定位相似，但是会固定在可视区中。
    • 具备内联盒子特性：宽度由内容决定。
    • 具备块级盒子特性：支持所有样式。
    • 固定定位元素不受祖先元素影响。

5. 弹性布局 fiex

• 是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。

• 主轴与交叉轴：默认水平方向为主轴，垂直方向为交叉轴。

• display：flex，开启弹性布局，通常加载父级容器中，让子集元素进行弹性布局。关于弹性布局的属性需要区分是加在父级容器还是应该加在子集容器中。

  • 加在父级容器的属性：

    • flex-direction：可改变主轴的方向。

      • row：默认，水平，从左到右。
      • row-reverse：水平，从右到左。
      • column：垂直，从上到下。
      • column-reverse：垂直、从下到上。

    • flex-wrap：一行放不下的处理方式。

      • nowrap：默认值，弹性布局不会换行，如果容器放不下了，子元素的宽度会进行弹性的调整。当宽度小到最小宽度则会溢出。 如果子元素没有宽度，则子元素会根据内容调整宽度。如果子元素没有高度，则会和父级容器高度相同。

      • wrap：弹性布局会换行。如果是两行，且父容器有高度，则会将如容器的高度等分为2进行排列，如果是三行，则会等分三份。

      • 如果父容器没有高度，则高度自适应：

      • wrap-reverse：弹性布局会换行，但顺序相反。

    • flex-flow：【flex-direction】【flex-wrap】的简写版。

    • justify-content：决定 flex-direction 排列方向上的对其方式。

      • center，主轴上居中排列。

      • flex-end：主轴上的结束位置对其。
        

      • flex-start：默认值，主轴的起始位置对其。
        

      • space-around：项目两侧间隔相等，项目之间间隔为两侧间隔的两倍。
        

      • space-between：两端的项目会与容器的边缘对其，项目之间的间隔相等。
        

      • space-evenly：项目之间以及项目与容器边缘之间的间隔都相等。
        

    • align-items：设置项目在交叉轴上的对其方式。（针对每一行）

      • stretch：默认值，拉伸以填满，伸缩项目不能给高度才能有拉伸效果。

      • flex-start：交叉轴起点对其。
        

      • flex-end：交叉轴终点对其。
        

      • center：居中对其。不拉伸。

    • align-content：设置项目在交叉轴上的对齐方式。（针对整体）注：如果只有一行，没有出现换行的情况则不会生效。如果只有一样又想生效，可以使用 flex-wrap：wrap 来和 align-content 搭配使用。或者只用 align-items 即可。

      • stretch，默认值。拉伸以填满交叉轴空间（伸缩项目不能给高度才能有拉伸效果）。

      • flex-start：交叉轴起点对其。
        

      • flex-end：交叉轴终点对其。
        

      • center：交叉轴居中对齐。

      • space-around：交叉轴两侧间隔相等，项目之间的距离是两侧间隔的两倍。

      • space-between：交叉轴两端的项目与容器边缘对其，项目之间的间隔相等。

      • space-evenly：侧轴上项目之间以及项目与容器边缘之间的间隔都相等。

  • 加在子容器的属性：
    • order：默认情况下，弹性容器内的子元素或者网格容器内的项目会按照它们在 HTML 代码里的先后顺序进行排列。order 属性可让你对这个默认顺序进行修改。它的值是一个整数，元素会依据这个整数的大小来排序，数值小的元素会排在前
    • flex-grow：扩展比例
      • 默认值0，表示不占用剩余的空间间隙扩展自己的宽度。
      • 1：会占满剩余空间。
      • 大于1：和1效果一样。
      • （0，1）之间，所占宽度比例是父容器剩余宽度 * flex-grow值 所得到的宽度。
    • flex-shrink：收缩比例。
      • 默认值1，表示flex 容器空间不足时，元素的收缩比例。容器容量不足时，和容器大小相同。
      • 0：不收缩。子容器宽度大于父容器时，会溢出。
    • flex-basis：指定flex元素在主轴方向上的初始大小。优先级大于宽度或高度。
      • 默认值 auto：元素的初始大小由其内容决定。如果元素有明确的宽度或高度（如通过 width 或 height 属性设置），则 flex-basis 会采用这个值；如果没有明确设置，则根据内容的大小来确定。
      • 百分比值：基于其父弹性容器的大小来计算。
      • 长度值：可以使用像素（px）、em、rem 等单位来指定具体的大小。
      • 与 width 和 height 的关系：在弹性布局中，flex-basis 会覆盖 width（主轴为水平方向时）或 height（主轴为垂直方向时）属性。也就是说，如果同时设置了 flex-basis 和 width，flex-basis 的优先级更高。
    • flex：【flex-grow】【flex-shrink】【flex-basis】：三个属性的简写形式。
      • flex：1 1 auto 。可以简写为：flex：auto。可以拉伸，可以伸缩，不设置基准长度。
      • flex：1 1 0 。可简写为：flex：1（最常用）。可以拉伸，可以伸缩，设置基准长度为0。
      • flex：0 0 auto。可简写为 flex：none。不可以拉伸，不可以伸缩，不设置基准长度。
      • flex：0, 1 auto，可简写为 flex：0 auto。不可以拉伸，可以压缩，不设置基准长度。
    • align-self：用于弹性布局中单个项目在交叉轴上对其方式的属性。
      • auto：默认值，继承父容器的 align-self 的值。
      • flex-start：元素在交叉轴起点对其。
      • flex-end：元素在交叉轴终点对其。
      • center：元素在交叉轴居中对其。
      • baseline：元素根据其基线对齐。
      • stretch：元素在交叉轴拉伸以填满容器。

6. 子项分组布局

• 我们通常会遇到这样的布局常见，将内容分成两组，一组在右侧展示，一组在左侧展示，如下图：
  

• 方法一：

  • 我们可以使用弹性布局 display：flex 来实现这样的布局，将左右分成两组，并使用 justify-content：space-between，来实现左右布局，然后针对每组在此进行弹性布局，然后可以给每组中的成员之间增加间隙来实现。

    <!DOCTYPEhtml><html lang=""><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><link rel="stylesheet"href="iconfont.css"><title>左侧导航栏</title></head><body><divclass="main"><divclass="box">1</div><div><divclass="box">2</div><divclass="box">3</div></div></div></body><style type="text/css">.main{height:200px;background:skyblue;display:flex;justify-content:space-between;align-items:center;}.main div:nth-of-type(2){display:flex;margin-left:10px;}.main.box{width:50px;height:100px;background:pink;}</style></html>

  • 效果：
    

• 方法二：方法一还需要分组，有点麻烦。在不进行分组的情况下，借助 margin-righ：auto 该效果。我们希望第几个元素为改组的结尾，就可以给该元素添加 margin-righ:auto，从而达到分组效果。

  • margin-rigth：auto：在块级元素的水平布局中，浏览器会根据元素可用的水平空间，尽可能地将右侧外边距撑开。如果元素宽度固定，并且设置了 margin-left 和 margin-right 都为 auto，那么元素会在其父元素中水平居中。
  • 主要适用于块级元素。对于行内元素（如<span>），默认情况下该属性不会产生预期效果，除非将其 display 属性设置为 block、inline-block 或其他块级相关的值。
  • 代码如下：

    <!DOCTYPEhtml><html lang=""><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><link rel="stylesheet"href="iconfont.css"><title>左侧导航栏</title></head><body><divclass="main"><divclass="box">1</div><divclass="box">2</div><divclass="box">3</div></div></body><style type="text/css">.main{height:200px;background:skyblue;display:flex;justify-content:space-between;align-items:center;}.main div:nth-of-type(1){display:flex;margin-right:auto;}.main.box{width:50px;height:100px;background:pink;margin-right:10px;}</style></html>

  • 效果如下：
    

7. Grid 布局

1. Grid 容器属性

• display：grid，开启网格布局。

• grid-template-rows 于 grid-template-columns：

  • 基于网格行和列的维度，去定义网格线的名称和网格轨道的尺寸大小。
  • gird-template-columns：100px 100px 100px ：表示网格三列，每列宽度为100px。
  • gird-template-columns：100px 1fr 100px ：表示网格三列，左右两列宽度为100px，中间列占满剩余空间。
  • gird-template-columns：100px minmax（100px,1fr） 100px ：表示网格三列，左右两列宽度为100px，中间列占满剩余空间,当父容器缩小时，中间列也缩小，最小为100px。
  • gird-template-columns：100px 20% auto：20%表示第二列宽度为父容器宽度20%，auto表示占据剩下所有空间。
  • gird-template-columns：1fr 1fr 1fr：表示散列，每列宽度所占父容器的宽度比例为1:1：1。
  • gird-template-rows：100px 100px 100px：表示网格三行，每行高度为100px。
  • 如果出现多行多列，可以使用repeat进行简写。还可以设置auto-fill，自动根据父容器大小进行填充。
    
  • gird-template-columns：minmax（auto-fill，minmax(200px,1fr) ：可根据父容器自动调节，当如容器宽度变小是，还可将一行排列变为多行排列。如下例子，第二行开始为隐式网格。
    
    
  • 继续缩小宽度，则会换行。
    

• grid-template-areas：使用命名方式定义网格区域，需配合 子项 grid-area 属性进行使用。
  
  

• grid-template：[grid-template-rows][grid-template-columns][grid-template-areas] 属性的缩写。
  

• grid-row-gap、grid-column-gap、grid-gap：用来设置元素行列之间的间隙大小，推荐使用 row-gap、column-gap、gap。即去掉前缀 grid。

  • row-gap：行间距。
  • column-gap：列间距。
  • gap：是简写模式，gap【row-gap】【column-gap】。
  • 也可给弹性布局使用。

• justify-items、align-items、place-items：子容器在自己所在单元格的对齐方式。

  • justify-items：水平方向对其。
  • align-items：垂直方向对其。
  • place-items：【justify-item】【align-items】是简写模式。
    

• justify-content、align-content、place-content（复合写法）：同样是对其方式，但是指整个网格在父容器的对其方式。

• grid-auto-flow、grid-auto-rows、grid-auto-columns：指定在显示网格之外的隐式网格，如何排列及尺寸大小。

  • grid_auto-flow：row，默认值，行产生隐式网格。
  • grid-auto-rows：100px，调节产生隐式网格的高度。
  • grid-auto-flow：columns，列产生隐式网格。
  • grid-auto-columns：100px，调节产生隐式网格的宽度。

2. Grid 子项属性

• grid-column-start、grid-column-end、grid-row-start、grid-row-end：表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向
• 通过起始位置为终止位置，从而调节单元格在网格中的分布。
  
  
• grid-row、grid-column：是上面四个的简写形式。
  • grid-row：2 / 3：表示第二行开始，第三行结束。
  • gird-column：2 / 4：表示第二列开始，第四列结束。
• grid-area：是 grid-row 和 grid-column 的简写形式，关系对应如图。
  
  • 也可用 grid-area: 1 / 1 / span 2/ span 2，其中 span 2表示占据两行两列，span为关键字。
• justify-self、align-self、place-self：跟place-item用法相同，只不过是操作指定的子项的。可以设置子容器在位于单元格的位置，比如居中等。
  

8. 毛玻璃无效问题

• 容器添加毛玻璃效果：

backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background-color:rgba(255,255,255,0.2);

• 注意：
  • 子容器添加毛玻璃效果，需要父容器有背景色（部分背景色不明显）或背景图才会有效。
  • 如果不是给父容器添加背景，只是给相邻元素添加则不起效果。比如通过伪元素::before 来添加是无效的，必须是父容器添加背景。
  • 效果如下：
    

8. 滑动框问题

• 如果容器类的内容放不下了，希望可以向下滑动，并且不要显示滑动器。在父类容器上添加如下属性：

  overflow-y:auto;overflow-x:hidden;-ms-overflow-style:none;scrollbar-width:none;

二、Vue3

1. 数据绑定

1. 动态绑定样式

• vue 在上可以通过 :style 来动态的绑定的样式：
  
• 图中 display 通过 isCollapse 来动态确定 是否显示图标，其中的 isCollapse 也是响应式的，通过 changeCollapse 来改变值。
  

2. 引入自定义全局css

1. 创建全局css文件：global.css
   

2. 将 global.css 引入 main.ts
   

三、TypeScript

四、Router

• Vue-Router 官方地址：Vue-Router

• 使用步骤：

  1. 安装 vue-router：npm install vue-router@4
  2. 创建路由器实例：通常在文件夹router 下创建 index.ts：
     
  3. 注册路由器插件：
     

• 在 Vue Router 4 中，提供了三种创建路由历史记录的方法，分别是 createWebHistory、createWebHashHistory 和 createMemoryHistory，它们各自有不同的特点和适用场景：

  • createWebHistory：
    • createWebHistory 使用 HTML5 的 History API 来实现路由的切换，它会改变浏览器地址栏中的路径，并且不会在 URL 中添加 # 符号。例如，当你访问 https://example.com/about 时，地址栏会显示这个完整的路径。
  • 优点：
    • 美观性：URL 更简洁、自然，符合传统的 URL 格式，对用户和搜索引擎更友好。
    • SEO 友好：由于 URL 是正常的路径，搜索引擎可以更好地索引页面内容。
  • 缺点：
    • 服务器配置要求高：需要服务器端进行相应的配置，以确保在用户直接访问某个路由或者刷新页面时，服务器能够正确返回对应的 HTML 文件。例如，在使用 Node.js 的 Express 框架时，需要添加通配符路由来处理所有的请求。
  • 使用场景：
    • 适用于需要良好 SEO 支持的项目，如企业官网、博客等。
  • createWebHashHistory:
    • createWebHashHistory 使用URL 中的哈希值（#）来实现路由的切换。例如，当你访问 https://example.com/#/about 时，# 后面的部分 /about 就是路由路径。浏览器不会将哈希值发送到服务器，因此不会重新加载页面。
  • 优点：
    • 服务器配置简单：不需要服务器端进行特殊配置，因为服务器只处理 # 之前的部分，无论哈希值如何变化，服务器返回的都是同一个 HTML 文件。
    • 兼容性好：可以在不支持 HTML5 History API 的旧浏览器中使用。
  • 缺点：
    • URL 不美观：URL 中包含 # 符号，不够简洁，可能会让用户感觉不够专业。
    • SEO 较差：搜索引擎通常不会索引哈希值后面的内容，因此对 SEO 有一定的影响。
  • 适用场景：
    • 适用于对 SEO 要求不高，或者需要快速搭建项目且不想进行服务器配置的场景，如内部管理系统、单页应用原型等。
  • createMemoryHistory:
    • createMemoryHistory 在内存中维护一个路由栈，不依赖于浏览器的地址栏，也不会对浏览器的历史记录产生影响。它会在内存中模拟路由的切换，每次路由变化时，只是更新内存中的路由状态。
    • 优点：
      • 不依赖浏览器环境：可以在非浏览器环境中使用，如服务器端渲染（SSR）或者单元测试。
      • 灵活性高：可以在任何环境中模拟路由切换，方便进行测试和调试。
    • 缺点：
      • 无法直接在浏览器中使用：由于不依赖浏览器的地址栏，用户无法通过浏览器的前进、后退按钮来切换路由，也无法直接在浏览器中访问某个特定的路由。
    • 适用场景：
      • 适用于服务器端渲染（SSR）、单元测试等非浏览器环境的场景。