Unsplash Source
URL: source.unsplash.com
描述：从Unsplash获取高质量的随机图片，支持自定义尺寸和关键词搜索。
Lorem Picsum
URL: picsum.photos
描述：提供高质量的随机图片生成服务，支持自定义尺寸和模糊效果。
Picsum
URL: picsum.photos
描述：类似于Lorem Picsum，可以生成不同尺寸和风格的随机图片。
Placeholder.com
URL: placeholder.com
描述：一个简单快速的占位符图片生成器，可以自定义尺寸、颜色和文字。
Fill Murray
URL: fillmurray.com
描述：提供不同尺寸的Bill Murray随机图片，适合轻松娱乐使用。
Placekitten
URL: placekitten.com
描述：生成各种尺寸的可爱小猫图片，适合猫咪爱好者使用。
这些网站工具通常加载速度较快，提供的图片质量高，适用于各种项目和需求。
filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length >= 6);
console.log(result);replace() 方法返回一个新字符串，其中一个、多个或所有匹配的 pattern 被替换为 replacement。pattern 可以是字符串或 RegExp，replacement 可以是字符串或一个在每次匹配时调用的函数。如果 pattern 是字符串，则只会替换第一个匹配项。原始的字符串不会改变。
const paragraph = "I think Ruth's dog is cuter than your dog!";
console.log(paragraph.replace("Ruth's", 'my'));
// Expected output: "I think my dog is cuter than your dog!"
const regex = /Dog/i;
console.log(paragraph.replace(regex, 'ferret'));
// Expected output: "I think Ruth's ferret is cuter than your dog!"Object.keys() 静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
const object1 = {
a: 'somestring',
b: 42,
c: false,
};
console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]Object.values() 静态方法返回一个给定对象的自有可枚举字符串键属性值组成的数组。
const object1 = {
a: 'somestring',
b: 42,
c: false,
};
console.log(Object.values(object1));
// Expected output: Array ["somestring", 42, false]HTML 内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理 <template> 元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
HTMLTemplateElement.content 属性返回 <template> 元素的模板内容（一个 DocumentFragment）。
示例：
//加载并克隆一个预定义的 HTML 模板
loadTemplate() {
const template = document.getElementById('vehicle-selector-template');
if (template) {
const templateContent = template.content.cloneNode(true);
this.appendChild(templateContent);
} else {
console.error('Template not found');
}
}在每次构建之前，确保清理构建输出目录。你可以在构建脚本中添加清理命令：
npm install rimraf --save-dev"scripts": {
"clean": "rimraf dist",
"build": "npm run clean && vite build"
}运行构建命令
有时现有的构建输出可能会干扰新构建，确保清理 dist 目录：
rm -rf dist
npm install vite@latestrm -rf node_modules
npm installRun Vite Build with Debug: Run Vite build with the debug flag to get more detailed logs.
DEBUG=vite:* npm run build尝试清除构建缓存并重新构建项目：
rm -rf node_modules/.vite
npm run buildYarn 是 JavaScript 的软件包管理器，由 Facebook 与其他公司合作开发，旨在解决 npm（Node 软件包管理器）的一些不足之处。它以速度、可靠性和安全性著称。
常见的 Yarn 命令
以下是一些常见的 Yarn 命令及其 npm 对应命令：
yarn init等同于 npm init
yarn add [package-name]Equivalent to npm install [package-name] --save
yarn add [package-name] --devyarn remove [package-name]Equivalent to npm uninstall [package-name] --save
yarn installEquivalent to npm install
yarn upgrade [package-name]Equivalent to npm update [package-name]
yarn run [script]yarn list速度和效率： Yarn 会并行安装软件包，与 npm 相比，它能显著加快安装进程，尤其是在依赖关系较多的项目中。
可靠性： Yarn 使用锁文件（yarn.lock）来确保在每台机器上都安装了完全相同的依赖项。这有助于避免 “在我的机器上能用 ”的问题。
安全性 在执行代码前，Yarn 使用校验和来验证每个已安装软件包的完整性。