前后端面试题》专栏集合了前后端各个知识模块的面试题,包括html,javascript,css,vue,react,java,Openlayers,leaflet,cesium,mapboxGL,threejs,nodejs,mangoDB,MySQL,Linux… 。

前后端面试题-专栏总目录

在这里插入图片描述

文章目录

  • 一、本文面试题目录
      • 1. 什么是Vite?它和其他前端构建工具的区别是什么?
      • 2. Vite的主要特性有哪些?
      • 3. Vite的劣势是什么?
      • 4. Vite和Webpack的区别是什么?
      • 5. Vite和Rollup的关系是怎样的?
      • 6. Vite的开发服务器是如何工作的?
      • 7. Vite的生产环境构建是如何工作的?
      • 8. Vite如何利用浏览器原生ES模块?
      • 9. Vite的依赖预构建是如何实现的?
      • 10. Vite中如何配置别名(alias)?
      • 11. Vite中如何配置环境变量?
      • 12. Vite中.env文件的作用是什么?
      • 13. Vite中如何使用不同的模式(mode)?
      • 14. Vite中如何处理CSS?
      • 15. Vite中如何使用CSS预处理器(Sass, Less, Stylus)?
      • 16. Vite中如何使用CSS Modules?
      • 17. Vite中如何使用PostCSS?
      • 18. Vite中如何处理静态资源?
      • 19. Vite中如何配置构建输出路径?
      • 20. Vite中如何进行代码分割?
      • 21. Vite中如何配置多入口?
      • 22. Vite的构建优化有哪些方法?
      • 23. Vite的插件机制是如何工作的?
      • 24. Vite中如何编写一个插件?
      • 25. Vite中常用的插件有哪些?
      • 26. Vite中如何使用TypeScript?
      • 27. Vite中如何处理Vue单文件组件?
      • 28. Vite中如何处理React组件?
      • 29. Vite中如何使用JSX/TSX?
      • 30. Vite中如何进行单元测试?
  • 二、120道面试题目录列表

一、本文面试题目录

1. 什么是Vite?它和其他前端构建工具的区别是什么?

Vite是一个由尤雨溪开发的前端构建工具,旨在提供更快的开发体验。与传统构建工具(如Webpack)不同,Vite基于原生ES模块(ES Modules),在开发环境中无需打包即可直接运行代码,大大提高了冷启动和热更新速度。

主要区别:

  • 冷启动速度:Vite无需等待整个应用打包,启动时间接近瞬时;而Webpack需要先构建整个应用。
  • 模块处理方式:Vite在开发时利用浏览器原生ES模块支持,按需加载;Webpack通过打包将所有模块合并为一个或多个bundle。
  • 热更新(HMR):Vite的HMR速度更快,且通常能保持组件状态;Webpack的HMR可能需要重新编译部分代码。

2. Vite的主要特性有哪些?

  • 极速冷启动:基于浏览器原生ES模块,无需打包直接启动。
  • 即时热更新(HMR):模块热替换速度极快,且不丢失组件状态。
  • 智能依赖预构建:使用esbuild预构建依赖,提高加载速度。
  • 按需编译:仅在浏览器请求时编译模块,而非一次性处理所有代码。
  • 内置对多种格式的支持:如TypeScript、JSX、CSS预处理器等。
  • 优化的生产构建:使用Rollup生成优化后的静态资源。
  • 插件系统:可扩展的插件接口,支持各种功能扩展。

3. Vite的劣势是什么?

  • 生态系统成熟度:相比Webpack,Vite的插件生态可能不够完善,某些特定场景的解决方案可能较少。
  • 复杂配置支持:对于非常复杂的项目结构或特殊需求,Vite的配置可能不如Webpack灵活。
  • 生产环境构建:虽然Vite在开发环境表现出色,但生产环境仍依赖Rollup,对于某些极端复杂的打包需求,可能不如Webpack全面。
  • 浏览器兼容性:由于依赖原生ES模块,Vite在旧版浏览器中的支持较差,需要额外配置。

4. Vite和Webpack的区别是什么?

特性ViteWebpack
构建方式开发时基于ES模块,按需加载先打包所有模块再运行
冷启动时间接近瞬时随项目大小增长
热更新速度极快,通常保持组件状态较慢,可能需要重新编译
依赖处理使用esbuild预构建依赖使用loader和plugin处理依赖
生产环境打包使用Rollup直接使用Webpack
配置复杂度相对简单复杂,需要大量配置
生态系统快速发展,但不如Webpack成熟非常成熟,几乎支持所有场景

5. Vite和Rollup的关系是怎样的?

Vite在生产环境使用Rollup作为打包工具,而在开发环境则使用基于ES模块的轻量级服务器。具体关系:

  • 开发环境:Vite不使用Rollup,而是直接利用浏览器原生ES模块支持,通过中间件处理模块导入和转换。
  • 生产环境:Vite使用Rollup进行打包,默认配置已优化,但可通过build.rollupOptions自定义。
  • 插件兼容性:大多数Rollup插件可直接在Vite中使用,通过vite-plugin-rollup适配器。

6. Vite的开发服务器是如何工作的?

Vite开发服务器的工作流程:

  1. 启动服务器:基于原生ES模块,无需打包。
  2. 依赖预构建:使用esbuild预构建第三方依赖,将CommonJS/UMD转换为ES模块。
  3. 模块请求处理:拦截浏览器的模块请求,动态转换代码(如TypeScript、JSX)。
  4. 模块解析:处理裸模块导入(如import 'vue'),转换为正确的路径。
  5. HMR支持:实现模块热更新,通过WebSocket与浏览器通信。
  6. 静态资源处理:直接提供静态资源,支持按需编译。

7. Vite的生产环境构建是如何工作的?

Vite在生产环境使用Rollup进行构建:

  1. 配置合并:合并Vite默认配置和用户自定义的build.rollupOptions
  2. 代码转换:使用各种插件处理代码(如TypeScript、JSX转换)。
  3. 依赖处理:将依赖和应用代码分离,生成优化的chunk。
  4. 代码分割:基于动态导入或路由进行代码分割,提高加载性能。
  5. 资源处理:处理静态资源(图片、字体等),生成哈希文件名。
  6. 压缩和优化:压缩JavaScript、CSS代码,生成sourcemap。
  7. 输出文件:将优化后的资源输出到指定目录。

8. Vite如何利用浏览器原生ES模块?

Vite通过以下方式利用原生ES模块:

  1. 直接提供ES模块:开发服务器直接返回符合ES模块规范的JavaScript文件。
  2. 处理裸模块导入:将import 'vue'转换为import '/node_modules/vue/dist/vue.esm-bundler.js'
  3. 动态模块转换:在浏览器请求时,动态转换非JavaScript模块(如TypeScript、CSS)为ES模块。
  4. 按需加载:仅在浏览器请求时加载模块,无需预打包整个应用。

示例:

// 源代码
import { createApp } from 'vue';
import App from './App.vue';// Vite处理后,浏览器实际请求的代码
import { createApp } from '/node_modules/vue/dist/vue.esm-bundler.js';
import App from '/src/App.vue?vue&type=script&lang=js';

9. Vite的依赖预构建是如何实现的?

Vite使用esbuild预构建依赖的流程:

  1. 扫描导入:分析项目入口文件,提取所有依赖(裸模块导入)。
  2. esbuild转换:使用esbuild将CommonJS/UMD模块转换为ES模块。
  3. 缓存结果:将预构建的依赖缓存到node_modules/.vite目录。
  4. 优化加载:预构建后的依赖作为单个模块提供,减少浏览器请求。

配置示例(vite.config.js):

export default {optimizeDeps: {include: ['lodash-es', 'axios'], // 指定需要预构建的依赖exclude: ['some-lib'], // 排除某些依赖不进行预构建},
};

10. Vite中如何配置别名(alias)?

vite.config.js中使用resolve.alias配置别名:

import { defineConfig } from 'vite';export default defineConfig({resolve: {alias: {'@': '/src', // 将@映射到src目录'components': '/src/components', // 自定义别名},},
});

使用示例:

// 原路径
import MyComponent from '../../components/MyComponent.vue';// 使用别名后
import MyComponent from '@/components/MyComponent.vue';
No.大剑师精品GIS教程推荐
0地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1Openlayers 【入门教程】 - 【源代码+示例 300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3MapboxGL【入门教程】 - 【源代码+图文示例150+】
4Cesium 【入门教程】 - 【源代码+综合教程 200+】
5threejs【中文API】 - 【源代码+图文示例200+】
6Shader 编程 【图文示例 100+】

11. Vite中如何配置环境变量?

Vite通过.env文件和import.meta.env访问环境变量:

  1. 创建环境文件:在项目根目录创建.env(通用)、.env.development(开发环境)、.env.production(生产环境)。
  2. 定义变量:变量名必须以VITE_开头。
    VITE_API_URL=https://api.example.com
    VITE_APP_TITLE=My App
    
  3. 访问变量:在代码中使用import.meta.env.VITE_API_URL

12. Vite中.env文件的作用是什么?

.env文件用于存储环境变量,支持以下特性:

  • 环境特定配置:通过.env.development.env.production等文件为不同环境定义变量。
  • 变量前缀:只有以VITE_开头的变量会被暴露给客户端代码。
  • 优先级:环境特定文件 > 通用文件,命令行变量 > 文件变量。

示例:

# .env.development
VITE_API_URL=http://localhost:3000/api# .env.production
VITE_API_URL=https://api.production.com

13. Vite中如何使用不同的模式(mode)?

Vite通过mode参数区分不同环境:

  1. 内置模式development(开发)和production(生产)。
  2. 自定义模式:可以定义其他模式(如teststaging)。
  3. 指定模式:通过命令行参数或配置文件指定。

命令行示例:

# 使用development模式(默认)
npm run dev# 使用production模式
npm run build# 使用自定义模式
vite build --mode staging

配置文件示例(vite.config.js):

export default defineConfig(({ mode }) => {if (mode === 'staging') {return {base: '/staging/',// 其他配置};}return {// 默认配置};
});

14. Vite中如何处理CSS?

Vite内置对CSS的支持,包括:

  1. 直接导入:在JavaScript中导入CSS文件。
    import './style.css';
    
  2. CSS Modules:通过.module.css文件名启用。
    import styles from './style.module.css';
    document.body.classList.add(styles.container);
    
  3. PostCSS:自动应用项目中的PostCSS配置(如postcss.config.js)。
  4. CSS预处理器:支持Sass、Less、Stylus等,需安装相应依赖。
  5. CSS代码分割:根据入口点和动态导入自动分割CSS。

15. Vite中如何使用CSS预处理器(Sass, Less, Stylus)?

  1. 安装依赖

    # Sass
    npm install sass -D# Less
    npm install less -D# Stylus
    npm install stylus -D
    
  2. 直接使用:导入相应扩展名的文件(.scss.less.styl)。

    import './style.scss';
    
  3. 全局变量/混合:使用css.preprocessorOptions配置。

    export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";`}}}
    });
    

16. Vite中如何使用CSS Modules?

  1. 命名约定:使用.module.css.module.scss等扩展名。

  2. 导入和使用

    // style.module.css
    .container {padding: 20px;
    }// App.js
    import styles from './style.module.css';function App() {return <div className={styles.container}>Hello World</div>;
    }
    
  3. 自定义生成的类名:在vite.config.js中配置:

    export default defineConfig({css: {modules: {localsConvention: 'camelCaseOnly', // 类名转为驼峰generateScopedName: '[name]__[local]___[hash:base64:5]' // 自定义格式}}
    });
    

17. Vite中如何使用PostCSS?

  1. 安装PostCSS

    npm install postcss postcss-loader -D
    
  2. 创建PostCSS配置文件postcss.config.js):

    module.exports = {plugins: {'postcss-preset-env': {}, // 自动添加浏览器前缀cssnano: {} // 压缩CSS}
    };
    
  3. 配置Vite(可选,通常会自动读取PostCSS配置):

    export default defineConfig({css: {postcss: {plugins: [// 直接在这里配置插件]}}
    });
    

18. Vite中如何处理静态资源?

Vite内置对多种静态资源的支持:

  1. 直接导入

    import imgUrl from './assets/image.png';
    document.getElementById('logo').src = imgUrl;
    
  2. URL引用:在CSS或HTML中使用相对路径。

    .logo {background-image: url('./assets/logo.png');
    }
    
  3. 资源处理

    • 小于build.assetsInlineLimit(默认4kb)的资源会被内联为base64。
    • 其他资源会被复制到输出目录并生成哈希文件名。
  4. 特殊导入

    import svgUrl from './logo.svg?url'; // 强制作为URL
    import svgComponent from './logo.svg?component'; // 作为React/Vue组件导入
    

19. Vite中如何配置构建输出路径?

vite.config.js中使用build.outDir配置:

export default defineConfig({build: {outDir: 'dist', // 默认输出目录assetsDir: 'assets', // 静态资源目录},
});

20. Vite中如何进行代码分割?

Vite支持多种代码分割方式:

  1. 动态导入(推荐)

    // 按需加载模块
    button.addEventListener('click', async () => {const { heavyModule } = await import('./heavyModule.js');heavyModule();
    });
    
  2. 多入口应用

    export default defineConfig({build: {rollupOptions: {input: {main: '/index.html',about: '/about.html',},},},
    });
    
  3. 共享模块分割:Rollup会自动分割共享模块,也可通过manualChunks配置:

    export default defineConfig({build: {rollupOptions: {output: {manualChunks: {vendor: ['lodash', 'axios'], // 将这些依赖单独打包},},},},
    });
    
No.大剑师精品GIS教程推荐
0地图渲染基础- 【WebGL 教程】 - 【Canvas 教程】 - 【SVG 教程】
1Openlayers 【入门教程】 - 【源代码+示例 300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3MapboxGL【入门教程】 - 【源代码+图文示例150+】
4Cesium 【入门教程】 - 【源代码+综合教程 200+】
5threejs【中文API】 - 【源代码+图文示例200+】
6Shader 编程 【图文示例 100+】

21. Vite中如何配置多入口?

vite.config.js中配置Rollup的input选项:

import { defineConfig } from 'vite';
import { fileURLToPath, URL } from 'url';export default defineConfig({build: {rollupOptions: {input: {main: fileURLToPath(new URL('./index.html', import.meta.url)),admin: fileURLToPath(new URL('./admin.html', import.meta.url)),},},},
});

对应的HTML文件结构:

├── index.html
├── admin.html
└── src/├── main.js└── admin.js

22. Vite的构建优化有哪些方法?

  1. 代码分割:使用动态导入或manualChunks配置。
  2. 压缩代码:生产环境默认启用Terser压缩。
  3. 移除console.log:通过Terser配置移除调试代码。
  4. CDN加载外部资源:使用externals排除依赖,通过CDN加载。
  5. 图片优化:使用image插件压缩图片。
  6. 预加载/预取:通过插件自动添加<link rel="preload">
  7. 按需加载:动态导入非关键资源。
  8. 使用esbuild:通过esbuild选项进一步优化构建。

配置示例:

export default defineConfig({build: {minify: 'terser',terserOptions: {compress: {drop_console: true, // 移除consoledrop_debugger: true, // 移除debugger},},rollupOptions: {external: ['vue', 'react'], // 排除这些依赖output: {manualChunks: {vendor: ['lodash'], // 将lodash单独打包},},},},
});

23. Vite的插件机制是如何工作的?

Vite插件基于Rollup插件接口,同时扩展了一些特定钩子:

  1. 插件类型

    • 通用插件:同时影响开发和生产环境。
    • 开发时插件:仅在开发环境生效。
    • 构建时插件:仅在生产环境生效。
  2. 核心钩子

    • config:修改Vite配置。
    • transform:转换单个模块内容。
    • configureServer:配置开发服务器。
    • handleHotUpdate:自定义HMR逻辑。
  3. 执行顺序:插件按注册顺序执行,可通过enforce选项调整优先级。

24. Vite中如何编写一个插件?

一个简单的Vite插件结构:

// my-plugin.js
export default function myPlugin() {return {name: 'my-vite-plugin', // 插件名称enforce: 'pre', // 执行优先级:'pre' | 'post'// 修改Vite配置config(config, { command }) {if (command === 'serve') {return {// 开发环境配置};}},// 转换模块内容transform(code, id) {if (id.endsWith('.js')) {// 修改JavaScript代码return code.replace('console.log', '// console.log');}return code;},// 配置开发服务器configureServer(server) {server.middlewares.use((req, res, next) => {// 自定义中间件逻辑next();});},// 自定义HMR处理handleHotUpdate(ctx) {console.log('HMR update:', ctx.file);return [];},};
}

vite.config.js中使用:

import myPlugin from './my-plugin';export default defineConfig({plugins: [myPlugin()],
});

25. Vite中常用的插件有哪些?

  1. 官方插件

    • @vitejs/plugin-vue:Vue 3支持。
    • @vitejs/plugin-react:React支持。
    • @vitejs/plugin-legacy:旧版浏览器支持。
  2. 社区插件

    • vite-plugin-pwa:渐进式Web应用支持。
    • vite-plugin-svg-icons:SVG图标处理。
    • vite-plugin-compression:生产环境资源压缩。
    • vite-plugin-eslint:集成ESLint。
    • unplugin-auto-import:自动导入API。
    • unplugin-vue-components:自动导入组件。
    • @rollup/plugin-alias:别名支持。
    • @rollup/plugin-json:JSON处理。

26. Vite中如何使用TypeScript?

Vite内置对TypeScript的支持,无需额外配置:

  1. 安装依赖

    npm install typescript @types/node -D
    
  2. 创建tsconfig.json

    npx tsc --init
    
  3. 编写TypeScript代码

    // src/main.ts
    import { createApp } from 'vue';
    import App from './App.vue';createApp(App).mount('#app');
    
  4. 配置选项(可选):

    // vite.config.ts
    import { defineConfig } from 'vite';export default defineConfig({esbuild: {// 配置esbuild转换选项jsxFactory: 'h',jsxFragment: 'Fragment',},
    });
    

27. Vite中如何处理Vue单文件组件?

  1. 安装Vue插件

    npm install @vitejs/plugin-vue -D
    
  2. 配置Vite

    // vite.config.js
    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],
    });
    
  3. 编写Vue组件

    <!-- src/App.vue -->
    <template><div class="hello"><h1>{{ msg }}</h1></div>
    </template><script lang="ts">
    import { defineComponent } from 'vue';export default defineComponent({setup() {return {msg: 'Hello Vue 3 + TypeScript + Vite',};},
    });
    </script>
    

28. Vite中如何处理React组件?

  1. 安装React插件

    npm install @vitejs/plugin-react -D
    
  2. 配置Vite

    // vite.config.js
    import { defineConfig } from 'vite';
    import react from '@vitejs/plugin-react';export default defineConfig({plugins: [react()],
    });
    
  3. 编写React组件

    // src/App.jsx
    import React from 'react';function App() {return (<div className="App"><h1>Hello React + Vite</h1></div>);
    }export default App;
    

29. Vite中如何使用JSX/TSX?

Vite内置对JSX/TSX的支持,无需额外配置:

  1. React JSX:使用@vitejs/plugin-react插件。
  2. Vue JSX:安装@vue/babel-plugin-jsx或使用@vitejs/plugin-vue-jsx

示例(Vue JSX):

// 安装依赖
npm install @vitejs/plugin-vue-jsx -D// vite.config.js
import { defineConfig } from 'vite';
import vueJsx from '@vitejs/plugin-vue-jsx';export default defineConfig({plugins: [vueJsx()],
});// 组件中使用
import { defineComponent } from 'vue';export default defineComponent({setup() {return () => <h1>Hello Vue JSX</h1>;},
});

30. Vite中如何进行单元测试?

Vite项目常用的单元测试方案:

  1. Jest

    • 安装:npm install jest @types/jest ts-jest -D
    • 配置:创建jest.config.js
    module.exports = {preset: 'ts-jest',testEnvironment: 'jsdom',
    };
    
    • 测试命令:npx jest
  2. Vitest(Vite官方推荐):

    • 安装:npm install vitest -D
    • 配置(vite.config.js):
    import { defineConfig } from 'vite';export default defineConfig({test: {environment: 'jsdom',},
    });
    
    • 编写测试:
    // sum.test.js
    import { describe, it, expect } from 'vitest';describe('sum test', () => {it('adds 1 + 2 to equal 3', () => {expect(1 + 2).toBe(3);});
    });
    
    • 测试命令:npx vitest

二、120道面试题目录列表

文章序号vite面试题120道
1vite面试题及详细答案120道(01-30)
2vite面试题及详细答案120道(31-60)
3vite面试题及详细答案120道(61-90)
4vite面试题及详细答案120道(91-120)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/917729.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/917729.shtml
英文地址,请注明出处:http://en.pswp.cn/news/917729.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cesium学习(一)-基础

Cesium是一个开源的JavaScript库&#xff0c;专门用于创建3D地球和地图可视化。它在GIS、航空航天、城市规划等领域有广泛应用。 Cesium核心特性3D地球可视化 基于WebGL的高性能3D渲染支持全球地形和影像数据准确的地球模型&#xff08;WGS84椭球体&#xff09;多维数据支持 时…

饿了么招java开发咯

研发工程师-JAVA/Golang&#xff08;岗位信息已经过jobleap.cn授权&#xff0c;可以在CSDN发布&#xff09;饿了么 杭州收录时间&#xff1a; 2025年08月05日职位描述1、参与基础软件的设计、开发和维护&#xff0c;如分布式中间件、DevOps平台、应用监控系统等&#xff1b; 2…

java web 未完成项目,本来想做个超市管理系统,前端技术还没学。前端是个简单的html。后端接口比较完善。

代码结构 超市管理系统/├── src/ │ ├── com/ │ │ └── zhang/ │ ├── documents.txt │ ├── documents_detail.txt │ ├── goods.txt │ ├── order.txt │ ├── order_detail.txt │ ├── role.txt │ ├── tb_test.txt │ …

R语言基础图像及部分调用函数

R语言基础图像及部分调用函数 散点图 散点图是将所有的数据以点的形式展现在直角坐标系上&#xff0c;以显示变量之间的相互影响程度&#xff0c;点的位置由变量的数值决定&#xff0c;每个点对应一个 X 和 Y 轴点坐标。 散点图可以使用 plot() 函数来绘制 例子 x<-c(10,40)…

自由学习记录(77)

官方模版、、都不用了&#xff0c;记得之前用gitextension 的时候也好像有这种问题&#xff0c;也不知道怎么回事 用自己的就行了 网上说什么都没用&#xff0c;还是要自己老实写&#xff0c;配上截图工具截屏目录直接转文字过去&#xff0c;其实字都不要打多少的 一张很深刻…

运动想象 (MI) 分类学习系列 (18) : MSVTNet

运动想象分类学习系列:用于基于脑电图的运动图像解码的多尺度视觉转换器神经网络 0. 引言 1. 主要贡献 2. 方法![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/65a03fcd4a9144f6a7324b0969fd9d4e.png#pic_center) 3. 结果 3.1 脑电图数据预处理 3.2 解码性能比较 3.3…

Spring 03 Web springMVC

Springboot 常用 Spring MVC 实现 web 服务。 Spring MVC 请求处理流程图片来自《Spring 实战第四版》 浏览器请求首先被交给 DispatcherServlet 前端控制器。 DispatcherServlet 查询处理器映射以决定将请求发送给哪个控制器。控制器处理业务逻辑后&#xff0c;向 DispatcherS…

大厂面试题

线程池的状态?回答:running->shutdown->stop->tidyng->TERMINATED 线程池状态怎么流转2. 回答:变成shutdown&#xff0c;执行shutdown()函数变成stop&#xff0c;执行shutdownnow函数 变成tining&#xff0c;所有任务已处理完 变成TERMINATED&#xff0c;线程池调…

达芬奇31-40

快捷键C鼠标左键拖拽到节点上 A鼠标左键拖拽节点 复制到另一个图层上Raw素材太哦调整为log方便调色磨皮中间调向左磨皮,向右变老找到丢失的高光磨皮后脸部高光消失,或不明显,此时用亮度吸管工具找到脸部的高光,拉高中灰和亮部的Y值质感纹理增强器Tiny,Fine高频细节(脸部)增强或…

dify

一、SVG Logo Design ### 任务 我希望你充当图像生成的提示生成器。 ### 任务描述 你的工作是提供详细且富有创意的描述&#xff0c;以激发 AI 生成独特而有趣的图像。请记住&#xff0c;格式应遵循以下一般模式&#xff1a; <主要主题>, <主要主题的描述>, <背…

Mysql 实战问题处理速通

文章目录创建账号和授权查询没有主键的表统计每个库大小前十张大表清理日志表Prepared statement needs to be re-preparedxtrabackup 问题锁问题处理快速处理查询事务等待和阻塞情况innodb_trxprocesslistdata_locksdata_lock_waitsmetadata_locksevents_statements_current其…

如何测量滚珠花键的旋转方向间隙?

测量滚珠花键的旋转方向间隙需要使用适当的工具&#xff0c;通常情况下&#xff0c;可以使用游标卡尺或外径卡尺进行测量。这些工具可以准确地测量间隙的宽度和深度&#xff0c;并且可以轻松地记录测量结果。手动检测法&#xff1a;将滚珠花键固定在支架上&#xff0c;确保其可…

Android AppSearch 深度解析:现代应用搜索架构与实践

一、AppSearch 概述1.1 什么是 AppSearchAppSearch 是 Android Jetpack 组件库中的一个现代化本地搜索框架&#xff0c;于 Android 12 (API level 31) 引入&#xff0c;旨在为 Android 应用提供高效、可靠的本地数据索引和搜索能力。与传统的 SQLite 搜索方案相比&#xff0c;A…

使用公众号的消息模板给关注用户发消息

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…

【盘古100Pro+开发板实验例程】FPGA学习 | 3X3图像矩阵生成 | 图像实验指导手册

本原创文章由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处&#xff08;www.meyesemi.com) 1. 实验简介 实验目的&#xff1a; 实现 3X3 图像矩阵对应 9 个像素点图像数据的读取。 实验环境&#xff1a; Wind…

【通用视觉框架】基于OpenCvSharp+WPF+YOLO开发的仿VisionMaster的通用视觉框架软件,全套源码,开箱即用

【通用视觉框架】基于OpenCvSharpWPFYOLO开发的仿VisionMaster的通用视觉框架软件&#xff0c;全套源码&#xff0c;开箱即用 基于OpenCvSharp、WPF和YOLO的组合&#xff0c;构建一个兼具图像处理能力、可视化交互和实时检测的工业级视觉框架。其核心是将底层算法与上层界面无…

微信小程序转Vue2组件智能提示词

角色 小程序转Vue2组件工程师&#xff08;ElementUI专精&#xff09; 核心能力 技术专长&#xff1a;作为世界顶尖前端工程师&#xff0c;专注于将小程序组件&#xff08;.wxml/.wxss/.js/.json&#xff09;精准转换为Vue2ElementUI组件&#xff0c;转换逻辑零偏差&#xff0c;…

JVM 学习总结

文章目录内存结构程序计数器什么是程序计数器&#xff1f;核心作用&#xff1a;为什么需要程序计数器&#xff1f;实现原理主要特点示例&#xff1a;PC 寄存器如何工作总结Java 虚拟机栈什么是 Java 虚拟机栈&#xff1f;栈帧的内部结构主要特点总结线程诊断本地方法栈堆堆内存…

目标检测检出率,误检率,ap,map等评估python代码

1.deepseek版本import numpy as np from collections import defaultdictdef calculate_iou(box1, box2):"""计算两个边界框的交并比&#xff08;IoU&#xff09;:param box1: [x1, y1, x2, y2]:param box2: [x1, y1, x2, y2]:return: IoU"""# 计…

python的高校班级管理系统

前端开发框架:vue.js 数据库 mysql 版本不限 后端语言框架支持&#xff1a; 1 java(SSM/springboot)-idea/eclipse 2.NodejsVue.js -vscode 3.python(flask/django)–pycharm/vscode 4.php(thinkphp/laravel)-hbuilderx 数据库工具&#xff1a;Navicat/SQLyog等都可以 在高校教…