标签 Javascript 下的文章

编写一个 Node.js 脚本，自动化地将组件库 components 文件夹中的组件在根目录的index.ts文件中导出

2024-08-15

以下是一个简单的 Node.js 脚本示例，用于将 components 文件夹中的所有组件复制到项目根目录的 in 文件夹中。




const fs = require('fs');
const path = require('path');
const ncp = require('ncp').ncp;
 
// 设置源目录和目标目录
const sourceDir = path.join(__dirname, 'components');
const destinationDir = path.join(__dirname, 'in');
 
// 创建目标目录（如果不存在）
if (!fs.existsSync(destinationDir)) {
  fs.mkdirSync(destinationDir);
}
 
// 复制组件到目标目录
ncp(sourceDir, destinationDir, function (err) {
  if (err) {
    return console.error(err);
  }
  console.log('组件复制成功！');
});

在运行此脚本之前，您需要安装 ncp 包，它是一个用于复制文件和目录的 Node.js 模块。可以使用以下命令安装：




npm install ncp

确保将此脚本保存为 copy_components.js 并从项目根目录运行它。这将会复制 components 文件夹下的所有内容到 in 文件夹中。如果 in 文件夹不存在，它会自动创建。

- 阅读更多 -

【nvm】如何使用nvm优雅的管理Node.js

System

2024-08-15

所有,nodejs

NVM (Node Version Manager) 是一个用来管理 Node.js 版本的工具，它可以让你轻松切换不同版本的 Node.js。

以下是使用 NVM 的一些基本命令：

安装 NVM:




curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

或者使用 Wget:




wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

安装 Node.js 的特定版本:




nvm install 14.17.0

切换到特定版本的 Node.js:




nvm use 14.17.0

查看已安装的 Node.js 版本:




nvm ls

设置默认 Node.js 版本:




nvm alias default 14.17.0

卸载 Node.js 版本:




nvm uninstall 14.17.0

查看 NVM 帮助信息:




nvm --help

在使用 NVM 时，确保你的 shell 配置文件（比如 .bashrc, .zshrc 等）中已经初始化了 NVM。通常安装脚本会自动处理这个步骤。

以上命令提供了 NVM 的基本使用方法，可以帮助开发者方便地管理 Node.js 的版本。

- 阅读更多 -

windows安装NVM,node.js版本控制，idea配置nvm

System

2024-08-15

所有,nodejs

在Windows上安装NVM和使用Node.js版本控制通常涉及以下步骤：

安装NVM (Node Version Manager):
- 下载NVM安装包: 访问 NVM GitHub Releases 页面并下载最新的nvm-setup.zip文件。
- 安装NVM: 解压下载的文件并运行nvm-setup.exe，遵循安装向导的指示完成安装。
使用NVM安装Node.js:
- 打开命令提示符或PowerShell。
- 运行nvm install latest以安装最新版本的Node.js。
- 运行nvm list查看可用的Node.js版本。
- 运行nvm use <version>来使用特定版本的Node.js，例如nvm use 14.17.0。
配置IntelliJ IDEA以使用NVM管理的Node.js版本:
- 打开IntelliJ IDEA。
- 前往 File > Settings (或 IntelliJ IDEA > Preferences 在Mac上)。
- 导航至 Languages & Frameworks > Node.js 和 npm。
- 在 Node.js interpreter 下，点击 ... 按钮，然后选择 NodeJS NVM。
- 在弹出的NVM Interpreter对话框中，确保选择了正确的Node.js版本。
- 点击 OK 保存设置。

以下是可能的命令行操作示例：




# 安装NVM
nvm install latest

# 使用特定版本的Node.js
nvm use 14.17.0

# 查看当前使用的Node.js版本
nvm current

在IntelliJ IDEA中配置NVM管理的Node.js版本通常涉及在项目设置中指定NVM中的Node.js解释器。这确保了使用正确的Node.js版本来运行JavaScript代码和管理npm包。

- 阅读更多 -

【记录】vue3在v-html或js渲染html中赋值点击事件

System

2024-08-15

所有,html

在Vue 3中，如果你需要在渲染的HTML中绑定点击事件，你可以使用v-html指令来插入HTML，并结合@click事件修饰符来绑定点击事件处理函数。但请注意，使用v-html可能会有XSS攻击的风险，因此请确保你插入的内容是安全的。

以下是一个简单的例子：




<template>
  <div v-html="rawHtml" @click="handleClick"></div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const rawHtml = ref('<button>Click Me</button>');
 
function handleClick(event) {
  // 检查事件目标是否为button
  if (event.target.tagName.toLowerCase() === 'button') {
    alert('Button clicked!');
  }
}
</script>

在这个例子中，handleClick函数会在任何子元素被点击时触发，如果你点击了button，它会显示一个警告框。如果你点击的不是button，handleClick不会做任何事情。

请记住，通过v-html插入的内容会被当作纯文本插入，不会编译为Vue组件。如果你需要在这些内容中绑定Vue指令或组件，你可能需要使用更复杂的方法，例如使用vue-loader来预编译模板或者使用h函数来手动创建VNode。

System

2024-08-15

所有,css3

在HTML中，可以使用<blockquote>标签来表示一块引用自其他来源的文本。通常，这些文本会以斜体显示，并且还可以添加一个引号标记（通常是一个大的引号字符）来表示这是一个引用。

下面是一个使用<blockquote>的例子：




<blockquote>
  这是一个示例引用。这段文本将以斜体显示，并且在左右两边有装饰性的引号。
</blockquote>

在CSS中，可以使用::before和::after伪元素来添加引号标记。下面是一个简单的CSS样式示例，它将给<blockquote>添加装饰性的引号：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blockquote Example</title>
<style>
blockquote {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  margin: 20px 0;
  padding: 10px 20px;
  position: relative;
  quotes: '" "' '';
}
 
blockquote::before {
  content: open-quote;
  position: absolute;
  left: 5px;
  top: 5px;
  color: #666;
  font-size: 3em;
}
 
blockquote::after {
  content: close-quote;
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #666;
  font-size: 3em;
}
</style>
</head>
<body>
<blockquote>
  这是一个示例引用。这段文本将以斜体显示，并且在左右两边有装饰性的引号。
</blockquote>
</body>
</html>

在这个例子中，blockquote选择器定义了块引用的基本样式，而blockquote::before和blockquote::after伪元素分别添加了开始和结束的引号。content属性使用了open-quote和close-quote值，它们引用了quotes属性定义的值。

- 阅读更多 -

Threejs进阶之七：使用CSS3DRenderer渲染HTML标签

System

2024-08-15

所有,css3




import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
 
let camera, scene, renderer, labelRenderer, controls;
let mesh;
 
init();
animate();
 
function init() {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
    camera.position.set(0.5, 0.5, 0.5);
 
    scene = new THREE.Scene();
 
    mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
    scene.add(mesh);
 
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
    labelRenderer = new CSS3DRenderer();
    labelRenderer.setSize(window.innerWidth, window.innerHeight);
    labelRenderer.domElement.style.position = 'absolute';
    labelRenderer.domElement.style.top = 0;
    document.body.appendChild(labelRenderer.domElement);
 
    controls = new OrbitControls(camera, labelRenderer.domElement);
 
    // 创建CSS3DObject并关联HTML元素
    const label = new CSS3DObject(document.createElement('div'));
    label.element.style.width = '100px';
    label.element.style.height = '100px';
    label.element.style.background = 'red';
    label.position.set(0.5, 0.5, 0);
    scene.add(label);
 
    // 创建一个新的CSS3DObject并关联另一个HTML元素
    const anotherLabel = new CSS3DObject(document.createElement('div'));
    anotherLabel.element.style.width = '50px';
    anotherLabel.element.style.height = '50px';
    anotherLabel.element.style.background = 'blue';
    anotherLabel.position.set(-0.5, 0.5, 0);
    scene.add(anotherLabel);
}
 
function animate() {
    requestAnimationFrame(animate);
    render();
}
 
function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.005;
    controls.update();
    renderer.render(scene, camera);
    labelRenderer.render(scene, camera);
}

这段代码初始化了Three.js场景，包括相机、场景、灯光、物体以及渲染器。使用CSS3DRenderer渲染了一个红色的HTML DIV标签和一个蓝色的HTML DIV标签，并且它们会随着物体旋转而旋转。这是一个Three.js中CSS3DRenderer的基本使用案例。

- 阅读更多 -

Nodejs 入门8 NeDB 轻量级的Node.js 数据库

System

2024-08-15

所有,javascript




const Datastore = require('nedb');
const path = require('path');
 
// 创建一个新的NeDB数据库实例，指定数据库文件的路径
const db = new Datastore({
    filename: path.join(__dirname, 'access.db'), // 数据库文件名
    autoload: true // 自动加载数据库
});
 
// 插入一条记录
db.insert({
    ip: '192.168.1.1',
    date: new Date()
}, (err, doc) => {
    if (err) {
        return console.error(err);
    }
    console.log('记录插入成功:', doc);
});
 
// 查询记录
db.find({ ip: '192.168.1.1' }, (err, docs) => {
    if (err) {
        return console.error(err);
    }
    console.log('查询结果:', docs);
});
 
// 更新记录
db.update({ ip: '192.168.1.1' }, { $set: { date: new Date() } }, {}, (err, numReplaced) => {
    if (err) {
        return console.error(err);
    }
    console.log('更新记录数:', numReplaced);
});
 
// 删除记录
db.remove({ ip: '192.168.1.1' }, {}, (err, numRemoved) => {
    if (err) {
        return console.error(err);
    }
    console.log('删除记录数:', numRemoved);
});

这段代码展示了如何使用NeDB进行基本的CURD操作。首先，我们创建了一个NeDB实例，指定了数据库文件的位置并设置了自动加载。然后，我们演示了如何插入一条记录，查询记录，更新记录和删除记录。每个操作都使用了回调函数来处理可能发生的错误和返回的结果。

- 阅读更多 -

D3.js实现线条的流动效果（从一端移动到另一端并且变色）

System

2024-08-15

所有,css3

以下是一个使用D3.js创建线条流动效果的简单示例。这段代码会创建一个线条，它从图表的一侧移动到另一侧，并在移动过程中更改颜色。




<!DOCTYPE html>
<html>
<head>
  <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<svg width="500" height="200"></svg>
 
<script>
  var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
 
  var line = svg.append("line")
      .attr("x1", 0)
      .attr("y1", height / 2)
      .attr("x2", width)
      .attr("y2", height / 2)
      .attr("stroke", "blue");
 
  d3.interval(function() {
    var x = line.attr("x1");
    line.attr("x1", x == width ? 0 : x + 1)
        .attr("x2", x == width ? width : x + 1)
        .attr("stroke", x == width ? "blue" : "red");
  }, 100); // 每100毫秒更新一次位置和颜色
</script>
 
</body>
</html>

这段代码使用了D3.js的d3.interval函数来创建一个定时器，每100毫秒更新线条的起点和终点的横坐标，并相应地改变线条的颜色。当线条到达svg的最右侧时，它会重置回初始位置并改回原来的颜色。

System

2024-08-15

所有,css3

在Vue中使用Three.js时，如果你在更改浏览器大小时遇到CSS3DObject的位置偏移问题，可能是因为相机的aspect ratio没有正确更新导致的。

解决方法：

监听浏览器的resize事件，并在事件触发时更新Three.js的相机和渲染器的尺寸。
更新相机的aspect ratio，它是相机的可视宽度与可视高度的比例。

以下是一个简化的代码示例：




// 在Vue组件的mounted钩子中
mounted() {
  this.initThreeJS();
  window.addEventListener('resize', this.handleWindowResize);
},
 
methods: {
  initThreeJS() {
    // 初始化Three.js场景、相机、渲染器和物体等
    // ...
 
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    this.renderer = new THREE.WebGLRenderer();
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(this.renderer.domElement);
 
    // 假设你有一个CSS3DObject
    // this.cssObject = new THREE.CSS3DObject(someDivElement);
    // scene.add(this.cssObject);
 
    // 初始渲染
    this.renderer.render(this.scene, this.camera);
  },
 
  handleWindowResize() {
    this.camera.aspect = window.innerWidth / window.innerHeight;
    this.camera.updateProjectionMatrix();
 
    this.renderer.setSize(window.innerWidth, window.innerHeight);
 
    // 渲染新的画面
    this.renderer.render(this.scene, this.camera);
  }
},
 
beforeDestroy() {
  // 清理资源和事件监听器
  window.removeEventListener('resize', this.handleWindowResize);
  // dispose objects, renderer, scene etc.
}

确保你的CSS3DObject是通过将DOM元素传递给new THREE.CSS3DObject(element)来创建的，并且在handleWindowResize方法中不要忘记调用renderer.render来更新渲染结果。

这段代码提供了一个框架，确保在浏览器大小改变时，Three.js场景中的相机和渲染器都能正确地更新尺寸，并重新渲染场景。

- 阅读更多 -

如何用html css js 画出曲线或者斜线；

System

2024-08-15

所有,css

在HTML和CSS中，您可以使用<canvas>元素和JavaScript来绘制曲线或斜线。以下是一个简单的例子，展示了如何使用这些工具：

HTML:




<canvas id="myCanvas" width="200" height="100"></canvas>

CSS (可选，用于美化canvas显示):




#myCanvas {
    border: 1px solid #000;
}

JavaScript:




const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
 
// 绘制一条简单的曲线
ctx.beginPath();
ctx.moveTo(20, 20); // 起点
ctx.quadraticCurveTo(20, 100, 200, 20); // 控制点: (x, y) 和终点: (x, y)
ctx.stroke(); // 绘制曲线
 
// 绘制一条简单的斜线
ctx.beginPath();
ctx.moveTo(20, 60); // 起点
ctx.lineTo(180, 60); // 终点
ctx.stroke(); // 绘制斜线

在这个例子中，quadraticCurveTo方法用于绘制二次贝塞尔曲线，lineTo方法用于绘制直线。您可以调整控制点和终点坐标来改变曲线或斜线的形状。

- 阅读更多 -