Vue 3与ESLint、Prettier：构建规范化的前端开发环境

news2024/11/20 4:30:41

title: Vue 3与ESLint、Prettier：构建规范化的前端开发环境
date: 2024/6/11
updated: 2024/6/11
publisher: cmdragon

excerpt:
这篇文章介绍了如何在Vue 3项目中配置ESLint和Prettier以统一代码风格，实现代码规范性与可读性的提升。通过设置规则、解决冲突、以及将配置融入持续集成流程和代码审查过程，确保团队协作时代码风格的一致性，提升开发效率与项目维护性。

categories:

  • 前端开发

tags:

  • Vue 3
  • ESLint
  • Prettier
  • 代码规范
  • 持续集成
  • 代码审查
  • 团队协作

在这里插入图片描述

在这里插入图片描述

扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长

第一章：Vue 3项目基础

Vue 3简介

Vue 3是Vue.js前端框架的第三个主要版本，它带来了许多新的特性和改进，旨在提供更好的性能、更小的体积和更灵活的API。Vue 3的核心库采用了Composition API，这使得组件的逻辑组织更加清晰，同时保持了与Vue 2的兼容性。Vue 3还引入了Tree-shaking、Teleport、Fragment、Suspense等新特性，以及更好的TypeScript支持。

搭建Vue 3开发环境

搭建Vue 3开发环境通常需要以下步骤：

  1. 安装Node.js和npm：Vue 3项目通常使用npm（Node Package Manager）进行依赖管理，因此首先需要安装Node.js和npm。
  2. 使用Vue CLI创建项目：Vue CLI是Vue官方提供的脚手架工具，可以快速搭建Vue项目。通过运行vue create命令，可以选择预设或手动配置项目。
  3. 选择Vue 3版本：在创建项目时，Vue CLI会询问是否使用Vue 3，选择相应的选项即可创建Vue 3项目。
  4. 安装依赖：项目创建后，使用npm install或yarn install命令安装项目依赖。
  5. 运行开发服务器：使用npm run serve或yarn serve命令启动开发服务器，查看项目是否正常运行。
Vue 3项目结构解析

Vue 3项目通常具有以下目录结构：

my-vue3-project/
├── node_modules/         # 项目依赖
├── public/               # 公共静态资源
│   └── index.html        # 入口HTML文件
├── src/                  # 源代码
│   ├── assets/           # 静态资源
│   ├── components/       # Vue组件
│   ├── router/           # 路由配置
│   ├── store/            # Vuex状态管理
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── .eslintrc.js          # ESLint配置文件
├── .prettierrc.js        # Prettier配置文件
├── package.json          # 项目配置和依赖
└── README.md             # 项目说明
  • node_modules/：存放项目的依赖库。
  • public/：存放公共静态资源，如入口HTML文件。
  • src/：存放源代码，包括组件、路由、状态管理等。
  • .eslintrc.js：ESLint的配置文件，用于定义代码规范。
  • .prettierrc.js：Prettier的配置文件，用于定义代码格式化规则。
  • package.json：定义项目依赖、脚本和配置信息。
  • README.md：项目说明文件，通常包含项目的基本信息和构建指南。

通过理解Vue 3项目的基础和结构，开发者可以更好地进行项目开发和维护。

第二章：ESLint入门

ESLint概述

ESLint是一个插件化的JavaScript代码检查工具，用于识别和报告JavaScript代码中的模式，以确保代码质量。它可以帮助开发者遵循编码规范，避免潜在的错误，并保持代码的一致性。ESLint是高度可配置的，可以通过插件和规则来扩展其功能。cmdragon’s Blog

安装与配置ESLint

安装ESLint通常需要以下步骤：

  1. 安装Node.js和npm：确保你的系统上已经安装了Node.js和npm。
  2. 全局安装ESLint：虽然不推荐全局安装，但可以通过运行npm install -g eslint来全局安装ESLint。
  3. 项目内安装ESLint：在项目目录下运行npm install eslint --save-dev来安装ESLint作为开发依赖。
  4. 初始化ESLint配置：在项目根目录下运行npx eslint --init，根据提示选择配置选项，生成.eslintrc.*配置文件。
  5. 配置文件：生成的配置文件可以是.eslintrc.js、.eslintrc.json或.eslintrc.yaml，根据个人喜好选择。
基本规则与配置文件

ESLint的配置文件定义了代码检查的规则。以下是一些基本的规则和配置示例：

  1. 规则启用：在配置文件中，可以通过rules对象来启用或禁用规则。例如，要启用semi规则（要求或禁止使用分号），可以设置"semi": ["error", "always"]。
  2. 环境设置：在配置文件中，可以通过env对象来指定代码运行的环境，如browser、node等。
  3. 全局变量：在配置文件中，可以通过globals对象来声明全局变量，例如"jQuery": true。
  4. 扩展配置：可以通过extends属性来扩展其他配置文件，如"extends": "eslint:recommended"。
  5. 插件：可以通过plugins属性来使用ESLint插件，例如"plugins": ["vue"]。

以下是一个简单的.eslintrc.js配置文件示例：

module.exports = {
  "env": {
    "browser": true,
    "node": true
  },
  "extends": "eslint:recommended",
  "globals": {
    "jQuery": true
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  },
  "plugins": [
    "vue"
  ]
};

这个配置文件启用了浏览器和Node.js环境，扩展了ESLint的推荐规则，声明了jQuery为全局变量，要求使用分号，并使用双引号，同时启用了Vue插件。

通过学习和配置ESLint，开发者可以确保代码质量，减少错误，并保持代码风格的一致性。

第三章：Prettier入门

Prettier概述

Prettier是一个自动格式化代码的工具，它通过解析代码并使用自己的规则重新打印代码，以保持一致的代码风格。Prettier支持多种语言，包括JavaScript、TypeScript、HTML、CSS、SCSS等。它旨在减少开发者之间关于代码格式的争论，并提高开发效率。

安装与配置Prettier

安装Prettier通常需要以下步骤：

  1. 安装Node.js和npm：确保你的系统上已经安装了Node.js和npm。
  2. 项目内安装Prettier：在项目目录下运行npm install prettier --save-dev来安装Prettier作为开发依赖。
  3. 创建Prettier配置文件：在项目根目录下创建一个.prettierrc文件，或者在package.json中添加prettier配置。
  4. 集成到编辑器：大多数现代代码编辑器都支持Prettier，可以通过安装相应的插件来集成Prettier。
  5. 命令行使用：可以使用npx prettier --write <文件路径>来格式化单个文件，或者npx prettier --write .来格式化整个项目。
Prettier的配置选项

Prettier的配置选项可以在.prettierrc文件中设置，或者在package.json中的prettier字段中设置。以下是一些常用的配置选项：

  • printWidth：指定每行代码的最大宽度（默认为80）。
  • tabWidth：指定每个制表符的空格数（默认为2）。
  • useTabs：指定是否使用制表符而不是空格（默认为false）。
  • semi：指定是否在语句末尾添加分号（默认为true）。
  • singleQuote：指定是否使用单引号而不是双引号（默认为false）。
  • trailingComma：指定多行对象和数组的最后一个元素后面是否添加逗号（默认为"es5"）。
  • bracketSpacing：指定对象字面量属性之间是否需要空格（默认为true）。
  • jsxBracketSameLine：指定多行JSX元素是否在最后一行闭合（默认为false）。

以下是一个.prettierrc配置文件示例：

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

这个配置文件设置了每行代码的最大宽度为100，使用2个空格作为制表符，语句末尾添加分号，使用单引号，多行对象和数组的最后一个元素后面添加逗号，对象字面量属性之间需要空格，多行JSX元素不在最后一行闭合。

通过学习和配置Prettier，开发者可以保持一致的代码风格，减少手动格式化代码的时间，并提高代码的可读性和可维护性。

第四章：Vue 3与ESLint、Prettier集成

在Vue 3项目中安装ESLint和Prettier

要在Vue 3项目中安装ESLint和Prettier，可以按照以下步骤操作：

  1. 安装Node.js和npm：确保你的系统上已经安装了Node.js和npm。

  2. 创建Vue 3项目：如果还没有Vue 3项目，可以使用Vue CLI创建一个新的项目。运行vue create your-project-name，并选择手动配置，以便可以添加ESLint和Prettier。

  3. 安装ESLint和Prettier：在项目目录下运行以下命令来安装ESLint和Prettier及其相关依赖：

    npm install eslint eslint-plugin-vue --save-dev
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

  4. 安装编辑器插件：大多数现代代码编辑器都支持ESLint和Prettier，可以通过安装相应的插件来集成。

配置ESLint以支持Vue单文件组件

为了使ESLint能够正确地解析Vue单文件组件（.vue文件），需要安装并配置eslint-plugin-vue。这通常在创建Vue项目时就已经完成，但如果需要手动配置，可以按照以下步骤操作：

  1. 创建ESLint配置文件：在项目根目录下创建一个.eslintrc.js文件，并添加以下内容：

    module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/prettier'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    // 在这里添加自定义规则
  }
};

  2. 确保ESLint能够解析.vue文件：确保.eslintignore文件中不包含.vue扩展名，这样ESLint就会检查Vue文件。

配置Prettier与ESLint协同工作

为了使Prettier和ESLint协同工作，需要安装eslint-config-prettier和eslint-plugin-prettier，并在ESLint配置中引入它们。这通常在安装Prettier时已经完成，但如果需要手动配置，可以按照以下步骤操作：

  1. 更新ESLint配置文件：在.eslintrc.js文件中，确保extends数组中包含了'plugin:prettier/recommended'，这样Prettier的规则就会被ESLint所采用。
  2. 创建Prettier配置文件：在项目根目录下创建一个.prettierrc文件，并添加你的Prettier配置。
  3. 确保Prettier和ESLint规则一致：Prettier和ESLint的配置应该保持一致，以避免冲突。例如，如果Prettier配置使用单引号，那么ESLint也应该配置为使用单引号。

通过以上步骤，你就可以在Vue 3项目中集成ESLint和Prettier，从而保持代码风格的一致性，并提高代码质量。

第五章：制定代码规范

代码规范的重要性

代码规范是指一组关于代码编写风格和结构的规则。它们对于软件开发项目来说至关重要，原因如下：

  1. 一致性：代码规范确保了所有开发者的代码风格一致，使得代码更易于阅读和维护。
  2. 可维护性：一致的代码风格减少了理解代码的难度，使得维护和更新代码变得更加容易。
  3. 可读性：良好的代码规范提高了代码的可读性，使得新成员能够更快地理解项目。
  4. 减少错误：通过强制执行代码规范，可以减少由于风格不一致引起的错误。
  5. 自动化检查：代码规范可以通过工具自动检查，如ESLint和Prettier，从而提高开发效率。
选择或创建代码规范集

选择或创建代码规范集时，可以考虑以下几个方面：

  1. 现有规范：许多组织和社区已经创建了广泛使用的代码规范，如Airbnb、Google、Standard等。可以选择一个与项目风格相近的规范作为基础。
  2. 项目需求：根据项目的具体需求，可能需要对现有规范进行调整或创建全新的规范。
  3. 团队习惯：考虑团队成员的习惯和偏好，选择一个大家都能接受的规范。
  4. 工具支持：确保所选规范有良好的工具支持，如ESLint、Prettier等，以便自动化检查和修复。
应用代码规范到项目中

一旦选择了代码规范，就需要将其应用到项目中。以下是一些步骤：

  1. 配置工具：根据所选规范配置ESLint、Prettier等工具。这可能涉及到修改.eslintrc.js、.prettierrc等配置文件。
  2. 集成到编辑器：大多数现代代码编辑器都支持ESLint和Prettier，可以通过安装相应的插件来实现实时检查和自动修复。
  3. 设置Git钩子：可以使用Git钩子（如pre-commit）在代码提交前自动运行ESLint和Prettier，确保提交的代码符合规范。
  4. 文档和培训：为团队成员提供代码规范的文档和培训，确保每个人都理解并遵循规范。
  5. 定期审查：定期进行代码审查，确保代码规范得到遵守，并在必要时更新规范。

通过以上步骤，可以将代码规范有效地应用到项目中，从而提高代码质量，促进团队合作。

第六章：实践中的代码规范

变量与函数命名规范

变量和函数的命名是代码规范中非常重要的一部分，良好的命名可以提高代码的可读性和可维护性。以下是一些通用的命名规范：

  1. 变量命名：

    • 使用驼峰式命名法（camelCase），例如userAge。
    • 避免使用缩写，除非是广泛认可的缩写，如ID。
    • 变量名应该描述其代表的含义，例如maxWidth而不是w。
    • 私有变量通常以一个下划线开头，例如_privateVariable。

  2. 函数命名：

    • 使用驼峰式命名法，首字母大写，例如calculateTotal。
    • 函数名应该描述其执行的操作，例如getUserProfile。
    • 避免使用动词短语作为函数名，例如doSomething。
代码缩进与格式化

代码的缩进和格式化对于代码的可读性至关重要。以下是一些通用的缩进和格式化规范：

  1. 缩进：

    • 使用一致的缩进，通常为2个或4个空格。
    • 不要使用制表符，因为它们在不同编辑器中的显示可能不一致。

  2. 格式化：

    • 使用空格来分隔操作符，例如a = b + c。
    • 在逗号后面使用空格，例如array = [1, 2, 3]。
    • 在函数调用时，参数之间使用空格，例如functionName(arg1, arg2)。
    • 使用一致的空行来分隔代码块，例如函数定义之间。
最佳实践与常见陷阱

在实践代码规范时，以下是一些最佳实践和常见陷阱：

  1. 最佳实践：

    • 使用版本控制系统，如Git，来跟踪代码更改。
    • 定期进行代码审查，确保代码质量。
    • 使用自动化工具来检查和修复代码格式问题。
    • 保持代码简洁，避免不必要的复杂性。

  2. 常见陷阱：

    • 过度使用缩写，导致代码难以理解。
    • 不一致的缩进和格式化，使得代码难以阅读。
    • 忽略代码规范，导致代码质量下降。
    • 使用不清晰的命名，使得代码难以维护。

第七章：持续集成与代码审查

集成ESLint和Prettier到持续集成流程

持续集成（CI）是一种软件开发实践，其中团队成员的代码更改频繁地集成到主分支中。ESLint是一个用于识别和报告JavaScript代码中的模式匹配的工具，而Prettier是一个自动格式化代码的工具。将ESLint和Prettier集成到CI流程中可以确保代码质量和一致性。
AD：覆盖广泛主题工具可供使用

  1. 配置ESLint：

    • 在项目根目录下创建一个.eslintrc文件，配置ESLint规则。
    • 安装ESLint依赖：npm install eslint --save-dev。
    • 运行npx eslint --init来初始化ESLint配置。

  2. 配置Prettier：

    • 在项目根目录下创建一个.prettierrc文件，配置Prettier规则。
    • 安装Prettier依赖：npm install prettier --save-dev。
    • 在package.json中添加一个脚本来运行Prettier："prettier": "prettier --write '**/*.{js,jsx,ts,tsx}'"。

  3. 集成到CI：

    • 在CI配置文件中（如.travis.yml或Jenkinsfile），添加步骤来安装ESLint和Prettier。
    • 添加步骤来运行ESLint和Prettier脚本，例如npm run lint和npm run prettier。
    • 如果ESLint或Prettier报告错误，CI构建应失败，以防止不符合规范的代码被合并。
代码审查与ESLint、Prettier反馈

代码审查是确保代码质量的关键步骤，ESLint和Prettier可以帮助提供自动化的反馈。

  1. 代码审查：

    • 在代码合并到主分支之前，进行代码审查。
    • 审查者应检查代码是否符合ESLint和Prettier规则。
    • 如果发现不符合规范的地方，应要求开发者修复。

  2. ESLint和Prettier反馈：

    • 开发者可以在本地运行ESLint和Prettier来检查代码。
    • CI流程中的ESLint和Prettier脚本会自动提供反馈。
    • 如果代码不符合规范，CI将提供详细的错误信息，开发者可以根据这些信息进行修复。
自动化代码质量监控

自动化代码质量监控可以帮助团队保持代码质量，并及早发现潜在的问题。

  1. 设置监控：

    • 使用CI工具的监控功能来跟踪代码质量指标。
    • 设置警报，当代码质量下降时通知团队成员。

  2. 定期报告：

    • 定期生成代码质量报告，包括ESLint和Prettier的统计数据。
    • 分析报告，识别趋势和潜在的问题。

  3. 持续改进：

    • 根据监控结果和代码审查反馈，不断改进代码规范和工具配置。
    • 鼓励团队成员学习和遵循最佳实践。

通过持续集成、代码审查和自动化代码质量监控，可以确保代码质量并提高开发效率。

第八章：高级ESLint与Prettier配置

自定义ESLint规则

自定义ESLint规则可以帮助团队根据项目需求调整代码规范。

  1. 创建自定义规则：

    • 在项目根目录下创建一个名为eslint-rules的文件夹。
    • 在该文件夹中创建自定义规则的JavaScript文件，例如custom-rule.js。
    • 在自定义规则文件中，使用ESLint的规则模板来编写规则。

  2. 配置ESLint使用自定义规则：

    • 在.eslintrc文件中，添加extends字段来指定自定义规则文件。
    • 使用rules字段来启用和配置自定义规则。
使用ESLint插件

ESLint插件可以扩展ESLint的功能，提供额外的规则和功能。

  1. 安装ESLint插件：

    • 使用npm install eslint-plugin-example --save-dev来安装插件（example是插件名）。

  2. 配置ESLint使用插件：

    • 在.eslintrc文件中，添加plugins字段来指定插件。
    • 使用rules字段来启用和配置插件的规则。
配置Prettier与ESLint协同工作的高级技巧

Prettier和ESLint可以协同工作，以确保代码既符合风格规范又符合代码质量规范。

  1. 安装ESLint Prettier插件：

    • 使用npm install eslint-config-prettier eslint-plugin-prettier --save-dev来安装插件。

  2. 配置ESLint忽略Prettier冲突：

    • 在.eslintrc文件中，添加extends字段来指定eslint-config-prettier。
    • 在plugins字段中添加prettier。
    • 在rules字段中，将prettier/prettier规则设置为error。

  3. 配置Prettier忽略ESLint格式化：

    • 在.prettierrc文件中，添加eslintIntegration字段并设置为true。

通过这些高级配置，可以确保Prettier和ESLint协同工作，提高代码质量和一致性。

附录

常用ESLint规则参考

ESLint 提供了大量的规则来帮助开发者编写高质量的代码。以下是一些常用的ESLint规则：

  • semi: 要求或禁止使用分号而不是 ASI（自动分号插入）。
  • quotes: 强制使用单引号、双引号或模板字符串。
  • no-unused-vars: 禁止出现未使用过的变量。
  • no-console: 禁止使用console对象。
  • no-debugger: 禁止使用debugger语句。
  • indent: 强制使用一致的缩进。
  • linebreak-style: 强制使用一致的换行风格（LF 或 CRLF）。
  • no-multiple-empty-lines: 禁止出现多行空行。
  • no-trailing-spaces: 禁止行尾空格。
  • arrow-parens: 要求箭头函数的参数使用圆括号。
Prettier的配置选项参考

Prettier 提供了一系列配置选项来控制代码格式化。以下是一些常用的Prettier配置选项：

  • printWidth: 指定每行代码的最大字符数。
  • tabWidth: 指定每个制表符的空格数。
  • useTabs: 强制使用制表符而不是空格。
  • semi: 在语句末尾添加分号。
  • singleQuote: 使用单引号而不是双引号。
  • trailingComma: 在多行对象字面量中打印尾随逗号。
  • bracketSpacing: 在对象字面量属性中打印空格。
  • jsxBracketSameLine: 将多行JSX元素的>放置在最后一行的末尾。
  • arrowParens: 为单个参数的箭头函数添加圆括号。
Vue 3与ESLint、Prettier常见问题解答

在使用Vue 3与ESLint、Prettier时，可能会遇到以下问题：

  1. Vue文件格式化问题：

    • 确保使用eslint-plugin-vue插件来支持Vue文件。
    • 在Prettier配置中启用vue语言支持。

  2. 组件命名规范：

    • 使用ESLint规则来强制组件命名规范，例如vue/component-name-in-template-casing。

  3. 模板语法检查：

    • 使用ESLint规则来检查Vue模板中的语法，例如vue/no-unused-vars。
相关资源与工具推荐
  • ESLint 官方文档：https://eslint.org/docs/rules/
  • Prettier 官方文档：https://prettier.io/docs/en/options.html
  • Vue ESLint 插件：https://eslint.vuejs.org/
  • ESLint 配置生成器：https://eslint.org/demo/
  • Prettier 配置生成器：https://prettier.io/playground/
  • cmdragon’s Blog：https://www.cmdragon.cn

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1811348.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++入门 string（2）

C++入门 string（2）

目录 string类的常用接口说明 string类对象的容量操作 size & max_size & length & capacity empty & clear reserve & resize string类对象的元素访问 at & back & front string类对象的修改操作&#xff08;字符串操作&#xff09; sub…
阅读更多...
梯度提升树GBDT系列算法

梯度提升树GBDT系列算法

Boosting方法的基本元素与基本流程&#x1f4ab; 在Boosting集成算法当中&#xff0c;我们逐一建立多个弱评估器&#xff08;基本是决策树&#xff09;&#xff0c;并且下一个弱评估器的建立方式依赖于上一个弱评估器的评估结果&#xff0c;最终综合多个弱评估器的结果进行输出…
阅读更多...
启明智显工业级HMI芯片Model3A功耗特性--（以M3A 7寸触摸屏为例）

启明智显工业级HMI芯片Model3A功耗特性--（以M3A 7寸触摸屏为例）

** 前言&#xff1a; ** 「Model系列」芯片是启明智显针对工业、行业以及车载产品市场推出的系列HMI芯片&#xff0c;主要应用于工业自动化、智能终端HMI、车载仪表盘、两轮车彩屏仪表、串口屏、智能中控、智能家居、充电桩显示屏、储能显示屏、工业触摸屏等领域。此系列具有…
阅读更多...
错误代码 -2147136892如何解决

错误代码 -2147136892如何解决

错误代码 -2147136892 在 LabVIEW 中表示无法找到 CANopen 硬件。这个错误可能是由以下几个原因引起的&#xff0c;如安装不正确、端口名称错误或硬件连接问题。以下是可能的原因和详细的解决步骤&#xff1a; 可能的原因 CANopen 硬件安装不正确 硬件可能未正确安装或连接。 …
阅读更多...
六大维度全面焕新升级！麒麟信安服务器操作系统V3.6.1引领未来计算

六大维度全面焕新升级！麒麟信安服务器操作系统V3.6.1引领未来计算

昨日&#xff0c;openEuler 24.03 LTS 正式发布&#xff0c;麒麟信安作为openEuler社区重要贡献者和参与者&#xff0c;充分发挥自身在国产操作系统领域的技术优势&#xff0c;在打造安全可靠、极致体验的操作系统上与社区共同努力&#xff0c;同步推出服务器操作系统V3.6.1&am…
阅读更多...
进口不锈钢硬密封蝶阀选型-美国品牌

进口不锈钢硬密封蝶阀选型-美国品牌

进口不锈钢硬密封蝶阀的选型需要综合考虑多个因素&#xff0c;以确保阀门能够满足实际工况的需求。以下是根据参考文章中的信息&#xff0c;对进口不锈钢硬密封蝶阀选型进行的详细分点表示和归纳&#xff1a; 一、流体介质 种类&#xff1a;首先明确将要处理的流体介质种类&a…
阅读更多...
长城汽车：坚定战略往往更难

长城汽车：坚定战略往往更难

长城汽车在2024年粤港澳大湾区车展上的表现和战略方向。 以下是对通稿中信息的深入解读&#xff1a; 1. **车展亮相的重要性**&#xff1a; - 长城汽车选择在粤港澳大湾区车展这一重要平台上展示其旗舰产品&#xff0c;这不仅是对产品实力的展示&#xff0c;也是品牌影响力提升…
阅读更多...
Marin说PCB之PCB封装库路径知多少？

Marin说PCB之PCB封装库路径知多少？

小编我之前看庆余年2的时候有一段春闱考试片段&#xff0c;范闲大人四位门生只出现了三个&#xff0c;一个人一直活在其他人的嘴里&#xff0c;他就是成佳林。剧中有一段黑屏的时间其实就是致敬所有考生们&#xff0c;这个彩蛋的立意真的高啊&#xff0c;之前还没发现这个&…
阅读更多...
关于旋转矩阵的理解，以及左乘和右乘的区别

关于旋转矩阵的理解，以及左乘和右乘的区别

一、对左乘一个旋转矩阵的理解 左乘旋转矩阵的旋转是相对与一个固定的坐标系的&#xff0c;这个坐标系不会因相应的向量或坐标的改变而改变&#xff0c;通常坐标系的初始位置就是固定坐标系的位置。 1&#xff09;相对于固定坐标系单次向量的旋转 这里的“单次”指的是绕RPY角…
阅读更多...
使用 Bing 的 Chat 初体验

使用 Bing 的 Chat 初体验

前言 下载好 Edge 浏览器&#xff0c;并且通过 ModHeader 插件的设置才能访问外边的功能完善的 edge &#xff0c;但是想要进行 chat 需要通过申请才行&#xff0c;网上很多教程我就不赘述了。 正文 我的申请刚刚通过&#xff0c;但是使用 Chat 的效果一般&#xff0c;感觉很…
阅读更多...
Threejs-06、利用lil-GUI调试3D效果

Threejs-06、利用lil-GUI调试3D效果

1、 引入lil.gui // 引入lil.gui import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";2、创建GUI const gui new GUI();3、添加按钮 let eventObj {// 全屏事件Fullscreen:function(){// 全屏document.body.requestFullscreen();console.lo…
阅读更多...
先导桌面式小型数控加工中心更有利于教学投入使用

先导桌面式小型数控加工中心更有利于教学投入使用

桌面式 小型数控加工中心 VMC220是先导一款特色的产品&#xff0c;它体积小&#xff0c;占地面积不足1立方&#xff0c;精忠160KG左右&#xff0c;配工业级数控提供&#xff0c;机身选用优质铸铁铸造&#xff0c;采用工业级研磨滚珠丝杆&#xff0c;使用主轴伺服电机。 某高校选…
阅读更多...
Redisson 实现分布式锁

Redisson 实现分布式锁

1、相关配置 Component public class RedissonDistributedLock {Autowiredprivate RedissonClient redissonClient;public boolean tryLock(String lockKey, long expireTime, long waitTime) throws InterruptedException {RLock lock redissonClient.getLock(lockKey);retu…
阅读更多...
Compshare平台使用体验分享

Compshare平台使用体验分享

一、引言 随着AI技术的飞速发展&#xff0c;对高性能计算资源的需求也在不断增加。为了满足广大AI研究者和开发者的需求&#xff0c;各类算力共享平台应运而生。其中&#xff0c;Compshare平台凭借其卓越的性能和便捷的操作&#xff0c;迅速成为用户关注的焦点。本文将通过对隶…
阅读更多...
安全防护与隐私保护：淘宝在线扭蛋机用户数据安全的深度解析

安全防护与隐私保护：淘宝在线扭蛋机用户数据安全的深度解析

淘宝在线扭蛋机作为一种集购物与娱乐于一体的新型平台&#xff0c;用户数据的安全性至关重要。本文将深入探讨如何采取有效措施&#xff0c;确保在线扭蛋机用户数据的安全性&#xff0c;防止数据泄露和滥用。 一、构建多层次安全防护体系 为了应对复杂的网络安全威胁&#xf…
阅读更多...
【Excel技巧】Excel打开密码的两种设置方法！

【Excel技巧】Excel打开密码的两种设置方法！

excel文件打开密码可以再打开文件时输入密码查看文件内容&#xff0c;这样就可以保护文件内容不被任何人查看了&#xff0c;今天分享excel打开密码的两种设置方法给大家。 方法一&#xff1a; 点击excel中的【文件】功能&#xff0c;找到【信息】-【保护工作表】-【用密码进行…
阅读更多...
HarmonyOS未来五年的市场展望

HarmonyOS未来五年的市场展望

一、引言 随着科技的不断进步和消费者对于智能化设备需求的日益增长&#xff0c;操作系统作为连接硬件与软件的核心平台&#xff0c;其重要性愈发凸显。HarmonyOS&#xff08;鸿蒙系统&#xff09;&#xff0c;作为华为自主研发的分布式操作系统&#xff0c;自诞生以来便备受瞩…
阅读更多...
【PowerDesigner】创建和管理CDM之新建和使用域

【PowerDesigner】创建和管理CDM之新建和使用域

目录 &#x1f30a;1. PowerDesigner简介 &#x1f30d;1.1 常用模型文件 &#x1f30d;1.2 PowerDesigner使用环境 &#x1f30a;2. 创建和管理CDM &#x1f30d;​​​​​​2.1 新建CDM &#x1f30d;2.2 新建和使用域 &#x1f30a;3. 研究心得 &#x1f30a;1. Pow…
阅读更多...
【Three.js】知识梳理二：Three.js引用和环境搭建

【Three.js】知识梳理二：Three.js引用和环境搭建

1.文件包下载和目录简介 1.1 文件包下载 a. 官方网站下载&#xff1a; 访问 Three.js 的官方网站&#xff08;threejs.org/&#xff09;并点击 "Download" 按钮&#xff0c;下载最新版本的文件包。 b. GitHub仓库下载&#xff1a; 访问 Three.js 的 GitHub 仓库&a…
阅读更多...
代码随想录算法训练营第36期DAY57

代码随想录算法训练营第36期DAY57

DAY57 今天的好消息&#xff1a;能去华五。 1143最长公共子序列 Code: class Solution {public: int longestCommonSubsequence(string text1, string text2) { vector<vector<int>> dp(text1.size()1,vector<int>(text2.size()1,0)); f…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023