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

Vue3+ Vite + Element-Plus + TypeScript 从0到1搭建

一环境准备

二vite 项目初始化

按照 🍃Vite 官方文档 - 搭建第一个 Vite 项目 说明,执行以下命令完成 vue 、typescirpt 模板项目的初始化

 npm init vite@latest vue3-element-admin --template vue-ts
  • vue3-element-admin: 自定义的项目名称

  • vue-ts : vue + typescript 模板的标识,查看 create-vite 以获取每个模板的更多细节:vue,vue-ts,react,react-ts

初始化完成项目位于 D:\project\demo\vue3-element-admin , 使用 VSCode 导入,执行以下命令启动:

npm install
npm run dev

浏览器访问 localhost:5173 预览

三 src 路径别名配置

相对路径别名配置,使用 @ 代替 src

npm install @types/node --save-dev
import { fileURLToPath, URL } from "node:url" resolve: {alias: {"@": fileURLToPath(new URL("./src", import.meta.url))}},

 路径别名使用

// src/App.vue
import HelloWorld from '/src/components/HelloWorld.vue'↓
import HelloWorld from '@/components/HelloWorld.vue'

四unplugin 自动导入

Element Plus 官方文档中推荐 按需自动导入 的方式,而此需要使用额外的插件 unplugin-auto-importunplugin-vue-components 来导入要使用的组件。所以在整合 Element Plus 之前先了解下自动导入的概念和作用

 

安装插件依赖

npm install -D unplugin-auto-import unplugin-vue-components 

vite.config.ts - 自动导入配置

import Components from "unplugin-vue-components/vite"; // 自动导入 Vue 组件
import AutoImport from "unplugin-auto-import/vite"; // 自动导入 Vue 相关 API// 自动导入组件(如 Element Plus 组件)Components({// 默认只针对src/components目录实现自动导入dirs: ["src/components", "src/layout"], // 后面布局组件也有相关的组件期望自动导入dts: "./components.d.ts",}),// 自动导入常用的 Vue API,比如 'ref' 和 'vue-router'AutoImport({imports: ["vue", "vue-router"], // 自动导入 Vue 和 Vue Router 的 APIdts: "./auto-imports.d.ts", // 生成的 TypeScript 声明文件路径 // 生成的全局变量放到此目录下eslintrc: {enabled: true, // 启用 ESLint 配置生成filepath: "./.eslintrc-auto-import.json" // 生成的 ESLint 配置文件路径}}),

自动导入效果

运行项目 npm run dev 自动生成文件

使用: 不用导入也可以 

五、整合 Element Plus 

5.1安装

npm install element-plus --save

5.2按需导入(自动导入)

npm install -D unplugin-vue-components unplugin-auto-import

5.3vite.config.ts

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

5.4 使用

5.5自动引入element-plus的样式 (不需要了!!)

在编写我们组件库的组件时,需要使用按需加载的方式引入element-plus组件,如:

<template><el-input  />
</template>
<script setup lang="ts">
import { ElInput } from 'element-plus'
import 'element-plus/theme-chalk/src/base.scss'
import 'element-plus/theme-chalk/src/input.scss'
</script>

可以看到我们不仅要引入组件,还需要引入基础样式和组件样式,这个需要的element-plus组件变多的话,非常麻烦。

我们需要使用unplugin-element-plus帮助我们自动引入样式

安装unplugin-element-plus 到组件库的包下

pnpm i unplugin-element-plus -D 

vite配置文件里添加下面配置

// /packages/components/vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig(() => {return {plugins: [// ...ElementPlus({// 导入scss而不是cssuseSource: true}),]}
})

配置好后,编写组件时只用向下面这样就行

<template><el-input  />
</template>
<script setup lang="ts">
import { ElInput } from 'element-plus'
</script>

六 使用element-plus 的图标

npm install @element-plus/icons-vue

使用

 <el-input:prefix-icon="Search"style="width: 240px"placeholder="Please input"/><script setup lang="ts">
import { Search } from "@element-plus/icons-vue";
</script>

七整合 SVG 图标

安装

npm install vite-plugin-svg-icons --save
npm install fast-glob --save

在vite.config.js配置

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";  // svgIconcreateSvgIconsPlugin({// Specify the icon folder to be cachediconDirs: [path.resolve(process.cwd(), "src/assets/svg")],// Specify symbolId formatsymbolId: "icon-[dir]-[name]",}),

定义一个svgicon组件

<template><svg aria-hidden="true" class="svg-icon"><use :xlink:href="symbolId" :fill="color" /></svg>
</template><script setup lang="ts">
import { computed } from "vue"
const props = defineProps({prefix: {type: String,default: "icon"},iconClass: {type: String,required: false,default: ""},color: {type: String,default: ""}
})const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script><style scoped>
.svg-icon {display: inline-block;width: 1em;height: 1em;overflow: hidden;vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致,而span等标签的下边缘会和字体的基线对齐,故需设置一个往下的偏移比例,来纠正视觉上的未对齐效果 */outline: none;fill: currentcolor; /* 定义元素的颜色,currentColor是一个变量,这个变量的值就表示当前元素的color值,如果当前元素未设置color值,则从父元素继承 */
}
</style>

在main.js中

import "virtual:svg-icons-register"

使用

 <svg-icon icon-class="anchorsNavigation" />

如果想要修改svg图片颜色,需要修改svg图片里面的fill属性改为currentColor,如下:

八整合 SCSS

安装

npm i -D sass 

创建 themeVar.scss 变量文件,添加变量 $bg-color 定义,注意规范变量以 $ 开头

// src/styles/themeVar.scss
$bg-color:#242424;

Vite 配置导入 SCSS 全局变量文件

// vite.config.tscss: {preprocessorOptions: {scss: {// 按需导入自定义主题additionalData: `@use "@/styles/themeVar.scss" as *;`,},},},

上面导入的 SCSS 全局变量在 TypeScript 不生效的,需要创建一个以 .module.scss 结尾的文件

// src/styles/variables.module.scss// 导出 themeVar.scss 文件的变量
:export{bgColor:$bg-color
}

TypeScript 使用 SCSS 全局变量

<!-- src/components/HelloWorld.vue -->
<script setup lang="ts">import variables from "@/styles/variables.module.scss";console.log(variables.bgColor)  
</script><template><div style="width:100px;height:100px" :style="{ 'background-color': variables.bgColor }" />
</template>

九Element Plus 主题

/* 自定义 element-plus 主题 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('white': #ffffff,'black': #000000,'primary': ('base': #2394FF,),'success': ('base': #3abb5f,),'warning': ('base': #f59a23,),'danger': ('base': #f56c6c,),'error': ('base': #ec4c40,),'info': ('base': #909399,),),$table: ('header-bg-color': #F2F3F5,'header-text-color': #1D2129,'text-color': #303133,'row-hover-bg-color': #fff,)
);/** 全局SCSS变量 */:root {--menu-background: linear-gradient(180deg, #1f2935 0%, #425365 100%);--menu-text: #fff;--menu-active-text: #fff;--menu-hover: #161d26;// 修复表格 fixed 列被选中后由于透明色导致叠字的 bug.el-table {--el-table-current-row-bg-color: rgb(235 243 250);};
}$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色
$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
$menu-hover: var(--menu-hover); // 菜单悬停背景色$sidebar-width: 256px; // 侧边栏宽度
$sidebar-width-collapsed: 64px; // 侧边栏收缩宽度
$navbar-height: 64px; // 导航栏高度

2.在vite.config.js配置中导入scss文件类型

plugins: [vue(),viteMockServe({mockPath: "mock",localEnabled: true,}),// element-plus配置AutoImport({resolvers: [ElementPlusResolver()],}),Components({// 1.在element-plus配置中导入sass文件类型resolvers: [ElementPlusResolver({ importStyle: "sass" })],}),]

查看:

primary type类型成功从蓝色替换成黄色了

十vue3+ts+vite解决低版本火狐报错空白屏

下载依赖

npm install @vitejs/plugin-legacy

2、在vite.config.ts中引入

import legacy from '@vitejs/plugin-legacy'plugins: [ // 提供对旧版浏览器的支持,将现代 JavaScript 编译为旧版浏览器兼容的代码legacy({targets: ["defaults", "not IE 11"], // 目标是现代浏览器,排除 IE 11}),
]

十一Vite:性能优化-gzip压缩

https://juejin.cn/post/7473152293983453203

 plugins: [  
// 为生产环境的构建启用 gzip 压缩,减小文件体积viteCompression({threshold: 100000, // 文件大于 100Kb 开启压缩algorithm: "gzip", // 使用 gzip 算法进行压缩ext: ".gz" // 压缩后的文件扩展名}),
]

十二 环境变量

 

相关文章:

Vue3+ Vite + Element-Plus + TypeScript 从0到1搭建

一环境准备 二vite 项目初始化 按照 &#x1f343;Vite 官方文档 - 搭建第一个 Vite 项目 说明&#xff0c;执行以下命令完成 vue 、typescirpt 模板项目的初始化 npm init vitelatest vue3-element-admin --template vue-tsvue3-element-admin: 自定义的项目名称 vue-ts &am…...

如何对 Redis 进行水平扩展和垂直扩展以应对微服务流量的增长?

核心概念&#xff1a; 垂直扩展 (Scale Up): 提升单个节点的性能。简单来说就是给现有的 Redis 服务器增加更多的 CPU 、内存、更快的存储&#xff08;SSD&#xff09;或更高的网络带宽。水平扩展 (Scale Out): 增加更多节点来分担负载。这意味着部署多个 Redis 实例&#xff…...

PyCharm 加载不了 conda 虚拟环境,不存在的

#工作记录 前言 在开发过程中&#xff0c;PyCharm 无法加载 Conda 虚拟环境是常见问题。 在不同情况下&#xff0c;“Conda 可执行文件路径”的指定可能会发生变化&#xff0c;不会一尘不变&#xff0c;需要灵活处置。 以下是一系列解决此问题的经验参考。 检查 Conda 安装…...

Matlab/Simulink的一些功能用法笔记(4)

水一篇帖子 01--MATLAB工作区的保护眼睛颜色设置 默认的工作区颜色为白色 在网上可以搜索一些保护眼睛的RGB颜色参数设置 在MATLAB中按如下设置&#xff1a; ①点击预设 ②点击颜色&#xff0c;点击背景色的三角标符号 ③点击更多颜色&#xff0c;找到RGB选项 ④填写颜色参数…...

OS7.【Linux】基本指令入门(6)

目录 1.zip和unzip 配置指令 使用 两个名词:打包和压缩 打包 压缩 Linux下的操作演示 压缩和解压缩文件 压缩和解压缩目录 -d选项 2.tar Linux下的打包和压缩方案简介 czf选项 xzf选项 -C选项 tzf选项 3.bc 4.uname 不带选项的uname -a选项 -r选项 -v选项…...

便捷OCR文字识别软件推荐

软件介绍 此次要介绍的是一款OCR识别软件。 核心功能及特点 这款小巧的OCR识别软件&#xff0c;功能简洁&#xff0c;操作方便&#xff0c;只需进行截图&#xff0c;随后就能自动识别文字内容。并且&#xff0c;它具备离线使用的特性&#xff0c;这一特点使得它非常适合在不联…...

【中间件】brpc_基础_栈管理

文章目录 BRPC bthread栈管理1 简介2 关键数据结构2.1 栈描述符 (bthread_stack_t)2.2 栈池 (StackPool) 3 核心操作3.1 栈分配 (bthread_stack_alloc)3.2 栈释放 (bthread_stack_dealloc)3.3 栈切换支持 4 性能优化5 安全性设计6 跨平台实现6.1 Linux6.2 Windows 7 应用场景8 …...

Linux 硬盘和光驱系统管理

一、硬盘与目录的容量 [rootwww ~]# df [-ahikHTm] [目录或档名] 选项与参数&#xff1a; -a &#xff1a;列出所有的档案系统&#xff0c;包括系统特有的 /proc 等档案系统&#xff1b; -k &#xff1a;以 KBytes 的容量显示各档案系统&#xff1b; -m &#xff1a;以 MByt…...

分库分表后复杂查询的应对之道:基于DTS实时性ES宽表构建技术实践

1 问题域 业务发展的初期&#xff0c;我们的数据库架构往往是单库单表&#xff0c;外加读写分离来快速的支撑业务&#xff0c;随着用户量和订单量的增加&#xff0c;数据库的计算和存储往往会成为我们系统的瓶颈&#xff0c;业界的实践多数采用分而治之的思想&#xff1a;分库…...

[三分钟]性能测试工具JMeter入门: 下载安装JMeter并设置中文;JMeter基本使用流程

文章目录 1.下载并打开JMeter2.设置JMeter中文3.JMeter基本使用流程 Apache JMeter 是 Apache 组织基于 Java 开发的压力测试工具。 JMeter 支持多种协议和技术&#xff0c;如 HTTP、HTTPS、FTP、JDBC、SOAP、REST、JMS 等。它不仅可以用于性能测试&#xff0c;还可以用于功能测…...

StableDiffusionWebUI的AI绘图AI绘视频详细使用教程+报错排坑

概述 这里是官方的最原始的体积最小的StableDiffusionWebUI的下载及其使用教程&#xff0c;已经帮你们把坑都排完了&#xff0c;本教程适合开发者、程序员自己折腾&#xff0c;源码体积只有1.8M。 从0安装到绘图 1.环境 Python与Git环境&#xff1a; 安装Python3.10.0 >…...

Flutter 合并 ‘dot-shorthands‘ 语法糖,Dart 开始支持交叉编译

最近在 Dart 在 main 3.9 合并了一项名为 「dot-shorthands」 的语法糖提议&#xff0c;该提议主要是为了简化开发过程中的相关静态固定常量的写法&#xff0c;通过上下文类型推断简化枚举值和静态成员的访问&#xff1a; 简单来说&#xff0c;就是在之前你可能需要写 SomeEnum…...

貌似我的ollama加载的模型被下载了两份?终于搞懂原理了。

文章目录 背景ollama的模型默认会被放在哪儿呢?什么是homedir?ollama服务直接ollama serve如何修改保存模型文件的路径?背景 如果你想以最快的方式,部署本地的大模型,那么ollama无疑是最合适的选择之一。我其实linux用的不多。之前一直是在windows上部署的ollama。后来有…...

【HarmonyOS 5】鸿蒙用户头像编辑功能实践

【HarmonyOS 5】鸿蒙用户头像编辑功能实践 一、前言 1、应用背景 在鸿蒙化开发过程中,我们发现最基本常见的功能–用户头像的编辑,实现方式和Android与IOS有极大的不同。 在实际开发和调研的过程中,我们发现并总结了鸿蒙隐私处理与业内Android和IOS的差异性。发现隐私保…...

VTK|结合qt创建通用按钮控制显隐(边框、坐标轴、点线面)

文章目录 增加边框BoundingBox添加addBoundingBox添加BoundingBox控制按钮点击按钮之后的槽函数 添加坐标轴增加点线面显隐控制按钮添加控制点线面显隐的按钮到三维显示界面控制面显示槽函数控制线显示槽函数控制点显示槽函数 增加边框BoundingBox 增加边框BoundingBox并通过按…...

Python Cookbook-7.3 在 Pickling 的时候压缩

任务 你想以一种压缩的方式来 pickle 一般的 Python 对象。 解决方案 标准库模块 cPickle 和 gzip提供了所需的功能;你只需以适当的方式将它们粘合起来即可: import cPickle,gzip def save(filename,*objects):将对象存为压缩过的磁盘文件fil gzip.open(filename,wb)for o…...

合并两个有序链表 - 简单

************* C topic: 21. 合并两个有序链表 - 力扣&#xff08;LeetCode&#xff09; ************* Give the topic an inspection. Hi, guys, how is your holiday break? I went to 黄山 in the past few days. The mount Huang is really beautiful. 天都峰 is real…...

手写 Vue 源码 === Effect 机制解析

目录 核心概念 响应式效果的实现 依赖收集的具体流程 为什么使用全局变量&#xff1f; 嵌套 effect 的处理 总结 Vue3 的响应式系统核心在于跟踪依赖并在数据变化时触发更新。effect.ts文件实现了这一机制的核心部分&#xff0c;下面我们来梳理其中的关键思路。 核心概念…...

《AI大模型应知应会100篇》第49篇:大模型应用的成本控制策略

第49篇&#xff1a;大模型应用的成本控制策略 &#x1f9fe; 摘要 随着AI大模型的广泛应用&#xff0c;其高昂的部署与运行成本成为企业面临的一大挑战。本文将从技术架构、资源优化、业务模式等多个维度出发&#xff0c;系统性地讲解如何在保障服务质量的前提下&#xff0c;实…...

利用Ollama部署DeepSeek模型

利用Ollama部署DeepSeek模型 最近&#xff0c;DeepSeek作为一款高效的推理模型受到了广泛关注&#xff0c;但在使用网页版过程中&#xff0c;总是遇到服务器繁忙&#xff0c;因此尝试在本地部署DeepSeek来使用。 一、Ollama安装指南 Ollama是一个开源的AI大模型部署工具&…...

数字孪生储能充电站,实现智慧能源设施全景管控

图扑将储能充电站的电池组、充电桩、配电系统等设备进行数字孪生&#xff0c;通过实时接入充放电数据、设备状态及能耗信息&#xff0c;以三维可视化界面直观呈现储能动态、电力调度与运维场景&#xff0c;助力运营方优化资源配置、预判设备故障&#xff0c;推动储能充电设施高…...

MCP服务发展现状的有趣发现

MCP服务发展现状的有趣发现 当前&#xff0c;MCP&#xff08;Model Context Protocol&#xff09;在AI领域逐渐成为一个热门话题。其核心意义在于赋予大模型直接调用外部工具的能力&#xff0c;从而打破“数据孤岛”&#xff0c;实现真正的工具增强型AI。然而&#xff0c;在深…...

aws平台windows虚拟机扩容

收到aws平台windows虚拟机扩容磁盘的请求 登陆aws平台ec2找的对应的虚拟机 进入实例详情 然后点击存储 点击进入卷 然后远程登陆这台虚拟机 在运行对话框中&#xff0c;输入 diskmgmt.msc 并按 Enter。然后&#xff0c;磁盘管理实例程序随之打开 在 Disk Management 菜单上&am…...

QuecPython+Aws:快速连接亚马逊 IoT 平台

提供一个可接入亚马逊 Iot 平台的客户端&#xff0c;用于管理亚马逊 MQTT 连接和影子设备。 初始化客户端 Aws class Aws(client_id,server,port,keep_alive,ssl,ssl_params)参数&#xff1a; client_id (str) - 客户端唯一标识。server (str) - 亚马逊 Iot 平台服务器地址…...

从创业踩雷到依法解债:湖北理元理律师事务所的危机拆解逻辑

“本以为最坏结果是创业失败&#xff0c;没想到差点毁了家庭。”34岁的武汉宝妈李婷&#xff08;化名&#xff09;在咖啡厅里翻着厚厚的案件材料。因参与朋友奶茶店项目&#xff0c;她在网贷平台借款28万&#xff0c;却因合同漏洞陷入债务旋涡。本文将拆解专业机构处理此类案件…...

1、Kafka与消息队列核心原理详解

消息队列&#xff08;Message Queue, MQ&#xff09;作为现代分布式系统的基础组件&#xff0c;极大提升了系统的解耦、异步处理和削峰能力。本文以Kafka为例&#xff0c;系统梳理消息队列的核心原理、架构细节及实际应用。 Kafka 基础架构及术语关系图 术语简要说明 Produce…...

【Linux系统】线程安全

线程安全和重入问题 概念 线程安全&#xff1a;多个线程在访问共享资源时&#xff0c;能够正确地执行&#xff0c;不会相互干扰或破坏彼此的执行结果。一般而言&#xff0c;多个线程并发同一段只有局部变量的代码时&#xff0c;不会出现不同的结果。但是对全局变量或者静态变…...

什么是gitlab自动部署,怎么配置gitlab自动部署

在现代软件开发流程中,自动化部署是提高效率和确保软件质量的关键环节。GitLab作为一个强大的DevOps平台,提供了完整的自动部署工具,帮助开发团队实现代码从编写到生产的无缝转换。本文将详细解析GitLab的自动部署功能是什么,如何进行操作,以及这一功能的实用性评估,帮助…...

Android开发-工程结构

在进行Android应用开发时&#xff0c;了解并掌握项目的工程结构是非常重要的一步。一个典型的Android项目由多个模块组成&#xff0c;每个模块又包含不同的目录和文件&#xff0c;它们各自承担着特定的功能。本文将带你深入了解Android Studio生成的默认项目结构&#xff0c;并…...

典籍知识问答模块AI问答功能feedbackBug修改+添加对话名称修改功能

1.feedbackBug修改 由于原先定为enum类型&#xff0c;导致无法正常评价&#xff0c;一直报错Data truncated for column feedback at row 1&#xff0c;将其修改为varchar类型&#xff0c;而类型选择在代码中实现 QAService代码修改后如下&#xff1a; 2.添加对话名称修改功…...

极狐Gitlab 里程碑功能介绍

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 里程碑 (BASIC ALL) 极狐GitLab 中的里程碑是一种跟踪议题和合并请求的方法&#xff0c;这些请求是为了在特定时间段内实现更…...

信奥赛CSP-J复赛集训(DP专题)(37):P4170 [CQOI2007] 涂色

信奥赛CSP-J复赛集训&#xff08;DP专题&#xff09;&#xff08;37&#xff09;&#xff1a;P4170 [CQOI2007] 涂色 题目描述 假设你有一条长度为 5 5 5 的木板&#xff0c;初始时没有涂过任何颜色。你希望把它的 5 5 5 个单位长度分别涂上红、绿、蓝、绿、红色&#xff0c…...

代码随想录算法训练营第五十六天| 图论2—卡码网99. 岛屿数量(dfs bfs)

假期归来继续刷题&#xff0c;图论第二天&#xff0c;主要是进一步熟悉dfs 和 bfs 的运用。 99. 岛屿数量&#xff08;dfs&#xff09; 99. 岛屿数量 ACM模式还是需要练&#xff0c;不过现在输入输出的感觉已经比较熟悉了。首先是要按照输入搭建一个grid&#xff0c;然后有一…...

iOS开发架构——MVC、MVP和MVVM对比

文章目录 前言MVC&#xff08;Model - View - Controller&#xff09;MVP&#xff08;Model - View - Presenter&#xff09;MVVM&#xff08;Model - View - ViewModel&#xff09; 前言 在 iOS 开发中&#xff0c;MVC、MVVM、和 MVP 是常见的三种架构模式&#xff0c;它们主…...

雅思阅读--易错词汇60个

文章目录 5. pretty6. matterIt does not matter ...7. stage8. draw... draw attention ...5. pretty 23个大满贯单打冠军,传奇网球运动员 WIlliams 曾经说过: I’ve always been pretty confident in my abilities. 翻译:我一直对自己的能力很有信心。 分析:在本句中,“…...

精益数据分析(44/126):深度解析媒体网站商业模式的关键要点

精益数据分析&#xff08;44/126&#xff09;&#xff1a;深度解析媒体网站商业模式的关键要点 在创业与数据分析的探索道路上&#xff0c;我们不断挖掘不同商业模式的核心要素&#xff0c;今天将深入剖析媒体网站商业模式。希望通过对《精益数据分析》相关内容的解读&#xf…...

【回眸】QAC使用指南——导出 Dashboard Report个性化定制Report

前言 按错误级别导出Dashboard的报告 导出Dashboard个性化定制报告 添加个性化设计 导出个性化报告&#xff08;HTML/PDF/XML&#xff09; 过滤级别错误 后记 前言 QAC除了导出常规的报告之外&#xff0c;还可以导出Dashboard的报告&#xff08;XML格式或者PDF格式&…...

高铁座位指示灯系统技术深度解析:从物联网到智慧出行的实践路径

摘要 高铁座位指示灯系统作为铁路数字化转型的核心场景&#xff0c;通过物联网、实时数据同步等技术&#xff0c;实现了客票系统与列车座位状态的动态联动。本文结合权威技术文档与现场实践&#xff0c;从系统架构、数据交互、工程实现等维度展开深度解析&#xff0c;并探讨其…...

ReSearch:强化学习赋能大模型,推理与搜索的创新融合

ReSearch&#xff1a;强化学习赋能大模型&#xff0c;推理与搜索的创新融合 大语言模型&#xff08;LLMs&#xff09;的推理能力不断提升&#xff0c;却在与外部搜索结合处理复杂问题时遇阻。本文提出的ReSearch框架&#xff0c;借助强化学习让LLMs学会将搜索融入推理&#xf…...

python的selenium操控浏览器

咱们以操控谷歌浏览器为例子 各系统谷歌浏览器及其工具最新版本下载地址 Chrome for Testing availability 查看谷歌浏览器版本 设置->关于Chrome->查看当前谷歌浏览器版本 下载与谷歌浏览器版本对应的chromedriver 注意&#xff1a;与谷歌浏览器版本一模一样的不一定…...

1、PLC控制面板 - /自动化与控制组件/plc-control-panel

76个工业组件库示例汇总 PLC控制系统监控面板 这是一个用于PLC控制系统监控面板的自定义组件&#xff0c;提供了PLC编程与自动化控制逻辑设计的可视化监控界面。组件采用工业风格设计&#xff0c;包含实时数据展示、系统状态监控、控制功能以及报警和日志记录等功能。 功能特…...

LeetCode 热题 100 279. 完全平方数

LeetCode 热题 100 | 279. 完全平方数 大家好&#xff0c;今天我们来解决一道经典的动态规划问题——完全平方数。这道题在 LeetCode 上被标记为中等难度&#xff0c;要求找到和为给定整数 n 的完全平方数的最少数量。 问题描述 给定一个整数 n&#xff0c;返回和为 n 的完全…...

USB学习【2】通讯的基础-反向不归零编码

一.写在前面 所有的通讯协议&#xff0c;发送端和接收端必须按照同一节奏发送信号和接受信号才能保证通讯的正常进行&#xff0c;否则会出现错位。 这个节奏用我自己的话说&#xff1a;时间卡尺。 串口协议是通过约定好波特率来进行解析信号。IIC是专门有一个时钟线作为时间卡…...

Polygon Miden网络:具有客户端执行的边缘区块链

1. 引言 LambdaClass与Miden已合作超过18个月&#xff0c;这段合作关系始于帮助 Miden 开发客户端&#xff0c;为 Miden 网络提供交易执行和证明的支持。随着时间推移&#xff0c;双方的合作不断加深&#xff0c;工作也扩展到了协议和节点的开发上&#xff0c;涵盖了多个方面。…...

临床智能体AI与环境感知AI的融合:基于python的医疗自然语言处理深度分析

引言 医疗领域的数智化进程正以前所未有的速度推进,人工智能技术的应用尤为显著。随着大型语言模型(LLMs)的迅猛发展,医疗AI已从简单的辅助工具升级为复杂的智能体系统。临床智能体AI与环境感知AI的融合代表了医疗AI的最新发展方向,为重塑医疗运营自然语言处理提供了全新…...

Spring AI Alibaba-03- Spring AI + DeepSeek-R1 + ES/Milvus + RAG 智能对话应用开发全流程

Spring AI Alibaba-03- Spring AI DeepSeek-R1 ES/Milvus RAG 智能对话应用开发全流程 在[人工智能]&#xff08;AI&#xff09;应用中&#xff0c;模型通常需要访问外部资源或执行特定操作&#xff0c;例如数据库查询、调用外部API或执行计算任务。Spring AI&#xff0c;作…...

20250506异形拼图块(圆形、三角、正方,椭圆/半圆)的中2班幼儿偏好性测试(HTML)

背景介绍 最近在写一份工具运用报告,关于剪纸难度的。所以设计了蝴蝶描边系列和异形凹凸角拼图。 【教学类-102-20】蝴蝶三色图作品2——卡纸蝴蝶“满格变形图”(滴颜料按压对称花纹、原图切边后变形放大到A4横版最大化)-CSDN博客文章浏览阅读609次,点赞8次,收藏3次。【…...

Edge浏览器PDF字体显示错误

Edge浏览器PDF字体显示错误 软件版本信息 Edge Version: 136.0.3240.50 Word Version: Microsoft Office 专业增强版2021问题描述 在Word中使用多级列表自动编号, 并使用Word软件自带的导出为PDF文件功能, 在Word中显示正常的数字, 在Edge中查看PDF将会出现渲染错误的现象,…...

git中android studio不想提交文件

修改.gitignore文件 *.iml .gradle /local.properties /.idea/caches /.idea/libraries /.idea/modules.xml /.idea/workspace.xml /.idea/navEditor.xml /.idea/assetWizardSettings.xml /.idea/* /app/* .DS_Store /build /captures .externalNativeBuild .cxx local.propert…...

==和equals的区别 hashCode和equals的联系

和equals的区别&#xff1a; 对于没有重写equals()方法的类&#xff0c;和equals的作用是相同的&#xff1a;比较两个实例对象的地址是否相同。而对于重写了equals方法的类&#xff0c;equals方法则比较的是两个实例对象的内容&#xff08;例如String对象&#xff09;。 hashC…...