1. 首页
  2. 分类
  3. 前端技术
CSS white-space 属性 文本不换行
System
2024-08-11
所有,css3

white-space 属性用于设置如何处理元素内的空白。当你想要文本保持在一行并且不换行，可以使用 white-space 属性的 nowrap 值。

CSS 代码示例：




.nobreak {
  white-space: nowrap;
}

HTML 代码示例：




<div class="nobreak">这段文本将不会换行，即使它非常长，超过了容器的宽度。</div>
- 阅读更多 -
CSS中的几种尺寸单位
System
2024-08-11
所有,css3

CSS中的尺寸单位主要有以下几种：

  1. px：像素（Pixel），即屏幕上的一个点。
  2. %：百分比，相对于父元素的尺寸。
  3. em：相对于当前元素的字体大小，如果用于设置边距或者填充，则相对于父元素的字体大小。
  4. rem：相对于根元素（即<html>标签）的字体大小，有利于实现响应式设计。
  5. vh：视口高度，1vh等于视口高度的1%。
  6. vw：视口宽度，1vw等于视口宽度的1%。

示例代码：




div {
  width: 100px;   /* 像素单位 */
  height: 50%;    /* 百分比单位 */
  padding: 1em;   /* 相对于父元素字体大小的单位 */
  margin: 2rem;   /* 相对于根元素字体大小的单位 */
  font-size: 1vw; /* 视口宽度的1%作为字体大小 */
  border-radius: 5vh; /* 视口高度的5%作为圆角 */
}
- 阅读更多 -
CSS3 多列布局
System
2024-08-11
所有,css3

CSS3 的多列布局可以使用 column-* 属性来实现。以下是一些常用的属性：

  • column-count: 定义列的数量。
  • column-gap: 定义列与列之间的间隙。
  • column-rule: 定义列之间的分隔线（类似于边框的样式）。

示例代码：




.multi-column {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3;    /* Firefox */
  column-count: 3;
  
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;    /* Firefox */
  column-gap: 20px;
  
  -webkit-column-rule: 1px solid #ccc; /* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid #ccc;    /* Firefox */
  column-rule: 1px solid #ccc;
}

HTML 使用该样式的示例：




<div class="multi-column">
  <p>这里是内容...</p>
  <!-- 更多内容 -->
</div>

这段代码会将 .multi-column 类中的内容分成3列，列与列之间的间隙为20px，并在列之间添加一条颜色为灰色（#ccc）、宽度为1px的线。

- 阅读更多 -
解决chunk-vendors.js文件太大，首屏加载很慢
System
2024-08-11
所有,javascript

问题解释：

chunk-vendors.js 文件过大通常是由于Webpack在构建过程中将所有第三方依赖打包到了这一个文件中，导致它包含了大量代码，从而使得页面首次加载时需要下载和执行的JavaScript代码量巨大，加载时间较长。

解决方法：

  1. 代码分割：使用Webpack的代码分割插件如SplitChunksPlugin，将第三方库分割成多个小的块，而不是全部打包到chunk-vendors.js中。
  2. 使用动态导入：在需要的时候才加载某些代码块，而不是在页面初始加载时就加载。
  3. 优化第三方库：只引入必要的库功能，而不是整个库。例如，只引入Lodash的特定函数而不是整个库。
  4. 使用CDN：对于一些不经常变动的库，可以考虑通过CDN直接引入，这样用户访问网站时可能已经缓存了这些库，可以减少首屏加载时的大文件体积。
  5. 压缩和优化：通过压缩工具减少文件大小，比如通过UglifyJS或Terser插件进行压缩。

具体实施时，可以根据项目的实际需求和条件选择合适的策略。

- 阅读更多 -
el-table通过scope.row获取表格每列的值，以及scope.$index
System
2024-08-11
所有,vue.js

在Vue.js中，使用Element UI库的el-table组件时，可以通过scope参数访问当前行的数据以及行索引。scope是一个包含当前行数据（scope.row）和索引（scope.$index）的对象。

以下是一个简单的例子，展示如何在el-table的<el-table-column>中使用scope.row和scope.$index来获取和显示每列的值：




<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template slot-scope="scope">
        {{ scope.row.date }} - 索引: {{ scope.$index }}
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        {{ scope.row.name }}
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template slot-scope="scope">
        {{ scope.row.address }}
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  }
};
</script>

在这个例子中，el-table组件的:data属性绑定了一个包含多个对象的数组tableData，每个对象代表表格中的一行。在<el-table-column>中，使用template插槽和slot-scope="scope"来访问当前行的数据。scope.row代表当前行的数据对象，scope.$index代表当前行的索引。

- 阅读更多 -
深入探索 Vue 3 中获取 DOM 节点的多种方法
System
2024-08-11
所有,vue.js

在Vue 3中，获取DOM节点可以通过多种方式，以下是一些常用的方法：

  1. 使用ref属性：



<template>
  <div ref="divRef">Hello, Vue 3!</div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    const divRef = ref(null);
 
    onMounted(() => {
      console.log(divRef.value); // DOM节点
    });
 
    return { divRef };
  }
};
</script>
  1. 使用$el属性：



<template>
  <div>Hello, Vue 3!</div>
</template>
 
<script>
import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      console.log(this.$el); // DOM节点
    });
  }
};
</script>
  1. 使用querySelector或querySelectorAll：



<template>
  <div>Hello, Vue 3!</div>
</template>
 
<script>
import { onMounted } from 'vue';
 
export default {
  setup() {
    onMounted(() => {
      const div = document.querySelector('div');
      console.log(div); // DOM节点
    });
  }
};
</script>

以上代码片段展示了在Vue 3组件中获取DOM节点的不同方法。在onMounted生命周期钩子中获取DOM节点，确保组件已经被挂载，并且DOM已经更新完成。使用ref是Vue推荐的方式，因为它是响应式的，并且能保证在组件的生命周期中节点可用。

- 阅读更多 -
Node.js 框架 star 星数量排名——NestJs跃居第二
System
2024-08-11
所有,nodejs

在 Node.js 的各种框架中，NestJS 因其模块化的方式和灵活的架构设计，逐渐成为了开发者的热门选择。以下是一个简单的 NestJS 应用程序的示例，它演示了如何创建一个基本的控制器和服务。




// 安装NestJS依赖
// npm install @nestjs/core @nestjs/common
 
// core.module.ts
import { Module } from '@nestjs/common';
import { CoreController } from './core.controller';
import { CoreService } from './core.service';
 
@Module({
  controllers: [CoreController],
  providers: [CoreService],
})
export class CoreModule {}
 
// core.controller.ts
import { Controller, Get } from '@nestjs/common';
 
@Controller()
export class CoreController {
  @Get()
  helloWorld(): string {
    return 'Hello, World!';
  }
}
 
// core.service.ts
import { Injectable } from '@nestjs/common';
 
@Injectable()
export class CoreService {
  // 服务中可以放置各种业务逻辑
}
 
// main.ts
import { NestFactory } from '@nestjs/core';
import { CoreModule } from './core.module';
 
async function bootstrap() {
  const app = await NestFactory.create(CoreModule);
  await app.listen(3000);
}
bootstrap();

在这个示例中，我们创建了一个名为 Core 的模块，包含一个控制器和一个服务。控制器提供了一个简单的 HTTP 接口，当访问应用根路径时，会返回 "Hello, World!"。这个示例展示了 NestJS 框架的基本用法，并且可以作为开始构建更复杂应用的起点。

- 阅读更多 -
解决 mac 系统报zsh: command not found: npm 问题
System
2024-08-11
所有,npm

报错解释：

这个错误表示在macOS的终端（Terminal）中，当你尝试运行npm命令时，系统找不到这个命令。这通常意味着npm没有安装在系统上，或者它的安装路径没有被加入到环境变量PATH中。

解决方法：

  1. 检查npm是否安装：运行node -v和npm -v来检查Node.js和npm是否安装。如果这些命令也返回错误，那么需要安装Node.js。

  2. 安装Node.js和npm：

    • 访问Node.js官网下载安装包：https://nodejs.org/
    • 使用包管理器如Homebrew安装：brew install node

  3. 如果npm已安装但仍报错，可能需要将npm的路径添加到PATH环境变量中。可以通过以下命令临时添加路径（会在下次打开终端时失效）：

    


export PATH=/path/to/node:$PATH

    替换/path/to/node为你的实际npm安装路径。

  4. 为了永久添加路径，可以将上述export命令添加到你的shell配置文件中，例如~/.zshrc或~/.bash_profile，根据你使用的shell不同而不同。

  5. 添加后，记得重新加载配置文件或重启终端：

    


source ~/.zshrc

    或者直接打开新的终端窗口。

  6. 再次运行npm命令检查是否解决问题。

如果以上步骤仍然无法解决问题，可能需要检查系统的安全性与隐私设置，确保没有限制终端访问PATH环境变量。

- 阅读更多 -
使用npm 搭建Ant Design Pro 项目
System
2024-08-11
所有,npm

要使用npm搭建Ant Design Pro项目，你需要遵循以下步骤：

  1. 确保你已经安装了Node.js和npm。
  2. 创建一个新的目录用于你的项目，并在终端中进入该目录。
  3. 初始化一个新的npm项目：



npm init -y
  1. 安装Ant Design Pro的脚手架工具：



npm install umi-generator-ant-design-pro --save-dev
  1. 创建Ant Design Pro项目：



umi generate ant-design-pro
  1. 安装依赖：



npm install
  1. 启动开发服务器：



npm start

以上步骤会为你创建一个基于Ant Design Pro的项目框架，并启动一个开发服务器，你可以在浏览器中访问它。

- 阅读更多 -
解决 npm ERR! missing script: build 错误的方法
System
2024-08-11
所有,npm

报错解释：

这个错误表明你尝试运行一个名为 build 的脚本，但是在 package.json 文件中的 scripts 部分没有找到这个脚本。npm 使用 scripts 对象来定义可以运行的脚本命令。

解决方法：

  1. 检查 package.json 文件中的 scripts 部分，确认是否有 build 脚本定义。
  2. 如果没有定义，你需要添加一个 build 脚本。例如，如果你使用的是 webpack，你可以添加如下脚本：



"scripts": {
  "build": "webpack --config webpack.config.js"
}
  1. 如果你不确定正确的构建命令，你需要查看项目文档或者默认的构建脚本。
  2. 添加或修改 build 脚本后，保存 package.json 文件。
  3. 再次运行你的构建命令，这次应该不会出现错误。

确保你的 npm 版本是最新的，以避免兼容性问题导致的错误。如果你是在一个新项目中遇到这个问题，可能需要先运行 npm install 来安装所有依赖并生成 node_modules 文件夹。

- 阅读更多 -
Copyright © 2026 Tech Blog
All Right Reserved | 京ICP备19053165号