舞动的灵魂

Vite

构建生产版本

自定义 chunk 及静态资源路径

使用 vite 默认选项打包出来的产物位于项目根目录下的 dist 文件夹中，里面包含了

• assets 文件夹

• index.html

• 原 public 文件夹中的内容

assets 文件夹中包含了所有的 js、css 以及图片文件。如果我们想要将它们分开，可以进行如下配置：

el-backtop 不显示问题

问题描述

官方文档的示例如下：

1
2
3
4

<template>
  Scroll down to see the bottom-right button.
  <el-backtop :right="100" :bottom="100" />
</template>

直接拿来用会发现返回顶部的按钮根本不显示，这是因为 target 属性是必填的。

target 是指触发滚动的对象，其值是一个类的字符串，该类对应的元素一般是 el-backtop 的父元素，且其能够发生滚动，即拥有以下属性：

1
2
3
4
5
6

height: 200px;
// 或
max-height: 200px;
// 或
flex: 1;
overflow: auto;

TS 对象动态 key 类型报错

问题一

问题描述

先声明一个接口：

1
2
3
4
5

interface User {
    name: string;
    sex: string;
    email: string;
}

初始化项目

新建一个项目文件夹，在终端打开，执行

1

npm init

之后，会在项目根目录下出现一个 package.json 文件。
然后在项目根目录下新建 src 文件夹，在此文件夹下新建 main.js 入口文件和 index.html 模板文件。

HTML体系中，最常用的绘制矢量图的技术是 SVG 和 HTML5 新增加的 canvas 元素。这两种技术都支持绘制矢量图和光栅图。不过 canvas 更偏重于动画的制作。所以，绘制矢量图的大任落到了 SVG 身上。

SVG简介

可缩放矢量图形（Scalable Vector Graphics，简称 SVG）是一种使用 XML 来描述二维图形的语言（SVG 严格遵从 XML 语法）。 SVG 允许三种类型的图形对象：矢量图形形状（例如由直线和曲线组成的路径）、图像和文本。 可以将图形对象（包括文本）分组、样式化、转换和组合到以前呈现的对象中。 SVG 功能集包括嵌套转换、剪切路径、alpha 蒙板和模板对象。

什么是网格布局

讲到布局，我们就会想到 flex 布局，但 grid 布局更加强大。flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

波纹效果

假设 .waves-ripple 类是实现波纹效果的样式，那么它在初始时是一个大小固定的透明的圆，圆心是鼠标点击的地方。在结束时它的直径是目标元素对角线的长度，而且圆心是目标元素的中心。波纹效果就是通过改变它的透明度、伸缩性、位置再加上过渡来实现的。

Intersection Observer API 提供了一种异步检测目标元素与根元素或 viewport 相交情况变化的方法。检测一个元素是否出现在视口中也是它的一个应用。

下面这些情况都需要用到相交检测：

• 图片懒加载：当图片滚动到可见时才进行加载；

• 内容无限滚动：也就是用户滚动到接近内容底部时直接加载更多；

• 在用户看见某个区域时执行任务或播放动画。

完整 API 见：Intersection Observer API - Web API 接口参考 | MDN。

TS 声明文件

引入/创建声明文件

在使用 TypeScript 写程序的时候，可能会需要使用到 JavaScript 库，因为历史遗留问题，现在非常多的第三方库依然是用 JavaScript 进行编写，但是大多数情况下，库的所有者已经帮你写好了 TypeScript 声明文件，即 .d.ts 文件。

如果给向下滚动的页面增加一些细微的动画，这往往能给浏览者带来更好的体验。这往往可以通过触发新进入视口的元素的动画来实现。现在，我们可以通过调用库来更快更方便的实现，wow.js 和 scrollreveal.js 都是不错的选择。