当前位置： 首页 > news >正文

从零搭建一个Vue3 + Typescript的脚手架——day1

news 2025/6/8 20:31:54

1.开发环境搭建

(1).配置vite

vite简介
Vite 是一个由尤雨溪开发的现代化前端构建工具，它利用了浏览器对 ES 模块的原生支持，极大地提升了开发服务器的启动速度和热更新效率。Vite 不仅适用于 Vue.js，还支持 React、Svelte 等多种框架，通过其丰富的插件系统和优化的性能，为开发者提供了更加流畅和高效的前端开发体验。
安装配置

  • 首先使用pnpm安装vite
pnpm add vite -D
  • 然后在根目录下创建一个index.html 文件，将基础内容写入：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="/favicon.ico" /><title>项目标题</title>
</head>
<body><div id="app"></div>
</body>
</html>
  • 在package.json中添加启动命令
"scripts": {"dev": "vite","build": "vite build","serve": "vite preview"},
  • 在根目录下创建一个.npmrc文件，将基础内容写入：
# 通过该配置兜底解决组件没有类型提示的问题
shamefully-hoist = true

(2).配置typescript

typescript简介
TypeScript 是 JavaScript 的一个超集，它为 JavaScript 添加了类型系统，使得代码更加健壮和可维护。TypeScript 的类型系统可以帮助开发者提前发现潜在的错误，并提供更好的代码补全和重构支持。同时，TypeScript 还支持最新的 ECMAScript 特性，使得开发者可以更方便地使用最新的 JavaScript 语法和特性。
安装配置

  • 使用pnpm安装typescript
pnpm add typescript -D
  • 在根目录下创建一个tsconfig.json文件，将基础内容写入：
{"compilerOptions": {"target": "esnext", // 指定 ECMAScript 目标版本"useDefineForClassFields": true, // 启用 ECMAScript 类字段定义"module": "esnext", // 指定模块代码生成"moduleResolution": "node", // 指定模块解析策略"strict": true, // 启用所有严格类型检查选项"jsx": "preserve", // 指定 JSX 代码生成"sourceMap": true, // 生成相应的 .map 文件"resolveJsonModule": true, // 允许导入 JSON 文件"esModuleInterop": true, // 启用对 CommonJS 和 ES 模块的默认导入支持"lib": ["esnext", "dom"] // 指定要包含在编译中的库文件},// 指定要包含在编译中的文件或文件夹"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],// 指定要排除在编译中的文件或文件夹"exclude": ["node_modules", "dist"]}

(3).配置Vue

Vue
Vue 是一个用于构建用户界面的渐进式 JavaScript 框架。它被设计为可以逐步采用，从简单的表单控件到复杂的单页应用程序。Vue 的核心库只关注视图层，易于上手，同时也可以与其他库或现有项目无缝集成。Vue 的响应式系统和组件化架构使得开发大型应用变得更加简单和高效。
安装配置

  • 使用pnpm安装vue
pnpm add vue@latest // 安装最新版本
  • 安装vite的vue插件
pnpm add @vitejs/plugin-vue -D
  • 在根目录下创建一个vite.config.ts文件，将基础内容写入：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()], // 使用vue插件
})
  • 编写veu入口文件,在根目录下创建一个src/main.ts文件，将基础内容写入：
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App) // 创建vue实例
app.mount('#app') // 挂载到页面——这里的#app是index.html中id为app的div(在创建根目录下的index.html时已经提前创建了)
  • 在根目录下创建一个src/App.vue文件，将基础内容写入：
<template><div><h1>hello world</h1></div>
</template><script lang="ts" setup>
</script>
  • 最后在index.html中引入main.ts文件
<script type="module" src="/src/main.ts"></script>

配置好之后，执行pnpm run dev，即可启动项目

(4).配置Eslint

Eslint简介
ESLint 是一个用于识别和报告 JavaScript（以及 JSX、TSX 等）代码中的模式的工具，它可以帮助开发者发现代码中的问题，并按照一定的规则进行代码格式化和风格检查。ESLint 的配置文件通常是一个 .eslintrc 文件，其中可以定义一系列的规则和配置选项。通过 ESLint，开发者可以确保代码的一致性和可读性，同时也可以避免一些常见的错误和问题。
安装配置

  • 使用npx eslint --init命令初始化eslint
npx eslint --init
  • 选择使用typescript和vue
? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? ES modules (import/export)
? Which framework does your project use? Vue
? Does your project use TypeScript? Yes
? Where does your code run? Browser
? How would you like to define a style for your project? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? JavaScript
  • 执行完命令后会在根目录生成一个eslint.config.js文件，并且会将基础内容写入。然后我们写入一些自定义的规则
import globals from "globals";
import pluginJs from "@eslint/js";
import { recommended as tseslintRecommended } from "@typescript-eslint/eslint-plugin";
import { recommended as pluginVueRecommended } from "eslint-plugin-vue";
import { recommended as prettierRecommended } from "eslint-plugin-prettier";/** @type {import('eslint').Linter.Config[]} */
export default [{files: ["**/*.{js,mjs,cjs,ts,vue}"],languageOptions: {globals: { ...globals.browser, ...globals.node },},},pluginJs.configs.recommended,tseslintRecommended,pluginVueRecommended,{files: ["**/*.vue"],languageOptions: {parserOptions: {parser: "@typescript-eslint/parser",ecmaVersion: 2020,sourceType: "module",jsxPragma: "React",ecmaFeatures: {jsx: true,tsx: true,},},},extends: ["plugin:vue/vue3-essential","@vue/typescript/recommended","@vue/prettier","plugin:prettier/recommended",],rules: {// Vue 规则"vue/no-v-html": "off","vue/require-default-prop": "off","vue/require-explicit-emits": "off","vue/html-self-closing": ["error",{html: {void: "always",normal: "always",component: "always",},svg: "always",math: "always",},],},},
];
  • 在根目录下创建一个.eslintignore文件，将基础内容写入：
# Eslint 会忽略的文件
.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc

(5).配置Vue-Router

Vue Router简介
Vue Router 是 Vue.js 官方的路由管理器。它可以帮助开发者构建单页面应用程序（SPA），通过定义路由和组件之间的映射关系，实现页面之间的导航和切换。Vue Router 提供了丰富的功能和配置选项，包括动态路由、嵌套路由、路由守卫、路由懒加载等。通过 Vue Router，开发者可以轻松地实现页面之间的导航和切换，提高用户体验。
安装配置

  • 使用pnpm安装vue-router
pnpm add vue-router@next -D
  • 在src目录下先创建一个views文件夹，然后在views文件夹下创建一个Home.vue文件，将基础内容写入：
<template><div><h1>Home</h1></div>
</template><script lang="ts">
import { defineComponent } from 'vue'export default defineComponent({name: 'Home',
})
</script>
  • 在src目录下创建一个router文件夹，然后在router文件夹下创建一个index.ts文件，将基础内容写入：
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'// 定义路由
const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: Home}
]// 创建路由实例
const router = createRouter({//  import.meta.env.BASE_URL 是 vite 提供的环境变量，表示项目的根路径history: createWebHistory(import.meta.env.BASE_URL), routes
})export default router
  • 在src/main.ts文件中引入router
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router) // 使用路由
app.mount('#app')

(6).配置环境变量

为什么要区分环境变量
在开发过程中，我们通常需要根据不同的环境（如开发环境、测试环境、生产环境）来配置不同的变量，以便于我们更好地管理和维护项目。例如，我们可能需要在开发环境中使用本地服务器，而在生产环境中使用远程服务器。或者，我们可能需要在开发环境中使用调试模式，而在生产环境中使用发布模式。通过区分环境变量，我们可以轻松地切换不同的配置，而不需要修改代码。

  • 开发环境：为开发人员提供一个安全的地方来进行编码和调试，不会影响到其他环境，一般来说开发人员在本地机器上运行和测试应用程序。
  • 测试环境：为测试人员提供一个模拟生产环境的地方来进行测试，以确保应用程序在发布到生产环境之前是稳定的。
  • 生产环境：为最终用户提供一个稳定、可靠、安全的地方来访问应用程序。
    配置环境变量
    vite已经为我们封装了环境变量，我们只需要在根目录下创建一个.env文件，然后将环境变量写入即可。
    注意： 只有以 VITE_ 开头的变量才会被 Vite 特殊处理。
# .env —— 所有环境都会加载
VITE_APP_TITLE= "My App"
# .env.development —— 只在开发环境加载
VITE_BASE_URL = "http://localhost:3000"
# .env.production —— 只在生产环境加载
VITE_BASE_URL= "http://localhost:3001"
# .env.test —— 只在测试环境加载
VITE_BASE_URL= "http://localhost:3002"

在项目的js文件中我们可以通过import.meta.env来访问这些环境变量。该操作是安全的，不会在构建时暴露环境变量。

console.log(import.meta.env.VITE_APP_TITLE) // My App (development)

这样就在项目中配置好了环境变量。
存在问题：
因为我们使用了ts作为开发语言，所以当我们在ts文件中访问环境变量时，会出现类型报错，类型报错详情为：类型ImportMeta上不存在env。
这是由于vite自动导入了import.meta，而ts类型检查不知道vite已经做过处理，因此我们需要进一步在tsconfig.ts文件中配置对应的类型声明。
这里主要有两种配置方式：

  1. 直接配置vite提供的类型声明文件（这种方式配置之后我们在 .env文件中写入的内容我们无法使用ts提示）
{"compilerOptions": {"types": ["vite/client"]}
}
  1. 自定义环境变量文件的类型声明（这种方式配置之后我们在 .env文件中写入的内容我们可以使用ts提示）
    这种配置方式需要在根目录下创建一个env.d.ts文件，然后在文件中写入以下内容：
/// <reference types="vite/client" />interface ImportMetaEnv {readonly VITE_APP_NAME: string;readonly VITE_BASE_URL: string;
}interface ImportMeta {readonly env: ImportMetaEnv;
}

这样配置我们在写代码时就会有类型提示了。

(7).封装Axios / fetch

Axios简介
Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它支持请求和响应拦截器、自动转换 JSON 数据、取消请求等功能。Axios 是一个开源项目，它有丰富的文档和示例，可以帮助开发者快速上手。
Fetch简介
Fetch 是一种现代的浏览器 API，用于发送 HTTP 请求和接收 HTTP 响应。Fetch 是基于 Promise 的，因此它可以很容易地与 async/await 一起使用。Fetch 是一种非常灵活的 API，它支持各种 HTTP 方法、请求头、请求体等。Fetch 是一种非常流行的 API，它被广泛应用于 Web 开发中。
Axios和Fetch的区别
Axios 和 Fetch 都是用于发送 HTTP 请求的库，它们有一些共同的特点，但也存在一些区别。

  • Axios 是一个基于 Promise 的 HTTP 客户端，而 Fetch 是一种现代的浏览器 API。因此，Axios 可以很容易地与 async/await 一起使用，而 Fetch 也可以很容易地与 async/await 一起使用。
  • Axios 支持请求和响应拦截器、自动转换 JSON 数据、取消请求等功能，而 Fetch 不支持这些功能。因此，如果需要这些功能，可以使用 Axios。
    1.axios配置
  • 安装axios
pnpm install axios
  • 封装axios
    我们使用axios发送请求时需要进一步对其惊醒一定程度的封装，以便于我们更好地管理和维护项目。这里我们主要封装了以下内容：
  1. 请求拦截器：在请求发送之前，我们可以对请求进行一些处理，例如添加请求头、添加请求参数等。
  2. 响应拦截器：在请求返回之后，我们可以对响应进行一些处理，例如处理错误、处理数据等。
  3. 统一配置基地址，超时时间等
  4. 统一处理错误

首先我们在src目录下创建一个utils文件夹，用于存放一些工具与函数，然后在utils文件夹下创建一个axiosRequest.ts文件，将基础内容写入：

import axios from "axios"
import router from "@/router"// 读取当前环境的基地址
const BASE_URL = import.meta.env.VITE_BASE_URLconst request = axios.create({baseURL: "/api",timeout: 5000 // 超时时间
})// 添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么// 一般会在这里添加tokenreturn config},function (error) {// 对请求错误做些什么return Promise.reject(error)}
)// 添加响应拦截器
request.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 提取token// 一般会在这里保存token// 对响应数据做点什么return response.data},function (error) {// 超出 2xx 范围的状态码都会触发该函数// token过期if (error.response.status === 401) {// 登录状态已过期，请重新登录//  这里需要清除tokenreturn router.push("/login")}if (error.response.status === 400) {//  请求参数错误} else {// 其他错误}// 对响应错误做点什么console.log(error)return Promise.reject(error)}
)export default request

在外部使用时只需要引入request.ts文件即可。
2. fetch配置
我们同样在utils文件夹下创建一个fetchRequest.ts文件，将基础内容写入：

// 创建FetchService类
export class FetchService {private baseUrl: string;constructor(baseUrl: string) {this.baseUrl = baseUrl;}// 定义get方法async get<T>(url: string): Promise<T> {const response = await fetch(this.baseUrl + url);if (!response.ok) {throw new Error(response.statusText);}const data: T = await response.json();return data;}// 定义post方法async post<T>(url: string, body: any): Promise<T> {const response = await fetch(this.baseUrl + url, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(body)});if (!response.ok) {throw new Error(response.statusText);}const data: T = await response.json();return data;}// 定义put方法async put<T>(url: string, body: any): Promise<T> {const response = await fetch(this.baseUrl + url, {method: 'PUT',headers: {'Content-Type': 'application/json'},body: JSON.stringify(body)});if (!response.ok) {throw new Error(response.statusText);}const data: T = await response.json();return data;}// 定义delete方法async delete<T>(url: string): Promise<T> {const response = await fetch(this.baseUrl + url, {method: 'DELETE'});if (!response.ok) {throw new Error(response.statusText);}const data: T = await response.json();return data;}}export default new FetchService(import.meta.env.VITE_BASE_URL);

在外部使用时只需要引入fetchRequest.ts文件即可。

相关文章：

从零搭建一个Vue3 + Typescript的脚手架——day1

1.开发环境搭建 (1).配置vite vite简介 Vite 是一个由尤雨溪开发的现代化前端构建工具&#xff0c;它利用了浏览器对 ES 模块的原生支持&#xff0c;极大地提升了开发服务器的启动速度和热更新效率。Vite 不仅适用于 Vue.js&#xff0c;还支持 React、Svelte 等多种框架&…...

编程日记 2025/1/15 23:13:01

Pgsql存储占用分析

基础命令 -- 查询表大小 SELECT pg_total_relation_size(table_name);-- 查询表大小&#xff08;不带索引&#xff09; SELECT pg_table_size(table_name);-- 查询表索引大小 SELECT pg_indexes_size(table_name);-- 查询表具体大小 SELECT pg_relation_size(table_name); SEL…...

编程日记 2025/1/15 23:11:57

51c自动驾驶~合集46

我自己的原文哦~ https://blog.51cto.com/whaosoft/13050104 #世界模型会是L3自动驾驶的唯一解吗 三维空间占有率&#xff08;3D Occupancy&#xff09;预测的目的是预测三维空间中的每个体素是否被占有&#xff0c;如果被占有&#xff0c;则对应的体素将被标记。3D Semant…...

编程日记 2025/1/15 23:06:46

Elasticsearch：使用全文搜索在 ES|QL 中进行过滤 - 8.17

8.17 在 ES|QL 中引入了 match 和 qstr 函数&#xff0c;可用于执行全文过滤。本文介绍了它们的作用、使用方法、与现有文本过滤方法的区别、当前的限制以及未来的改进。 ES|QL 现在包含全文函数&#xff0c;可用于使用文本查询过滤数据。我们将回顾可用的文本过滤方法&#xf…...

编程日记 2025/1/15 22:58:36

《自动驾驶与机器人中的SLAM技术》ch8：基于 IESKF 的紧耦合 LIO 系统

目录 基于 IESKF 的紧耦合 LIO 系统 1 IESKF 的状态变量和运动过程 1.1 对名义状态变量的预测 1.2 对误差状态变量的预测及对协方差矩阵的递推 2 观测方程中的迭代过程 3 高维观测中的等效处理 4 NDT 和 卡尔曼滤波的联系 5 紧耦合 LIO 系统的主要流程 5.1 IMU 静止初始化 …...

编程日记 2025/1/15 22:56:34

引领图像编辑领域的新潮流！Edicho：实现跨图像一致编辑的新方法(港科蚂蚁)

在图像处理领域&#xff0c;如何实现跨图像的一致编辑一直是技术挑战。传统方法往往局限于单张图像的编辑&#xff0c;难以保证多张图像间编辑效果的一致性。香港科技大学、蚂蚁集团、斯坦福大学和香港中文大学联合提出Edicho&#xff0c;这一难题迎来了全新的解决方案。 总结如…...

编程日记 2025/1/15 22:49:27

459. 重复的子字符串【力扣】——kmp拼接字符串解法

常规kmp解答 class Solution { public:void getNext(int *next,string s){int j0;next[0]0;for(int i1;i<s.size();i){while(j>0 && s[i]!s[j]){jnext[j-1];}if(s[i]s[j]) j;next[i]j;}}bool repeatedSubstringPattern(string s) {if(s.size()0) return false;i…...

编程日记 2025/1/15 22:47:23

fpga 的时钟管理模块pll 跟 dcm

FPGA&#xff08;Field-Programmable Gate Array&#xff0c;现场可编程门阵列&#xff09;中的时钟管理模块&#xff08;Clock Management Module, CMM&#xff09;是用于生成和管理内部时钟信号的关键组件。两个常见的CMM类型是PLL&#xff08;Phase-Locked Loop&#xff0c;…...

编程日记 2025/1/15 22:46:21

USB 驱动开发 --- Gadget 驱动框架梳理(一)

本文由 Linux 内核文档翻译与总结而来&#xff0c;个人学习笔记仅供参考。 Gadget 框架 在 USB 协议交互过程中&#xff0c;角色定义&#xff1a; the device driver is the master (or “client driver”) Linux 内核中称为 HCD(Host Controller Driver)&#xff0c;负责与 …...

编程日记 2025/1/15 22:43:18

1Hive概览

1Hive概览 1hive简介2hive架构3hive与Hadoop的关系4hive与传统数据库对比5hive的数据存储 1hive简介 Hive是基于Hadoop的一个数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张数据库表&#xff0c;并提供类SQL查询功能。 其本质是将SQL转换为MapReduce/Spark的任务进…...

编程日记 2025/1/15 22:42:17

【Web安全】SQL 注入攻击技巧详解：UNION 注入（UNION SQL Injection）

【Web安全】SQL 注入攻击技巧详解&#xff1a;UNION 注入&#xff08;UNION SQL Injection&#xff09; 引言 UNION注入是一种利用SQL的UNION操作符进行注入攻击的技术。攻击者通过合并两个或多个SELECT语句的结果集&#xff0c;可以获取数据库中未授权的数据。这种注入技术要…...

编程日记 2025/1/15 22:39:13

IoTDB 常见问题 QA 第三期

关于 IoTDB 的 Q & A IoTDB Q&A 第三期持续更新&#xff01;我们将定期汇总我们将定期汇总社区讨论频繁的问题&#xff0c;并展开进行详细回答&#xff0c;通过积累常见问题“小百科”&#xff0c;方便大家使用 IoTDB。 Q1&#xff1a;查询最新值 & null 数据相加方…...

编程日记 2025/1/15 22:38:11

RabbitMQ---消息确认和持久化

&#xff08;一&#xff09;消息确认 1.概念 生产者发送消息后&#xff0c;到达消费端会有以下情况&#xff1a; 1.消息处理成功 2.消息处理异常 如果RabbitMQ把消息发送给消费者后就把消息删除&#xff0c;那么就可能会导致&#xff0c;消息处理异常想要再获取这条消息的时…...

编程日记 2025/1/15 22:35:07

《鸿蒙Next旅游应用：人工智能赋能个性化与智能导览新体验》

随着鸿蒙Next的推出&#xff0c;旅游应用迎来了全新的发展机遇&#xff0c;借助人工智能技术能为用户带来更出色的个性化推荐和智能导览服务。 鸿蒙Next与人工智能融合优势 鸿蒙Next拥有强大的分布式能力和原生智能体验。其能打破设备界限&#xff0c;实现多设备协同&#xf…...

编程日记 2025/1/15 22:33:04

微信小程序获取当前页面路径，登录成功后重定向回原页面

&#x1f935; 作者&#xff1a;coderYYY &#x1f9d1; 个人简介&#xff1a;前端程序媛&#xff0c;目前主攻web前端&#xff0c;后端辅助&#xff0c;其他技术知识也会偶尔分享&#x1f340;欢迎和我一起交流&#xff01;&#x1f680;&#xff08;评论和私信一般会回&#…...

编程日记 2025/1/15 22:32:03

【9.2】Golang后端开发系列--Gin路由定义与实战使用

文章目录 一、Gin 框架路由的基本定义方式1. 简单路由创建2. 路由参数3. 查询参数 二、商业大项目中的路由定义和服务调用1. 路由模块化2. 路由组和中间件3. 中间件的使用4. 服务层调用5. 错误处理6. 版本控制7. 路由注册 一、Gin 框架路由的基本定义方式 1. 简单路由创建 使…...

编程日记 2025/1/15 22:29:59

【微信小程序】let和const-综合实训

let 和 const 都是用于声明变量的关键字&#xff0c;它们与传统的 var 关键字相比&#xff0c;有很多不同之处。 let 声明块级作用域变量&#xff0c;可再赋值&#xff1b;const 声明块级作用域常量&#xff0c;不可再赋值。 以下是它们的详细介绍&#xff1a; 一、基本概念…...

编程日记 2025/1/15 22:28:56

图匹配算法（涵盖近似图匹配）

【图数据管理与挖掘-第四讲&#xff08;子&#xff09;图匹配算法&#xff08;涵盖近似图匹配&#xff09; 北京大学2021暑期-邹磊教授】https://www.bilibili.com/video/BV1zh411q7PW?vd_source7c2b5de7032bf3907543a7675013ce3a 图同构&#xff1a; 定义&#xff1a; 给定…...

编程日记 2025/1/15 22:23:48

java线程——Thread

java线程——Thread 基本步骤示例优劣总结 继承Thread类是Java中实现多线程的一种方式。使用时创建一个新的类&#xff0c;该类继承自java.lang.Thread&#xff0c;并重写其run()方法&#xff0c;在方法中定义线程执行的任务逻辑。 基本步骤 1、创建一个子类&#xff1a;定义一…...

编程日记 2025/1/15 22:21:40

MySQL8.0新特性

第十八章_MySQL8.0新特性 1.新特性概述 1. 数据库管理和存储 1.1 数据字典 特性: MySQL 8.0 使用统一的数据字典存储元数据&#xff08;如表、列、索引等&#xff09;&#xff0c;并将其存储在 InnoDB 表中。 优点 : 提升性能&#xff1a;减少对文件系统的依赖。 提高一致…...

编程日记 2025/1/15 22:19:36

CICD实战（二）-----gitlab的安装与配置

1、安装gitlab所需要的依赖包与工具 sudo yum install wget net-tools sudo yum install curl policycoreutils openssh-server openssh-clients postfix -y 2、配置清华源 vim /etc/yum.repo.d/gitlab-ce.repo[gitlab-ce] namegitlab-ce baseurlhttp://mirrors.tuna.tsin…...

编程新知 2025/6/8 16:26:38

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析LLP (二）

低层协议&#xff08;Low Level Protocol, LLP&#xff09;详细解析 1. 低层协议&#xff08;Low Level Protocol, LLP&#xff09;核心特性 包基础 &#xff1a;基于字节的包协议&#xff0c;支持 短包 &#xff08;32位&#xff09;和 长包 &#xff08;可变长度&#xff0…...

编程新知 2025/6/8 16:23:00

统信桌面专业版如何使用python开发平台jupyter

哈喽呀&#xff0c;小伙伴们 最近有学员想了解在统信UOS桌面专业版系统上开发python程序&#xff0c;Anaconda作为python开发平台,anaconda提供图形开发平台,提供大量的开发插件和管理各种插件的平台&#xff0c;但是存在版权问题&#xff0c;有没有其他工具可以替代Anaconda呢…...

编程新知 2025/6/8 16:12:54

使用柏林噪声生成随机地图

简单介绍柏林噪声 柏林噪声&#xff08;Perlin Noise&#xff09;是一种由 Ken Perlin 在1983年提出的梯度噪声&#xff08;Gradient Noise&#xff09;算法&#xff0c;用于生成自然、连续的随机值。它被广泛用于计算机图形学中模拟自然现象&#xff08;如地形、云层、火焰等…...

编程新知 2025/6/8 14:36:15

ideal2022.3.1版本编译项目报java: OutOfMemoryError: insufficient memory

最近换了新电脑&#xff0c;用新电脑拉项目配置后&#xff0c;启动时报错&#xff0c;错误描述 idea 启动Springboot项目在编译阶段报错&#xff1a;java: OutOfMemoryError: insufficient memory 2. 处理方案 修改VM参数&#xff0c;分配更多内存 ❌ 刚刚开始以为时JVM内存设置…...

编程新知 2025/6/8 13:06:56

Vue3 GSAP动画库绑定滚动条视差效果 绑定滚动条 滚动条动画 时间轴

介绍 GSAP 用于创建高性能、可控制的动画效果。由 GreenSock 团队开发&#xff0c;旨在提供流畅、快速、稳定的动画效果&#xff0c;并且兼容各种浏览器。 提供了多个插件&#xff0c;扩展了动画的功能&#xff0c;如 ScrollTrigger&#xff08;滚动触发动画&#xff09;、Dra…...

编程新知 2025/6/8 12:45:18

Python Cookbook-7.12 在 SQLite 中储存 BLOB

任务 想将 BLOB 存入一个 SQLite 数据库, 解决方案 Python的 PySQLite 扩展提供了 sqlite.encode 函数,它可帮助你在 SOLite 数据库中插入二进制串。可以基于这个函数编写一个小巧的适配器类: import sqlite,cPickle class Blob(object):自动转换二进制串def __init__(self…...

编程新知 2025/6/8 11:39:25

杭州瑞盟 MS35774/MS35774A 低噪声256细分微步进电机驱动，用于空调风门电机驱动，香薰电机驱动

杭州瑞盟 MS35774/MS35774A 低噪声256细分微步进电机驱动&#xff0c;用于空调风门电机驱动&#xff0c;香薰电机驱动 简述 MS35774/MS35774A 是一款高精度、低噪声的两相步进 电机驱动芯片&#xff0c;芯片内置功率 MOSFET &#xff0c;长时间工作的平均电 流可以达到 1…...

编程新知 2025/6/8 10:45:02

springboot的test模块使用Autowired注入失败

springboot的test模块使用Autowired注入失败的原因&#xff1a; 注入失败的原因可能是用了junit4的包的Test注解 import org.junit.Test;解决方法&#xff1a;再加上RunWith(SpringRunner.class)注解即可 或者把Test由junit4改成junit5的注解&#xff0c;就不用加上RunWith&…...

编程新知 2025/6/8 10:36:34

Android USB 通信开发

Android USB 通信开发主要涉及两种模式&#xff1a;主机模式(Host Mode)和配件模式(Accessory Mode)。以下是开发USB通信应用的关键知识点和步骤。 1. 基本概念 主机模式(Host Mode) Android设备作为USB主机&#xff0c;控制连接的USB设备 需要设备支持USB主机功能(通常需要O…...

编程新知 2025/6/8 9:06:32