vite6+vue3+ts+prettier+eslint9配置前端项目(后台管理系统、移动端H5项目通用配置)

很多小伙伴苦于无法搭建一个规范的前端项目,导致后续开发不规范,今天给大家带来一个基于Vite6+TypeScript+Vue3+ESlint9+Prettier的搭建教程。

目录

  • 一、基础配置
      • 1、初始化项目
      • 2、代码质量风格的统一
        • 2.1、配置prettier
        • 2.2、配置eslint
        • 2.3、配置typescript
      • 3、配置代码检查器
      • 4、修改路由配置信息
  • 二、重置浏览器默认样式
  • 三、安装样式预处理器
  • 四、ui组件库安装
    • 1、element-plus组件库配置
    • 2、vant组件库配置
  • 五、二次封装axios
  • 六、配置环境变量
    • 1、创建配置文件
    • 2、**使用变量**
    • 3、修改package.json启动命令
  • 七、拓展实用插件(按需安装配置)
    • 1、dayjs 时间处理
    • 2、qs
    • 3、lodash实用工具库
    • 4、big.js(涉及计算相关)
    • 5、js-cookie
    • 6、postcss-plugin-px2rem
    • 7、@vitejs/plugin-legacy(兼容旧浏览器,移动端项目重点推荐!!!)

环境依赖版本

  • node:v18.20.0
  • vite:^6.0.5
  • typescript:~5.6.2
  • vue:^3.5.13
  • eslint: ^9.14.0,
  • vite-plugin-checker: ^0.8.0"

一、基础配置

最新版vue官方已放弃webpack作为构建工具,vue官方之前一直是以webpack,但是近期我发现vue官网已经更新了相关内容,目前开始主推vite作为脚手架构建的工具,使用官方推荐的脚手架会更加方便,脚手架可自行选择ts、pinia 、router等相关配置,不用再像之前一样从头到尾进行安装,简单又方便!!!
官方地址:https://cn.vuejs.org/guide/quick-start.html

1、初始化项目

注意:此处使用node版本需要>18.3

pnpm create vue@latest

运行指令后接下来就是根据需要安装所需的功能
在这里插入图片描述
初始化完成的结构如图所示
在这里插入图片描述

2、代码质量风格的统一

eslint可以保证项目的质量,prettier可以保证项目的统一格式、风格。
每个公司的开发规则各有不同,此处根据各自的需求自行配置,下方是我常用的风格配置(仅供参考)

2.1、配置prettier
  • 安装

eslint prettier插件安装、用来解决与eslint的冲突、安装prettier

pnpm add eslint-plugin-prettier eslint-config-prettier prettier -D
  • 新增.prettierrc.json文件
    在这里插入图片描述
{
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 150,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "trailingComma": "all",
  "bracketSameLine": false,
  "embeddedLanguageFormatting": "auto",
  "useTabs": false,
  "htmlWhitespaceSensitivity": "ignore"
}
2.2、配置eslint
  • 规则
  • “off” 或 0 - 关闭规则
  • “warn” 或 1 - 打开规则作为警告(不影响退出代码)
  • “error” 或 2 - 打开规则作为错误(触发时退出代码为 1)
  • 安装
// eslint vue插件安装
pnpm add eslint eslint-plugin-vue -D
//eslint 识别ts语法
pnpm add @typescript-eslint/parser
//eslint ts默认规则补充
pnpm add @typescript-eslint/eslint-plugin -D

自 ESLint v9.0.0 以后,平面配置文件格式一直是默认的配置文件格式。配置文件格式已从 eslintrc 更改为 flat config。默认情况下,ESLint CLI 将搜索 eslint.config.(js | cjs | mjs) 而不是 .eslintrc.* 文件。如果未找到 eslint.config.js 文件,CLI 会将其视为错误,并且不会运行。
以下是官方给出的具体介绍。https://eslint.org/docs/latest/use/configure/migration-guide
可参考以下文章:
探索 Antfu ESLint 配置:一款极为便捷的 ESLint 设置方案
ESLint 扁平化配置使用指南

  • 修改eslint.config.js配置信息
import pluginVue from 'eslint-plugin-vue';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import prettier from 'eslint-plugin-prettier';
import vueTsEslintConfig from '@vue/eslint-config-typescript';
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting';
import vueEslintParser from 'vue-eslint-parser';
import tsEslintParser from '@typescript-eslint/parser';

export default [
  {
    name: 'app/files-to-lint',
    files: ['**/*.{ts,mts,tsx,vue,js,jsx}'],
  },
  {
    name: 'app/files-to-ignore',
    ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**', 'node_modules'],
    // plugins: ['vue', '@typescript-eslint', 'prettier'],
  },
  ...pluginVue.configs['flat/essential'],
  ...vueTsEslintConfig(),
  skipFormatting,
  {
    name: 'app/plugins',
    plugins: {
      vue: pluginVue,
      '@typescript-eslint': typescriptEslint,
      prettier,
    },
  },
  {
    name: 'app/parser-config-vue',
    languageOptions: {
      parser: vueEslintParser,
    },
  },
  {
    name: 'app/parser-config-ts',
    files: ['**/*.{ts,mts,tsx}'],
    languageOptions: {
      parser: tsEslintParser,
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
  },
  {
    name: 'app/custom-rules',
    rules: {
      'no-console': process.env.NODE_ENV === 'production' ? 'off' : 'off',
      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
      'key-spacing': [
        'error',
        {
          beforeColon: false,
          afterColon: true,
        },
      ],
      'space-in-parens': ['error', 'never'],
      'object-curly-spacing': ['error', 'always'],
      'object-curly-newline': [
        'error',
        {
          minProperties: 4,
          multiline: true,
          consistent: true,
        },
      ],
      'vue/object-curly-spacing': ['error', 'always'],
      'max-len': 'off',
      'no-multi-spaces': 'error',
      'no-return-assign': 'off',
      semi: ['error', 'always'],
      eqeqeq: 'error',
      'jsx-quotes': ['off', 'prefer-single'],
      'jsx-a11y/click-events-have-key-events': 'off',
      'jsx-a11y/no-noninteractive-element-interactions': 'off',
      'import/prefer-default-export': 'off',
      'import/extensions': 'off',
      'import/no-unresolved': 'off',
      'no-multiple-empty-lines': [
        'error',
        {
          max: 2,
          maxEOF: 1,
        },
      ],
      'no-param-reassign': 'off',
      'vue/eqeqeq': ['error', 'always'],
      'vue/html-end-tags': 'error',
      'vue/no-spaces-around-equal-signs-in-attribute': 'error',
      'vue/multi-word-component-names': 'off',
      'vue/no-template-shadow': 'error',
      'vue/require-prop-types': 'error',
      'vue/require-explicit-emits': 'error',
      'vue/mustache-interpolation-spacing': ['error', 'always'],
      'vue/no-multi-spaces': [
        'error',
        {
          ignoreProperties: false,
        },
      ],
      'vue/html-closing-bracket-newline': [
        'error',
        {
          singleline: 'never',
          multiline: 'always',
        },
      ],
      'vue/html-self-closing': 'off',
      'vue/block-lang': 'off',
      'vue/html-indent': [
        'error',
        2,
        {
          attribute: 1,
          baseIndent: 1,
          closeBracket: 0,
          alignAttributesVertically: true,
          ignores: ['VExpressionContainer'],
        },
      ],
      'vue/html-closing-bracket-spacing': [
        'error',
        {
          startTag: 'never',
          endTag: 'never',
          selfClosingTag: 'always',
        },
      ],
      'vue/max-attributes-per-line': [
        'error',
        {
          singleline: 3,
          multiline: 1,
        },
      ],
      'vue/attribute-hyphenation': 'off',
      '@typescript-eslint/no-shadow': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
      '@typescript-eslint/no-unused-vars': 'error',
      '@typescript-eslint/ban-ts-comment': 'off',
      '@typescript-eslint/indent': 'off',
    },
  },
];
2.3、配置typescript
  • 修改配置tsconfig.json文件
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "exclude": ["src/**/__tests__/*", "node_modules/**"],
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "node",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "allowJs": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* Paths */
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

3、配置代码检查器

vite-plugin-checker 是一个 Vite 插件,它能够在工作线程中运行 TypeScript、ESLint、vue-tsc、Stylelint 等多种静态代码检查工具,以提高开发效率并确保代码质量。

  • 安装
pnpm add vite-plugin-checker -D
  • 修改vite.config.ts配置
import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import checker from 'vite-plugin-checker';
import vueDevTools from 'vite-plugin-vue-devtools';

// https://vite.dev/config/
export default defineConfig({
  base: './',    // 配置服务器的检索方式
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    checker({
      eslint: {
        useFlatConfig: true,
        lintCommand: 'eslint "./src/**/*.{ts,tsx,vue}"',
      },
      overlay: {
        initialIsOpen: false,
      },
      typescript: true,
      vueTsc: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  // 配置外部 ip 访问与端口
  server: {
    host: '0.0.0.0',
    port: 9999,
  },
});

4、修改路由配置信息

如果公司对应服务没有做相关的路由映射,需要将src/router/index.ts中的createWebHistory替换成createWebHashHistory如果有请忽略这一步骤~

如下所示
在这里插入图片描述

二、重置浏览器默认样式

normalize.css 是一个用于重置浏览器默认样式的库,使得不同浏览器之间的渲染更加一致

  • 安装
pnpm add normalize.css
  • src/mian.ts引入
import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';
import 'normalize.css';

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount('#app');

三、安装样式预处理器

大家可以自行安装自己熟悉的预处理器(less、sass、stylus……),此处我选择自己常用的sass

pnpm add sass -D

tip:vite内置了常用的预处理器支持无需,安装配置sass-loader 即可使用

四、ui组件库安装

市面上的ui组件库有很多,此处我只提供我最常用的两种组件库进行配置

如果是搭建后台管理系统,此处可看element-plus配置。
如果是搭建移动端h5,此处建议可看vant组件库

1、element-plus组件库配置

官方文档配置:https://element-plus.org/zh-CN/guide/quickstart.html

  • 安装
pnpm add element-plus
pnpm add -D unplugin-vue-components unplugin-auto-import
  • 修改vite.config.ts配置
import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import checker from 'vite-plugin-checker';
import vueDevTools from 'vite-plugin-vue-devtools';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vite.dev/config/
export default defineConfig({
  base: './', // 设置打包路径
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    checker({
      eslint: {
        useFlatConfig: true,
        lintCommand: 'eslint "./src/**/*.{ts,tsx,vue}"',
      },
      overlay: {
        initialIsOpen: false,
      },
      typescript: true,
      vueTsc: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 9999,
  },
});

2、vant组件库配置

官方文档配置: https://vant-ui.github.io/vant/#/zh-CN/quickstart

  • 安装
pnpm add vant
pnpm add /auto-import-resolver unplugin-vue-components unplugin-auto-import -D
  • 修改vite.config.ts配置
import { fileURLToPath, URL } from 'node:url';

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import checker from 'vite-plugin-checker';
import vueDevTools from 'vite-plugin-vue-devtools';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

// https://vite.dev/config/
export default defineConfig({
  base: './', // 设置打包路径
  plugins: [
    vue(),
    vueJsx(),
    vueDevTools(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
    checker({
      eslint: {
        useFlatConfig: true,
        lintCommand: 'eslint "./src/**/*.{ts,tsx,vue}"',
      },
      overlay: {
        initialIsOpen: false,
      },
      typescript: true,
      vueTsc: true,
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 9999,
  },
});

五、二次封装axios

  • 安装
pnpm add axios

新增src/service/index.ts文件

import Axios from 'axios';
import type { AxiosInstance, InternalAxiosRequestConfig, AxiosResponse } from 'axios';

const axios: AxiosInstance = Axios.create({
  baseURL: 'XXX',
  timeout: 20000,
  withCredentials: true,
});

axios.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    return config;
  },
  (error) => {
    // pendingRequest.clear();
    console.log(error);
    return Promise.reject(error);
  },
);

// 请求结束关闭loading
axios.interceptors.response.use(
  (response: AxiosResponse) => {
    // console.log(response);
    return response.data || {};
  },
  (err) => {
    console.log('err', err);

    return Promise.reject(err);
  },
);

export function get<T>(url: string, params?: any): Promise<T> {
  return axios.get(url, { params });
}

export function post<T>(url: string, data?: any): Promise<T> {
  return axios.post(url, data);
}

export default axios;

六、配置环境变量

1、创建配置文件

根目录创建三个配置文件,更多环境一样如此操作。

注: 定义的变量必须以VITE_开头

  • .env.development (开发环境)
VITE_APP_ENV = 'development';
VITE_APP_API_URL = /api / xxx务后地服本端 / xxx测试 / xxx生产都行;
  • .env.test (测试环境)
VITE_APP_ENV = 'test';
VITE_APP_API_URL = xxx测试域名;
  • .env.production (生产环境)
VITE_APP_ENV = 'production';
VITE_APP_API_URL = xxx生产域名;

2、使用变量

  • 在代码中使用
const baseUrl = import.meta.env.VITE_BASE_URL;
  • 在vite.config.ts中使用环境变量
// 使用loadEnv方法加载环境变量
import { defineConfig, loadEnv } from 'vite';
//...

export default ({ mode }) => {
  console.log('加载的环境变量', loadEnv(mode, process.cwd()).VITE_BASE_URL);
  return defineConfig({
    //...
  });
};

3、修改package.json启动命令

  "scripts": {
    "dev": "vite --mode development",
    "build": "vite build --mode production",
  },

七、拓展实用插件(按需安装配置)

此处推荐一些我常用的工具库,大家可以参考按需安装。相关使用方法网上一搜一大堆,这边就不多余再演示了

1、dayjs 时间处理

Day.js是一个极简的JavaScript库, 可以为现代浏览器解析、验证、操作和显示日期和时间,文件大小只有2KB左右。Day.js对国际化有很大的支持。

pnpm add dayjs

2、qs

qs是一个流行的查询参数序列化和解析库。

pnpm add qs
// 如果项目配置了typescript需安装
pnpm add @types/qs -D

3、lodash实用工具库

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。它提供了一套从数组、数字、对象、字符串、日期等常见数据类型中提取值的函数,以及很多其他实用功能。Lodash 旨在通过提高抽象程度来减少代码量,提高代码的可维护性。

pnpm add lodash
// 如果项目配置了typescript需安装
pnpm add @types/lodash -D

4、big.js(涉及计算相关)

big.js 是一个用于任意精度十进制算术的小型快速 JavaScript 库。 它允许你创建、操作和比较大数字,这些数字的精度超过了 JavaScript 原生 Number 类型所能提供的范围。主要可以用于处理需要高精度计算的场景,例如金额计算、科学计算、密码学等等。

pnpm add big.js
// 如果项目配置了typescript需安装
pnpm add @types/big.js -D

5、js-cookie

是一个简单、轻量级的 JavaScript API 库,用于处理浏览器 cookies。它允许你创建、读取、删除和操作 cookie,而不需要担心浏览器的兼容性问题。

pnpm add js-cookie
// 如果项目配置了typescript需安装
pnpm add @types/js-cookie -D

6、postcss-plugin-px2rem

postcss-plugin-px2rem 是一个 PostCSS 插件,它可以自动 将 CSS 文件中的像素单位(px)转换为相对单位(rem),以实现响应式布局和移动端适配。这个插件特别适用于需要根据不同分辨率的移动设备进行适配的场景。

  • 安装
pnpm add -D postcss-plugin-px2rem autoprefixer
  • 配置vite.config.js
import autoprefixer from 'autoprefixer'
import postcssPluginPx2rem from 'postcss-plugin-px2rem';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
  ...
  ],
  resolve: {
  ...
  },
  css: {
    postcss: {
      plugins: [
        autoprefixer,
        postcssPluginPx2rem({
          remUnit: 108,
          rootValue: 108, // 换算基数,1rem 相当于多少 px
		  unitPrecision: 5, // 允许 REM 单位增长到的十进制数字
		  propWhiteList: [], // 白名单,指定哪些属性不转换为 rem
		  propBlackList: [], // 黑名单,指定哪些属性需要转换为 rem
		  exclude: /(node_module)/, // 排除的文件夹或文件
		  selectorBlackList: [], // 要忽略并保留为 px 的选择器
		  mediaQuery: false, // 允许在媒体查询中转换 px
		  minPixelValue: 3 // 设置要替换的最小像素值
        }),
      ],
    },
  },
});

7、@vitejs/plugin-legacy(兼容旧浏览器,移动端项目重点推荐!!!)

公司合作的一些客户自带的客户端浏览器版本超级无敌老旧(此处内涵某些银行😒),项目发布后由于浏览器过于老旧无法处理新版本的语法产生白屏问题,使用这个插件可以生成兼容旧版浏览器的构建文件解决这个问题(救我狗命!!!)。

@vitejs/plugin-legacy 是一个 Vite 插件,用于为 Vite 项目提供对旧版浏览器的支持。 这个插件可以根据你在项目配置中指定的目标浏览器列表(通过 browserslist 字段),自动生成兼容旧版浏览器的构建文件。这些构建文件将包含经过转换和降级处理的代码,以 确保在不支持最新 JavaScript 特性的浏览器中正常运行。 使用 @vitejs/plugin-legacy 插件后,当用户访问你的网站时,Vite 将根据用户的浏览器版本动态加载适合其浏览器的构建文件。

  • 安装
pnpm add -D @vitejs/plugin-legacy
  • 配置vite.config.js
import legacy from '@vitejs/plugin-legacy';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  	plugins: [
  	  vue(),
	  legacy({
	      targets: ['ie >= 11', 'chrome <= 60'], // 需要兼容的目标列表,可以设置多个
	      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
	      renderLegacyChunks: true,
	      polyfills: [
	        'es.symbol',
	        'es.array.filter',
	        'es.promise',
	        'es.promise.finally',
	        'es/map',
	        'es/set',
	        'es.array.for-each',
	        'es.object.define-properties',
	        'es.object.define-property',
	        'es.object.get-own-property-descriptor',
	        'es.object.get-own-property-descriptors',
	        'es.object.keys',
	        'es.object.to-string',
	        'web.dom-collections.for-each',
	        'esnext.global-this',
	        'esnext.string.match-all',
	      ],
	    }),
   ],
  resolve: {
  ...
  },
});
  • 配置package.json
    在 package.json 文件中的 “browserslist” 字段中指定需要支持的目标浏览器。例如,如果你想要支持最近两个版本的 Chrome 和 Firefox 浏览器,可以将该字段修改为:
"browserslist": [
  "last 2 Chrome versions",
  "last 2 Firefox versions"
]

8、

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ESLint+Prettier的配置

ESLintPrettier的配置 安装插件 ​​​​​​ 在settings.json中写下配置 {// tab自动转换标签"emmet.triggerExpansionOnTab": true,"workbench.colorTheme": "Default Dark","editor.tabSize": 2,"editor.fontSize": …

Cyber Security 101-Web Hacking-JavaScript Essentials(JavaScript 基础)

任务1&#xff1a;介绍 JavaScript &#xff08;JS&#xff09; 是一种流行的脚本语言&#xff0c;它允许 Web 开发人员向包含 HTML 和 CSS&#xff08;样式&#xff09;的网站添加交互式功能。创建 HTML 元素后&#xff0c;您可以通过 JS 添加交互性&#xff0c;例如验证、on…

《机器学习》从入门到实战——逻辑回归

目录 一、简介 二、逻辑回归的原理 1、线性回归部分 2、逻辑函数&#xff08;Sigmoid函数&#xff09; 3、分类决策 4、转换为概率的形式使用似然函数求解 5、对数似然函数 ​编辑 6、转换为梯度下降任务 三、逻辑回归拓展知识 1、数据标准化 &#xff08;1&#xf…

JDK8源码分析Jdk动态代理底层原理

本文侧重分析JDK8中jdk动态代理的源码&#xff0c;若是想看JDK17源码分析可以看我的这一篇文章 JDK17源码分析Jdk动态代理底层原理-CSDN博客 两者之间有着略微的差别&#xff0c;JDK17在JDK8上改进了不少 目录 源码分析 过程 生成的代理类大致结构 本文侧重分析JDK8中jdk…

ZYNQ初识6(zynq_7010)clock时钟IP核

基于板子的PL端无时钟晶振&#xff0c;需要从PS端借用clock1&#xff08;50M&#xff09;晶振 接下去是自定义clock的IP核封装&#xff0c;为后续的simulation可以正常仿真波形&#xff0c;需要注意顶层文件的设置&#xff0c;需要将自定义的IP核对应的.v文件设置为顶层文件&a…

深度学习模型格式转换:pytorch2onnx(包含自定义操作符)

将PyTorch模型转换为ONNX&#xff08;Open Neural Network Exchange&#xff09;格式是实现模型跨平台部署和优化推理性能的一种常见方法。PyTorch 提供了多种方式来完成这一转换&#xff0c;以下是几种主要的方法&#xff1a; 一、静态模型转换 使用 torch.onnx.export() t…

GPU 进阶笔记(一):高性能 GPU 服务器硬件拓扑与集群组网

记录一些平时接触到的 GPU 知识。由于是笔记而非教程&#xff0c;因此内容不求连贯&#xff0c;有基础的同学可作查漏补缺之用 1 术语与基础 1.1 PCIe 交换芯片1.2 NVLink 定义演进&#xff1a;1/2/3/4 代监控1.3 NVSwitch1.4 NVLink Switch1.5 HBM (High Bandwidth Memory) 由…

在Unity中用Ab包加载资源(简单好抄)

第一步创建一个Editor文件夹 第二步编写BuildAb&#xff08;这个脚本一点要放在Editor中因为这是一个编辑器脚本&#xff0c;放在其他地方可能会报错&#xff09; using System.IO; using UnityEditor; using UnityEngine;public class BuildAb : MonoBehaviour {// 在Unity编…

【贪心算法】贪心算法七

贪心算法七 1.整数替换2.俄罗斯套娃信封问题3.可被三整除的最大和4.距离相等的条形码5.重构字符串 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f…

(五)人工智能进阶:基础概念解释

前面我们介绍了人工智能是如何成为一个强大函数。接下来&#xff0c;搞清损失函数、优化方法和正则化等核心概念&#xff0c;才能真正驾驭它&#xff01; 1. 什么是网络模型&#xff1f; 网络模型就像是一个精密的流水线工厂&#xff0c;由多个车间&#xff08;层&#xff0…

SpringMVC(二)原理

目录 一、配置Maven&#xff08;为了提升速度&#xff09; 二、流程&&原理 SpringMVC中心控制器 完整流程&#xff1a; 一、配置Maven&#xff08;为了提升速度&#xff09; 在SpringMVC&#xff08;一&#xff09;配置-CSDN博客的配置中&#xff0c;导入Maven会非…

2、redis的持久化

redis的持久化 在redist当中&#xff0c;高可用的技术包括持久化&#xff0c;主从复制&#xff0c;哨兵模式&#xff0c;集群。 持久化是最简单的高可用的方法&#xff0c;作用就是备份数据。即将数据保存到硬盘&#xff0c;防止进程退出导致数据丢失。 redis持久化方式&…

【算法】模拟退火算法学习记录

写这篇博客的原因是博主本人在看某篇文章的时候&#xff0c;发现自己只是知道SGD这个东西&#xff0c;但是到底是个啥不清楚&#xff0c;所以百度了一下&#xff0c;然后在通过博客学习的时候看到了退火两个字&#xff0c;想到了本科做数模比赛的时候涉猎过&#xff0c;就上bil…

Visual Point Cloud Forecasting enables Scalable Autonomous Driving——点云论文阅读(12)

此内容是论文总结,重点看思路!! 文章概述 这篇文章介绍了一个名为 ViDAR 的视觉点云预测框架,它通过预测历史视觉输入生成未来点云,作为自动驾驶的预训练任务。ViDAR 集成了语义、三维几何和时间动态信息,有效提升了感知、预测和规划等自动驾驶核心任务的性能。实验表明…

AI 将在今年获得“永久记忆”,2028美国会耗尽能源储备

AI的“永久记忆”时代即将来临 谷歌前CEO施密特揭示了AI技术的前景&#xff0c;他相信即将在2025年迎来一场伟大的变化。AI将实现“永久记忆”&#xff0c;改变我们与科技的互动过程。施密特将现有的AI上下文窗口比作人类的短期记忆&#xff0c;难以持久保存信息。他的设想是…

工控主板ESM7000/6800E支持远程桌面控制

英创公司ESM7000 是面向工业领域的双核 Cortex-A7 高性能嵌入式主板&#xff0c;ESM6800E则为单核Cortex-A7 高性价比嵌入式主板&#xff0c;ESM7000、ESM6800E都是公司的成熟产品&#xff0c;已广泛应用于工业很多领域。ESM7000/6800E板卡中Linux系统配置为linux-4.9.11内核、…

越权漏洞简介及靶场演示

越权漏洞简介及靶场演示 文章目录 一、什么是越权&#xff1f; &#xff08;一&#xff09;越权漏洞的概念&#xff08;二&#xff09;越权漏洞的分类&#xff08;三&#xff09;常见越权方法&#xff08;四&#xff09;未授权访问 二、越权漏洞测试过程 &#xff08;一&…

VIT:视觉transformer|学习微调记录

一、了解VIT结构 vit提出了对于图片完全采用transformer结构而不是CNN的方法&#xff0c;通过将图片分为patch&#xff0c;再将patch展开输入编码器&#xff08;grid_size网格大小&#xff09;&#xff0c;最后用MLP将输出转化为对应类预测。 详细信息可以看下面这个分享&…

coredns报错plugin/forward: no nameservers found

coredns报错plugin/forward: no nameservers found并且pod无法启动 出现该报错原因 是coredns获取不到宿主机配置的dns地址 查看宿主机是否有dns地址 resolvectl status 我这里是配置正确后&#xff0c;如果没配置过以下是不会显示出dns地址的 给宿主机增加静态dns地址之后将…

使用Diffusion Models进行图像超分辩重建

Diffusion Models专栏文章汇总:入门与实战 前言:图像超分辨率重建是一个经典CV任务,其实LR(低分辨率)和 HR(高分辨率)图像仅在高频细节上存在差异。通过添加适当的噪声,LR 图像将变得与其 HR 对应图像无法区分。这篇博客介绍一种方式巧妙利用这个规律使用Diffusion Mod…