分类前端技术下的文章

2024-08-17

NPM、Yarn和PNPM都提供了清除缓存的命令。

NPM:
```
npm cache clean --force
```
Yarn:
```
yarn cache clean
```
PNPM:
```
pnpm store prune
```

请注意，在使用这些命令之前，确保你有足够的权限，或者使用管理员权限运行命令。

以下是清除NPM缓存的示例代码：




# 删除NPM缓存
npm cache clean --force
 
# 确认缓存已被清除
npm cache verify

以下是清除Yarn缓存的示例代码：




# 删除Yarn缓存
yarn cache clean

以下是清除PNPM缓存的示例代码：




# 删除PNPM缓存
pnpm store prune

System

2024-08-17

所有,npm

错误解释：

这个错误表明你在尝试使用npm run serve命令来启动一个服务，但是在你的package.json文件中并没有定义serve这个脚本。npm ERR! missing script: serve表明npm无法找到名为serve的脚本来执行。

解决方法：

确认你是否在package.json文件的scripts部分定义了serve脚本。通常，这个脚本会指向一个像是vue-cli-service serve的命令，用于启动开发服务器。
如果你正在使用Vue CLI，确保你在项目的根目录中执行npm run serve，并且package.json文件中的scripts部分如下所示：




"scripts": {
  "serve": "vue-cli-service serve",
  // 其他脚本
}

如果你使用的是其他前端框架或工具（如React、Angular等），请确保你有一个适合该框架的serve脚本。
如果serve脚本正确定义了，尝试清除npm缓存npm cache clean --force，然后重新安装依赖npm install，最后再次运行npm run serve。
如果问题依旧存在，检查是否有其他拼写错误或者配置问题。

System

2024-08-17

所有,npm

这个问题可能是由于网络问题、npm缓存问题或者rxjs包本身的问题导致的。以下是一些解决方法：

清除npm缓存：
```
npm cache clean --force
```
重新安装node\_modules文件夹：
```
rm -rf node_modules
npm install
```
尝试使用不同的网络，如使用VPN或者更换网络环境。
如果上述方法都不行，可以尝试安装rxjs的特定版本，比如：
```
npm install rxjs@6.6.0
```
注意替换版本号为你项目所需要的版本。
检查npm的版本，如果版本过旧，尝试更新npm：
```
npm install -g npm@latest
```
如果问题依旧，可以尝试删除package-lock.json文件后再次运行npm install。

如果以上方法都不能解决问题，可能需要进一步检查具体的网络环境或者系统配置，或者查看npm的debug日志来获取更详细的错误信息。

System

2024-08-17

所有,npm

报错解释：

这个错误表明系统无法识别命令 vue-cli-service。通常情况下，这是因为 npm run serve 命令试图启动 Vue CLI 服务，但是该服务没有正确安装或者没有被添加到系统的 PATH 环境变量中。

解决方法：

确认是否已经全局安装了 Vue CLI。可以通过运行 vue --version 来检查是否安装了 Vue CLI。如果没有安装，需要先全局安装 Vue CLI：npm install -g @vue/cli。
确认当前项目是否已经通过 npm install 安装了所有依赖。如果没有安装，需要在项目目录下运行 npm install。
如果项目依赖已正确安装，尝试关闭命令行工具并重新打开，以确保 PATH 环境变量更新。
在项目目录下直接运行 npm run serve，这样可以确保 vue-cli-service 命令是在当前项目的上下文中执行。
如果上述步骤都不能解决问题，检查 package.json 文件中的脚本定义是否正确，确保 serve 命令指向正确的启动脚本。

如果问题依然存在，可能需要更详细地检查项目的配置和环境设置。

System

2024-08-17

所有,npm

报错解释：

这个错误表示你在使用npm安装Vue-cli时遇到了SSL证书过期的问题。npm在进行HTTPS通信时需要验证服务器的SSL证书，如果证书过期或不被信任，npm会抛出此错误。

解决方法：

更新npm和Node.js到最新版本。运行以下命令：
```
npm install -g npm@latest
npm cache clean --force
```
然后更新Node.js到最新版本。
如果是因为系统时间不正确导致的证书问题，请确保系统时间正确。
如果是因为自签名证书或者过期证书，可以通过设置npm来忽略SSL证书错误。运行以下命令：
```
npm set strict-ssl=false
```
注意：这种方法不推荐，因为它会使你的npm会话容易受到中间人攻击。
如果是因为有代理或VPN引起的，请确保正确配置了代理或VPN。
清除npm缓存也可能有助于解决问题：
```
npm cache clean --force
```
如果以上方法都不行，可能需要检查网络配置或联系网络管理员寻求帮助。

- 阅读更多 -

npm使用国内淘宝镜像（最新地址）

System

2024-08-17

所有,npm

自npm v5起，可以通过配置使用淘宝镜像。以下是配置淘宝镜像的步骤：

临时使用淘宝镜像：




npm --registry https://registry.npm.taobao.org install express

永久配置：




npm config set registry https://registry.npm.taobao.org

通过.npmrc文件配置：
在项目的根目录或用户的主目录中添加或编辑.npmrc文件，添加以下内容：




registry=https://registry.npm.taobao.org

使用nrm工具管理npm源：
首先安装nrm：




npm install -g nrm

然后使用nrm切换到淘宝镜像：




nrm use taobao

以上步骤均可将npm配置为使用淘宝镜像，从而加速npm包的安装过程。

- 阅读更多 -

Nodejs最简显示html静态页面

System

2024-08-17

所有,html5

在Node.js中，您可以使用原生的http模块来创建一个简单的服务器，并在访问根路径时显示一个HTML静态页面。以下是一个简单的例子：




const http = require('http');
const fs = require('fs');
const path = require('path');
 
http.createServer((req, res) => {
  if (req.url === '/' && req.method === 'GET') {
    // 读取并返回静态页面index.html
    fs.readFile(path.resolve(__dirname, 'index.html'), (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('Server Error');
      } else {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(data);
      }
    });
  } else {
    // 对于其他路径返回404
    res.writeHead(404);
    res.end('Not Found');
  }
}).listen(3000, () => {
  console.log('Server listening on port 3000');
});

确保您的项目目录中有一个名为index.html的HTML文件。当您运行这段代码并访问http://localhost:3000/时，您应该会看到您的静态页面。

注意：这个例子没有处理错误处理和路径映射，它是为了展示最简单的静态页面提供方式。在实际应用中，您可能需要使用更复杂的路由处理、错误处理、日志记录等。

- 阅读更多 -

CSS定位——子绝父相的原理（相对定位和绝对定位）

System

2024-08-17

所有,html5

子绝父相，意味着子元素将相对于最近的已定位（即非 static 定位）的祖先元素进行定位。如果没有已定位的祖先元素，则子元素将相对于最初的包含块（即body元素）进行定位。

以下是一个简单的例子，演示了相对定位和绝对定位的使用：

HTML:




<div class="parent">
  <div class="child">我是子元素</div>
</div>

CSS:




.parent {
  position: relative; /* 设置为相对定位 */
  width: 300px;
  height: 200px;
  background-color: lightblue;
}
 
.child {
  position: absolute; /* 设置为绝对定位 */
  top: 20px;   /* 距离父元素顶部20px */
  left: 20px;  /* 距离父元素左侧20px */
  width: 100px;
  height: 100px;
  background-color: coral;
}

在这个例子中，.child 元素是 .parent 元素的子元素，并且它是绝对定位的。由于 .parent 是相对定位的，所以 .child 元素将相对于 .parent 进行定位，即距离 .parent 顶部和左侧各20px。如果没有 .parent 的相对定位，.child 将相对于初始的包含块进行定位。

- 阅读更多 -

html5语义化标签

System

2024-08-17

所有,html5

HTML5引入了一些语义化的标签，这些标签被赋予了特殊的含义，使得代码更具可读性和可维护性。以下是一些常用的HTML5语义化标签：

<header> - 定义页面或区段的头部；
<nav> - 定义导航链接；
<main> - 定义页面的主要内容，一个页面只能使用一次；
<article> - 定义独立的文章内容；
<section> - 定义文档中的一个区段；
<aside> - 定义与页面主内容 minor 的内容，例如侧边栏；
<footer> - 定义页面或区段的底部。

示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </nav>
        <h1>网站标题</h1>
    </header>
    
    <main>
        <article>
            <header>
                <h2>文章标题</h2>
                <p>发布时间、作者等信息</p>
            </header>
            <section>
                <h3>章节标题</h3>
                <p>文章内容...</p>
            </section>
        </article>
    </main>
    
    <aside>
        <h3>侧边栏标题</h3>
        <p>侧边栏内容...</p>
    </aside>
    
    <footer>
        <p>版权信息</p>
    </footer>
</body>
</html>

在这个示例中，HTML5的语义化标签被用来清晰地描述网页的不同部分。这有助于搜索引擎理解页面内容，同时也使得页面的构建和维护更加直观和方便。

- 阅读更多 -

HTML5新增用法

System

2024-08-17

所有,html5

HTML5 引入了许多新的元素和属性，以下是一些常见的 HTML5 新用法示例：

用于绘图的 <canvas> 元素：




<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(0, 0, 150, 75);
</script>

嵌入视频和音频的 <video> 和 <audio> 元素：




<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
 
<!-- 音频 -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

用于绘制表单的新输入类型：




<form>
  <!-- 电子邮件输入 -->
  <input type="email" name="userEmail" required>
  
  <!-- 数值输入，带有范围限制 -->
  <input type="number" name="userAge" min="1" max="100">
  
  <!-- 搜索框 -->
  <input type="search" name="userSearch">
  
  <!-- 网址输入 -->
  <input type="url" name="userUrl">
  
  <!-- 日期选择 -->
  <input type="date" name="userDate">
  
  <!-- 时间选择 -->
  <input type="time" name="userTime">
  
  <!-- 月份选择 -->
  <input type="month" name="userMonth">
  
  <!--  week选择 -->
  <input type="week" name="userWeek">
  
  <!-- 提交按钮 -->
  <input type="submit">
</form>

用于定义文档章节和节的 <section> 和 <article> 元素：




<section>
  <article>
    <h1>文章标题</h1>
    <p>这是一个文章段落。</p>
  </article>
  
  <article>
    <h1>文章标题</h1>
    <p>这是另一个文章段落。</p>
  </article>
</section>

用于导航的 <nav> 元素：




<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于</a></li>
    <li><a href="contact.html">联系</a></li>
  </ul>
</nav>

用于定义微数据的 <div> 元素（与搜索引擎优化SEO相关）：




<div itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">张三</span>
  <img itemprop="image" src="profile.jpg" alt="张三的照片">
  <span itemprop="jobTitle">软件工程师</span>
</div>

这些只是 HTML5 新用法的一小部分，HTML5 还引入了许多其他功能，如地理位置API、离线应用存储、Web Workers 等。

- 阅读更多 -