开源：基于Vue3.3 + TS + Vant4 + Vite5 + Pinia + ViewPort适配..搭建的H5移动端开发模板

vue3.3-Mobile-template

基于Vue3.3 + TS + Vant4 + Vite5 + Pinia + ViewPort适配 + Sass + Axios封装 + vconsole调试工具，搭建的H5移动端开发模板，开箱即用的。

环境要求：

Node:16.20.1 pnpm:8.14.0

必须装上安装pnpm，没装的看这篇文章 https://blog.csdn.net/Steven_Son/article/details/135151622

代码管理工具推荐用：sourceTree

项目预览

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

项目结构

learn-vite -- UI 主目录  
├── dist 打包后自动生成的文件夹
├── public -- 静态资源  
├ ├── favicon.ico -- 图标  
├── src -- 源码目录  
├ ├── assets -- 全局静态资源
├ ├ ├── iconfont -- 字体和字体图标
├ ├ ├── images -- 图片存放路径
├ ├ ├── json -- 静态json
├ ├ └── scss -- index.scss 全局样式，reset.scss初始化样式
├ ├── components -- 封装的组件  
├ ├── global 配置全局URL环境变量
├ ├── hooks -- vue3 Hooks
├ ├── layout -- 全局Tabbar配置、keep-alive可配置需长缓存的路由
├ ├── polyfill 解决浏览器兼容性的文件
├ ├── router -- VUE 路由  
├ ├ ├── index -- 路由入口  
├ ├── service
├ ├ ├── apiList.ts -- 接口列表
├ ├ ├── error.ts -- 封装的接口错误提示
├ ├ ├── handleError.ts -- 处理接口请求错误
├ ├ ├── requestList.ts -- 请求函数列表 
├ ├ └── webRequest.ts -- 封装Axios请求函数
├ ├── store -- Pinia
├ ├ ├── index -- 统一导出整个pinia和store
├ ├ └── modules.ts  store模块化
├ ├── typings -- 存储TS类型别名
├ ├── utils -- 工具包  
├ ├── views -- 业务上的 vue 页面  
├ ├── App.vue -- 根组件  
├ └── main.ts -- 入口 ts  
├── components.d.ts -- 自动注册组件文件  
├── .eslintrc.js -- ESLint 配置  
├── .gitignore -- git 忽略  
├── tsconfig.json -- vscode 路径引入配置
├── index.html -- 首页  
├── package.json -- 依赖管理  
├── vite.config.ts -- vite5的相关配置 
└── windi.config.ts -- WindiCSS的配置文件

命令

git clone https://github.com/HSg666/vue3.3-Mobile-template  
// 或 git clone git@github.com:HSg666/vue3.3-Mobile-template
cd learn-vite    // 切换
pnpm i           // 装依赖
pnpm start       // 启动
pnpm run build   // 打包
rm -rf node_modules  // 强行删除依赖包

准备打包上线时请看 配置全局URL环境变量，检查完配置后再执行pnpm run build 打包

部署上线后如果出现页面刷新报Nginx404，请看这篇文章并对照检查你的router/index.ts中的mode模式，更改配置后再试试就OK了。

https://blog.csdn.net/Steven_Son/article/details/135414494

目录

  • 1、封装Router
  • 2、Vant4自动按需导入
  • 3、封装Axios请求函数、接口列表、请求错误处理
  • 4、配置全局URL环境变量
  • 5、配置alias路径别名
  • 6、封装Pinia、模块化、长缓存
  • 7、postcss-px-to-viewport移动端适配
  • 8、自动导入组件
  • 9、封装TabBar布局容器
  • 10、WindiCSS样式库
  • 11、初始化全局CSS和防止页面文本被用户选中
  • 12、字体与字体图标
  • 13、性能优化
  • 14、代码规范
  • 15、配置兼容性
  • 16、已配置第三方工具库
  • 17、拓展

1、封装Router

路径：src/router/index.ts

// 需要Tabbar的组件在layoutRoutes中添加路由，Tabbar就是页面底部的 精选、分类、购物车、我的
export const layoutRoutes: Array<RouteRecordRaw> = [
	{
		path: '/',
		name: 'home',
		meta: {
			title: 'home',
			keepAlive: true,
		},
		component: () => import('@/views/home/index.vue'),
	},
	{
		path: '/category',
		name: 'category',
		meta: {
			title: 'category',
			// keepAlive: true,
		},
		component: () => import('@/views/category/index.vue'),
	},
]

// 不需要Tabbar的组件在routes中添加路由，即页面底部空空如也的组件。
export const routes: Array<RouteRecordRaw> = [
  // 这个是布局，不用改
	{
		path: '/',
		component: () => import('@/layout/index.vue'),
		redirect: '/index',
		// 需要layout的页面
		children: layoutRoutes,
	},
	// 注册的路由类似登录页
	{
		path: '/login',
		name: 'login',
		component: () => import('@/views/login/index.vue'),
	},
]

2、移动端UI库采用Vant4

项目已经配置好按需导入和组件自动注册了，页面直接使用即可，无需手动注册。

除了Toast轻提示使用时需要手动引入，其他都无需手动引入。示例如下：

在vant4 Toast的函数名都改了，大家看官方文档就知道。

// 示例：
<script lang="ts" setup>
import { showToast } from 'vant'
const handleClick = () => {
	showToast('轻提示')
}

 </script>
<template>
	<van-button type="primary" @click="handleClick">按钮</van-button>  
</template>

自动注册的组件都保存在项目根目录的 components.d.ts中，可自行查看。

配置详情：https://blog.csdn.net/Steven_Son/article/details/135544198?spm=1001.2014.3001.5501

UI库官网地址：https://vant-ui.github.io/vant/#/zh-CN/button

3、封装Axios

1、新增axios并封装,还新增了自定义请求错误处理函数，请求类

2、封装api列表 apiList

封装的axios配合api接口使用模板

(1)、先把接口添加进接口列表

export const APIs = {
	GET_SHOPLIST: '/h5/getShopList', // 获取商品列表
}

(2)、页面使用

// account.vue
import AxiosRequestError from '@/service/error' // 引入自定义错误处理函数
import $api from '@/service/webRequest' // 封装好的axios请求函数
import { APIs } from '@/service/apiList' // 接口列表

// 二选一即可

// async await 写法
const getShop = async () => {
	try {
		const res = await $api.getShopList()
		console.dir(res, 'res')
	} catch (error: AxiosRequestError) {
		console.dir(error, 'error')
	}
}

// 原生Primise  .then  .catch
const params = { user:'', password:'' }  // 传参将需要传的值放入即可，跟vue2一样 
$api.get(APIs.GET_SHOPLIST, params)
	.then(() => {})
	.catch((err: AxiosRequestError) => {
		console.dir(err, 'err')
})

(3)、用console.dir可以捕获到详细的错误信息，还能看到我们封装的错误处理函数

data: undefined, // 接口返回值为undefined

isServerError: false, // 是否为服务器出错

isUnAuthorized: false, // 是否已通过鉴权，也就是常见的登录状态

(4)、如果要添加或使用自定义请求函数，请在src/service/requestList.ts中添加，类似于已经存在的上传图片接口

4、配置全局URL环境变量

开发和正式环境地址在 global/env.ts 中配置

// 正式环境
export const PROD_ENV = {
	SERVER_URL: 'http://192.168.1.193:8090/', // 服务器地址
	IS_DEV: 'false', // 是否为开发环境
}

// 开发环境
export const DEV_ENV = {
	SERVER_URL: 'http://192.168.1.193:8099/',
	IS_DEV: 'true',
}

/* 	
	isDEV：true为生产环境，false为开发环境
	假设开发环境的域名是 http://127.0.0.1:8099/api 或 https://xxx-test.com
	提示：
	本地如果要将请求地址切换为生产服务器，则将isDEV设置为false，注释掉判断开发环境的代码。代码如下
	const isDEV = false
	// if (typeof window !== 'undefined') {
	// isDEV = process.env.NODE_ENV === 'development' || ['http://192.168.1.193:8099'].includes(window.location.host)
	// }

	准备打包上线，将代码改回来。（开发环境也是这个代码）代码如下   
	let isDEV = true // 默认为开发环境
	if (typeof window !== 'undefined') {
		isDEV = process.env.NODE_ENV === 'development' || ['http://192.168.1.193:8099'].includes(window.location.host)
	}

*/

let isDEV = true // 默认为开发环境，但会根据当前环境动态更换开发或生产
if (typeof window !== 'undefined') {
	isDEV = process.env.NODE_ENV === 'development' || ['http://192.168.1.193:8099'].includes(window.location.host)
}

5、配置路径别名 alias

示例：@/store 只要在src下的都能这样简写

总共分为4步：

1、vite.config.ts

import path from 'path'
export default defineConfig({
	//新增
	resolve: {
		alias: {
			'@/assets': path.resolve(__dirname, './src/assets'),
		},
	},
})

2、tsconfig.json

 "paths": {
      "@/assets/*": ["src/assets/*"],
    }

3、配置好页面使用
例如main.ts引入

// 引入全局样式
import '@/assets/scss/index.scss'

4、更改完vite.config.ts和tsconfig.json记得重启项目。

6、封装Pinia、模块化、长缓存

使用方式：

1、在store/modules下创建user.ts

import { defineStore, acceptHMRUpdate } from 'pinia'

// 1、声明导出store名称
export const userStore = defineStore({
	id: 'user', // 2、声明store名称
	state: () => ({
		name: '很老很老的值',
	}),
	getters: {
		myName: state => {
			return `getters ${state.name}`
		},
	},
	actions: {
		changeName(name: string) {
			this.name = name
		},
	},
	
})

// 这行代码是用于支持热模块替换（HMR）的。在Pinia中，它允许接受热更新并应用到使用了userStore的地方。
// 3、为了让当前store接收热更新为它配置一下
if (import.meta.hot) {
	import.meta.hot.accept(acceptHMRUpdate(userStore, import.meta.hot))
}

2、导出user.ts中整个userStore给其他组件使用

store/modules/index.ts

export * from './user'

3、store在组件中的使用方式

// 1、引入
import { userStore } from '@/store' // 由于项目已配置路径别名，所以就用@/，它代表的是src

// 2、实例化
const useUserStore = userStore()

// 3、如何使用userStore中的变量和函数     看下面template中的p标签就知道，解不解构2选1
// 3.1.1  变量可用解构  例如取出name后直接使用即可
const { name } = useUserStore
// 3.1.2  变量不解构   需要加上useUserStore.name
console.log(useUserStore.name)

// 3.2  使用userStore中的函数
const handleLogin = () => {
  useUserStore.changeName('张三')
}

// 页面
<template>
  	  <p>{{ name }}</p>
      <p>{{ useUserStore.name }}</p>
</template>

完整代码

import { userStore } from '@/store'  // 1、引入
const useUserStore = userStore() // 2、实例化

const { name } = useUserStore // 3、解构变量

// 4、使用
const handleLogin = () => {
  useUserStore.changeName('张三')
}

<template>
  	  <p>{{ name }}</p>
</template>

4、引入的store存储的数据默认是没有响应式的，可以用 storeToRefs 将其变为响应式。

// 引入
import { storeToRefs } from "pinia";  

 // 将我们实例化的useAppstore放进去然后解构，解构出的state数据即为响应式
 const { name } = storeToRefs(useAppstore);

需要storeToRefs的完整代码

import { userStore } from '@/store' // 引入userStore
import { storeToRefs } from "pinia";  // 取出响应式方法

const useUserStore = userStore() // 实例化
const { name } = storeToRefs(useUserStore); // 将实例化对象的数据更改为响应式并解构出来

// 使用userStore中的函数
const handleLogin = () => {
  useUserStore.changeName('张三')
}

// 页面
<template>
  	  <p>{{ name }}</p>
</template>

如何证明数据是否为响应式，请看这篇文章 https://blog.csdn.net/Steven_Son/article/details/128440811

封装+模块化：https://blog.csdn.net/Steven_Son/article/details/135553816?spm=1001.2014.3001.5501

长缓存：https://blog.csdn.net/Steven_Son/article/details/135551314?spm=1001.2014.3001.5501

Pinia官网文章：https://pinia.web3doc.top/introduction.html

7、自适应采用的是postcss-px-to-viewport

详细配置说明看这篇文章：https://blog.csdn.net/Steven_Son/article/details/135554296?spm=1001.2014.3001.5501

8、自动导入组件

使用components下的组件时自动注册的插件 unplugin-vue-components

作用：哪个页面要用到components下的组件无需import手动导入，直接使用即可。

所用的组件都自动保存在项目根目录的 components.d.ts 中。

9、封装TabBar布局容器

1、路径：src/layout/index.vue

2、作用：页面整体的布局结构，如需增加/减少tabbar数量，增加时记得给新tabbar配置正确的路由，才能正常跳转。

10、Windicss库的用法

库已经配置好了，你直接使用即可。

<p class="text-orange-500">橙色</p>

官方文档：https://windicss.org/

11、初始化全局CSS和防止页面文本被用户选中

src/assets/scss/reset.scss 和 src/assets/scss/index.scss

12、字体和字体图标

项目使用的字体和字体图标是阿里巴巴免费可商用的iconfont，无需担心是否侵权的问题。

路径：src/assets/iconfont

1、iconfont 阿里巴巴字体图标

配置文章链接： https://blog.csdn.net/Steven_Son/article/details/128149868?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22128149868%22%2C%22source%22%3A%22Steven_Son%22%7D

2、引入免费的阿里巴巴思源黑体字体

配置文章链接：https://www.iconfont.cn/fonts/detail?spm=a313x.fonts_index.i1.d9df05512.7ccd3a81uTg3IB&cnid=nsKKStjV4gdI

13、性能优化

1、需要keep-alive长缓存的组件在此配置

1、路由设置keepAlive属性

src/router/index.ts

{
		path: '/category',
		name: 'category',
		meta: {
			title: 'category',
			keepAlive: true,   // 加这一行
		},
		component: () => import('@/views/category/index.vue'),
	},

2、到布局结构页面手动添加要keep-alive的组件名称

src/layout/index.vue

const routerStrArr = ['home']

浏览器可以搭配插件vue.js Devtools 查看以及控制台网络降速测试

注意：最多缓存10个，缓存太多影响性能。

2、为每次打包的文件后缀添加打包时的时间戳，防止打包上线页面缓存的问题

vite.config.ts timeStamp

3、为index.html增加防盗链，解决图片403

4、PC端时自动生成iframe框架嵌套项目并网页自动居中

具体代码逻辑在 src/App.vue onMounted中

5、vite.config.ts已配置诸多优化，具体请自行查看。

14、代码规范

1、prettier + eslint 配置了代码规范插件

2、husky + lint-staged git提交规范

  • feat：新功能（feature）
  • fix/to：修复 bug，可以是 QA 发现的 BUG，也可以是研发自己发现的
  • fix：产生 diff 并自动修复此问题。适合于一次提交直接修复问题
  • to：只产生 diff 不自动修复此问题。适合于多次提交。最终修复问题提交时使用 fix
  • docs：文档（documentation）。
  • style：格式（不影响代码运行的变动）【比如说加注释就是这个？】
  • refactor：重构（即不是新增功能，也不是修改 bug 的代码变动）。
  • perf：优化相关，比如提升性能、体验。
  • test：增加测试。
  • chore：构建过程或辅助工具的变动。
  • revert：回滚到上一个版本。
  • merge：代码合并。
  • sync：同步主线或分支的 Bug。

15、配置兼容性

1、browserslist 配置了浏览器兼容性

2、polyfill web项目兼容低版本浏览器插件

core-js 和 @vitejs/plugin-legacy

16、已配置第三方工具库

1、lodash

防抖和节流的使用方法,节流用到时再去查

import { debounce,throttle } from 'lodash-es'

// 它返回一个带防抖的新函数
const debounceLogin = debounce(toLogin, 500)
function toLogin() {
	console.log(111)
}

2、vConsole移动端调试工具

详细文章看这篇：https://blog.csdn.net/Steven_Son/article/details/135555570?spm=1001.2014.3001.5501

17、拓展：

1、如果不知道怎么用Nginx部署前端打包后的dist,可以看这篇文章

https://blog.csdn.net/Steven_Son/article/details/135414494?spm=1001.2014.3001.5501

2、如果要做JWT免登，请根据你的需求对以下几个文件进行更改

1、src/service/webRequest.ts 设置token的地方
2、src/service/error.ts 错误报错页
3、src/login/index.vue 登录页，登录后可能就要保存token了

3、本地开发的项目到手机端演示

1、修改package.json配置,更改为你电脑的IP地址，同时电脑和手机要在同个网络。
说明：连的同个WIFI、同个网线。

"scripts": {
		"testMobile": "vite --host 192.168.1.193"
	}

2、电脑(windows)关闭防火墙，这三个都要关闭：域网络、专用网络、公用网络。
位置：安全中心 —— 防火墙和网络保护

3、pnpm testMobild 启动项目，手机访问启动后的项目链接。

4、解决main.ts 文件引入路径的问题

1、如果引入路径正确，但是提示找不到文件，则删除’XX’,重新引入

2、检查vite.config.ts的路径别名配置是否正确,正确代码如下

//新增
	resolve: {
		alias: {
			'@': path.resolve(__dirname, './src'), //把 src 的别名设置为 @
		},
		extensions: ['.js', '.json', '.ts'], // 这些类型的文件后缀的不需要写
	},

3、检查tsconfig.json的部分属性配置

  "baseUrl": ".",
  "paths": {"@/*": ["src/*"]},
  "target": "ES2020",
  "module": "ES2020",
   "lib": [
      "es2020",
      "es5", 
      "es6",
      "DOM",
      "DOM.Iterable"
    ],
   "moduleResolution": "node",
    "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue", 
  	],

4、检查tsconfig.node.json的部分属性配置

  "compilerOptions": {
	"module": "ES2020",
	"moduleResolution": "node",
	"allowSyntheticDefaultImports": true
  },
  	"include": ["vite.config.ts", "src/**/*.ts", "global/*.ts"]

5、在src下新建vite-env.d.ts ,解决ts无法识别引入.vue后缀的文件夹

/// <reference types="vite/client" />
declare module '*.vue' {
	import type { DefineComponent } from 'vue'

	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types

	const component: DefineComponent<{}, {}, any>

	export default component
}

每次修改完都要重启项目，或者关闭项目重启VSCode、重启项目。

5、使用van-nav-bar时看这里

直接使用，但由于它会盖住外部包裹层，所以你使用van-nav-bar时需要给外层container添加padding-top:92px; 也就是vant-nav-bar的2倍高度（1倍是46），因为我们设计稿是750的。

这样在van-nav-bar下的内容就不会被它盖住了。

不需要van-nav-bar的无需加此样式。

<template>
	<container>
		<van-nav-bar title="首页" />  	
  </container>
</template>
<style scoped lang="scss">
  .container{
    padding-top: 92px;
  }
</style>

6、如果打开某些组件正确引入vue的api了，但还是报未找到vue文件，此时项目有缓存，关闭整个VScode重启项目即可解决。

import { ref } from 'vue' // 正确引了，但提示报未找到文件

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

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

相关文章

基于PSO-BP神经网络的风电功率MATLAB预测程序

基于PSO-BP神经网络的风电功率MATLAB预测程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 参考文献 基于风电场运行特性的风电功率预测及应用分析——倪巡天 资源简介 由于自然风具有一定的随机性、不确定性与波动性&#xff0c;这将会使风电场的功率预测受到一定程度的影响&#xff0c;它们之间…
阅读更多...
GPT-4级别模型惨遭泄露！引爆AI社区，“欧洲版OpenAI”下场认领

GPT-4级别模型惨遭泄露！引爆AI社区，“欧洲版OpenAI”下场认领

大家好&#xff0c;我是二狗。 这两天&#xff0c;一款性能接近GPT-4的模型惨遭泄露&#xff0c;引发了AI社区的热议。 这背后究竟是怎么回事呢&#xff1f; 起因是1月28日&#xff0c;一位名为“Miqu Dev”的用户在 HuggingFace 上发布了一组文件&#xff0c;这些文件共同组…
阅读更多...
iOS pod sdk开发到发布,记录

iOS pod sdk开发到发布,记录

本文章记录从开发sdk到发布cocopod的问题和流程,省的每次都忘还得重新查 1:pod lib create (sdk名称) 命令创建 工程结构,然后根据命令行提示进行选择. What platform do you want to use?? [ iOS / macOS ]。~》 iOS What language do you want to use?? [ Swift / Obj…
阅读更多...
“/“应用程序中的服务器错误.

“/“应用程序中的服务器错误.

<div id"m_category" class" round2"><h3>管理中心</h3><div class"con"> <p><a href"categorymanager.aspx">类别管理</a></p> /*我是这段代码出现问题*/ <p><a …
阅读更多...
异步编程，到底有什么用？

异步编程，到底有什么用？

关键词&#xff1a;高性能、架构设计、异步思想、场景落地 文章导读 场景切入 先来看一个日常生活快递寄件场景&#xff0c;从寄件人&#xff08;寄件&#xff09;到收件人&#xff08;收件&#xff09;&#xff0c;全流程如下 当你准备寄送一个包裹时&#xff0c;通常你可以…
阅读更多...
Android配置GitLab CI/CD持续集成，Shell版本的gitlab-runner，FastLane执行，上传蒲公英

Android配置GitLab CI/CD持续集成，Shell版本的gitlab-runner，FastLane执行，上传蒲公英

mac环境下， 首选需要安装gitlab-runner和fastlane brew install gitlab-runner brew install fastlane 安装完成，来到我们在gitlab下新建的Android项目，我们开始创建gitlab-runner 1、创建runner 点开runner，点击新建runner 选择macos，自定义一个标签，把运行未打标签…
阅读更多...
合约短线高胜率策略-扭转乾坤指标使用说明

合约短线高胜率策略-扭转乾坤指标使用说明

扭转乾坤指标使用说明 行情判断 双绿线 多趋势双红线 空趋势大绿线 小红线 多震荡大红线 小绿线 空震荡 进场条件 趋势行情进场 多趋势 多信号 底金叉 做多空趋势 空信号 顶死叉 做空 震荡行情进场 多震荡 多信号 底金叉 做多多震荡 空信号 顶死叉 做空空…
阅读更多...
Elasticsearch：将文档级安全性 (DLS) 添加到你的内部知识搜索

Elasticsearch：将文档级安全性 (DLS) 添加到你的内部知识搜索

作者&#xff1a;来自 Elastic Sean Story 你的企业很可能淹没在内部数据中。 你拥有问题跟踪、笔记记录、会议记录、维基页面、视频录制、聊天以及即时消息和私信。 并且不要忘记电子邮件&#xff01; 难怪如此多的企业都在尝试创造工作场所搜索体验 - 为员工提供集中、一站…
阅读更多...
RPC教程 7.服务发现与注册中心

RPC教程 7.服务发现与注册中心

0.前言 这一节的内容只能解决只有一个服务的情况。要是有多个服务(即是多个结构体&#xff09;这种就解决不了&#xff0c;也即是没有服务ip地址和服务实例的映射关系。 1.为什么需要注册中心 在上一节中&#xff0c;客户端想要找到服务实例的ip,需要硬编码把ip写到代码中。…
阅读更多...
python+selenium的web自动化】- 元素的常用操作详解(一)

python+selenium的web自动化】- 元素的常用操作详解(一)

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…
阅读更多...
PySimpleGUI 综合应用｜英语文本朗读以及转换为语音Mp3

PySimpleGUI 综合应用｜英语文本朗读以及转换为语音Mp3

PySimpleGUI 综合应用 目录 PySimpleGUI 综合应用 应用界面 完整代码 所需模块 PySimpleGUI pyttsx3 pyaudio rapidfuzz 字典格式 应用界面 完整代码 英语朗读器.pyw import PySimpleGUI as sg import pyttsx3,pyaudio,pyperclip import os,re,datetime,wave,threa…
阅读更多...
EasyExcel使用，实体导入导出

EasyExcel使用，实体导入导出

简介 Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存&#xff0c;poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题&#xff0c;但POI还是有一些缺陷&#xff0c;比如07版Excel解压缩以及解压后存储都是在内存中…
阅读更多...
@JsonProperty(“xx“)的使用

@JsonProperty(“xx“)的使用

JsonProperty(“xx”) 指定JSON字段的名称 常见的场景 1、第三方调用本系统&#xff0c;参数接收不到 &#xff0c;没有使用驼峰命名&#xff0c;或者传参格式不一致问题 2、前后端调试&#xff0c;接收不到个别参数 遇到的场景描述&#xff1a; 1&#xff0c;项目提供ope…
阅读更多...
Vue中的指令修饰符计算属性和方法的区别

Vue中的指令修饰符计算属性和方法的区别

一、指令修饰符 1.什么是指令修饰符&#xff1f; 所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码 2.按键修饰符 keyup.enter —>当点击enter键的时候才触发 代码演示&#xff1a; <!DOCTYPE html> <html lang…
阅读更多...
【ChatGPT】文本向量化与余弦相似度：揭开文本处理的神秘面纱(5)

【ChatGPT】文本向量化与余弦相似度：揭开文本处理的神秘面纱(5)

1、引言 在这个数字化的时代&#xff0c;我们每天都会面对大量的文本信息&#xff0c;从社交媒体到新闻报道&#xff0c;文本无处不在。但是&#xff0c;计算机要如何理解和处理这些文字呢&#xff1f;本文将为大家揭开其中的一些奥秘&#xff0c;详细解释文本向量化的概念&am…
阅读更多...
C++ hash—unordered_mapset

C++ hash—unordered_mapset

目录 一. unordered系列关联式容器 1、文档说明 2、接口说明 1. 构造 2. 容量 3. 迭代器 4. 元素访问 5. 查询 6. 修改 7. 桶操作 8. 测试 二、unordered_set 1、​​​​​​​文档说明 2、接口说明 1. 构造 2. 容量 3. 迭代器 4. 元素访问 5. 插入和删除…
阅读更多...
【脑电信号处理与特征提取】P7-贾会宾：基于EEG/MEG信号的大尺度脑功能网络分析

【脑电信号处理与特征提取】P7-贾会宾：基于EEG/MEG信号的大尺度脑功能网络分析

基于EEG/MEG信号的大尺度脑功能网络分析 Q: 什么是基于EEG/MEG信号的大尺度脑功能网络分析&#xff1f; A: 基于脑电图&#xff08;EEG&#xff09;或脑磁图&#xff08;MEG&#xff09;信号的大尺度脑功能网络分析是一种研究大脑活动的方法&#xff0c;旨在探索脑区之间的功能…
阅读更多...
Win11系统连接带HDMI接口的显示器后，电脑没有声音如何调试

Win11系统连接带HDMI接口的显示器后，电脑没有声音如何调试

解决这个问题的方法很简单&#xff0c;没有那么复杂。之所以使用HDMI接口连接了显示器后没声音&#xff0c;原因就是HDMI接口是包含音频视频两种信号的接口。当电脑的HDMI接口被使用时&#xff0c;系统就会默认从HDMI设备输出声音信号了&#xff0c;而此时如果HDMI设备没有声音…
阅读更多...
vivado里的LUT、LUTRAM、FF、BRAM、DSP、IO、BUFG、MMCM资源介绍

vivado里的LUT、LUTRAM、FF、BRAM、DSP、IO、BUFG、MMCM资源介绍

vivado里的LUT、LUTRAM、FF、BRAM、DSP、IO、BUFG、MMCM资源介绍 提示&#xff1a;以下是本篇文章正文内容&#xff0c;写文章实属不易&#xff0c;希望能帮助到各位&#xff0c;转载请附上链接。 vivado实现电路用到的资源类型 LUT&#xff08;Look-Up Table&#xff09;&am…
阅读更多...
文心一言APP上线新功能，一张照片、三句话即可生成专属数字分身

文心一言APP上线新功能，一张照片、三句话即可生成专属数字分身

只需一张照片、录制三句话&#xff0c;就能拥有一个自己的数字分身&#xff1f;这不是科幻电影&#xff0c;而是文心一言APP上线的新功能 - 数字分身。 目前&#xff0c;文心一言APP正在内测数字分身新功能&#xff0c;明天起&#xff0c;iOS和Android用户升级新版本后&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023