舞动的灵魂
0%

发表于 分类于

在没有 scoped 时，我们写的所有样式都是全局样式，一旦类名重复，样式就会被更改，造成污染。scope 的作用就是防止样式污染。

scoped 原理

vue 中 scoped 主要是通过 postcss 实现的，转译代码时做了如下处理：

阅读全文 »

发表于 分类于

Promise/A+ 规范

Promise/A+

promise 是一个带有 then 方法的对象或者函数。

promise 表示异步操作的最终结果。与 promise 交互的主要方式是通过其 then 方法，该方法注册回调以接收 promise 的最终值或 promise 无法实现的原因。

阅读全文 »

发表于 更新于 分类于

工具库

不兼容库

不兼容指不同时兼容 CommonJS 和 ESM，只能在其中一种模式下运行。

js 库

新创建一个工作目录，执行 npm init -y。修改 package.json 文件，将 type 设置为 mudule 或 commonjs。根据已选择的模块系统进行开发，开发完之后配置 package.json，之后便可直接发布。这种情况适用于开源的较小的库，可以不打包直接发布源码。

阅读全文 »

发表于 更新于 分类于

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 蒙板和模板对象。

阅读全文 »