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

pnpm, eslint, vue-router4, element-plus, pinia

news 来源：原创 2025/9/20 22:53:25

利用 pnpm 创建 vue3 项目

pnpm 包管理器 - 创建项目

Eslint 配置代码风格(Eslint用于规范纠错，prettier用于美观）

在设置中配置保存时自动修复

提交前做代码检查

husky是一个 git hooks工具（git的钩子工具，可以在特定实际执行特定的命令）

打开 bash终端

当前项目没有使用 git进行管理，用 git init 进行初始化

然后进行 husky 工具配置，将会在当前目录中新建一个 .husky 文件夹，其中一个叫 pre-commit，这就是真正在代码提交之前要做的事情。

提交代码之前，可以让其执行 package.json中配置的全局命令 lint ，该命令基于 eslint 校验 vue文件，js文件等一系列文件,

手动调用校验

因为 eslint 是全面检查。耗时，所以解决办法：暂存区 eslint 校验

安装 lint-staged 包

package.json中配置 lint-staged命令，如果要执行该命令，还要配置 scripts，也就是lint-staged，一旦触发该命令，就去执行 lint-staged

将内容存放到暂存区并提交

如果代码中有错不能提交，可以先在eslint.cjs中设置关闭，不用管报错先提交

目录调整

将assets，components，stores,views文件夹里的文件删除掉

新增 api 请求文件夹，utils工具文件夹

拷贝全局样式，安装预处理器，进行支持

将图片素材拷贝到 assets 中

在main.js中导入验证是否生效，但是该scss文件在当前项目不支持，，还要安装预处理器

安装 sass预处理器，然后再 pnpm dev 启动

vue-router4路由代码解析：

与 vue2 不同：vue2直接导出 VueRouter ,但是vue3是按需导入 createRouter 创建路由(创建实例的方法)
history有两种模式 createWebHistory 和 createWebHashHistory ，参数是基础路径base，在 vite.config.js中配置
（在vue3中创建实例用 createApp，创建路由用 createRouter)
如果要在 Vue3 compositionAPI中获取路由对象，要通过路由中导入 useRoute获取路由参数，useRouter获取路由对象

按需引入 Element Plus组件库（因为是 pc 端，所以该组件更合适）

先安装 element-plus

因为按需导入需要两个插件，所以安装两个插件

配置 vite.config.js

配置完成再启动。

可以在项目任意位置使用组件

element-plus组件中还能直接使用其他组件而不用引入

pinia多组件共享数据的需求，通过pinia构建仓库和持久化

在 main.js中引入 createPinia函数，createPinia（）会创建一个pinia实例，然后添加到 vue应用中

在 store文件夹中新建 user.js 模块：defineStore新建仓库，setToken存储内容，removeToken移除内容，token中显示内容

在组件上使用

持久化处理

首先安装插件

将插件应用到 pinia实例中，然后 pinia 实例应用到 vue中

如果希望某个仓库进行持久化，那么就为其添加第三个参数 persist

关于状态管理 pinia ：

import {createPinia} from 'pinia' 从 pinia库中导入 createPinia 方法(在 main.js中)
app.use(createPinia()) 在 vue应用中注册 Pinia 实例。app.use()：这是 Vue 3 中的全局插件注册方法。(在 main.js中)
（承上启下）在使用 pinia 时，必须先将pinia实例注册到 vue 应用中，然后才能在仓库（store）文件中创建和使用 pinia 的 store
import {defineStore} from 'pinia' 从 pinia库中导入 defineStore函数（在store文件夹下的user.js模块）
export const useUserStore = defineStore(），export 是将 useUserStore这个store进行导出，使它能够被外部使用。return 是将 store 中的具体数据和方法（token，setToken,removeToken）暴露出去，让外部能操作这些数据。
（defineStore中有三个参数，第一个是该仓库唯一标识，第二个是个匿名函数（箭头函数），第三个是进行持久化的参数）
要想刷新已有的数据不变，即进行持久化处理，需要安装插件pinia-plugin-persistedstate（git 终端）, 在main.js中将其导出，然后应用到 pinia 实例中，而pinia实例用应用到 vue中。然后是 user.js仓库要进行持久化处理，所以为其添加参数 persist:true

Pinia仓库统一管理（两个优化）：

pinia独立维护；原来的 pinia 是堆砌在 main.js中的
仓库统一导出；原来的导出要找到对应的 pinia中的 store,路径很可能找错

pinia独立维护，需要将main.js中与 pinia相关的进行提取到 store文件夹下的 index.js文件中

选中剪切 main.js中与 pinia 有关的代码，放入到 stores的index.js中，然后将 pinia 实例导入到 main.js中

仓库统一导出：

stores文件夹下已经有了个 user.js仓库（模块），将来需要处理增加更多的模块处理更多业务，那么会需要一个文件夹modules在stores文件夹下接纳其他仓库文件。在 app.vue中要使用各个模块下面的数据方法，必须要在app.vue中进行导入，然后获取该各个对象，再然后渲染。

而统一导出就在于在 app.vue中进行导出各个模块时，必须要写一长串的路径，例如导出user模块，导出路径是 import {useUserStore} from '@/stores/modules/user'，每要使用任何一个模块，就必须要导入这么一长串，所以解决办法是将所有模块在 stores文件夹下的 index.js文件中进行导入然后再进行导出，也就是将index.js作为核心出口，那么在app.vue中进行导入的话就直接从 stores文件夹下的 index.js中进行导出了。

pnpm, eslint, vue-router4, element-plus, pinia

利用 pnpm 创建 vue3 项目 pnpm 包管理器 - 创建项目 Eslint 配置代码风格(Eslint用于规范纠错，prettier用于美观） 在设置中配置保存时自动修复提交前做代码检查 husky是一个 git hooks工具（git的钩子工具，可以在特定实际执行特…...

编程日记 2025/9/20 22:53:25

将jar安装到Maven本地仓库中

将jar安装到Maven本地仓库中 1. 使用 mvn install:install-file 命令模版示例 2.项目中添加依赖将一个 .jar 文件安装到 Maven 本地仓库中是一个常见的操作，尤其是在你想要在本地测试一个尚未发布到中央仓库的库时。以下是如何将 .jar 文件安装到 Maven 本地仓库的…...

编程日记 2025/9/20 22:50:19

Spring 和 Spring MVC 的关系是什么？

Spring和Spring MVC的关系就像是“大家庭和家里的小书房”一样。 Spring是一个大家庭，提供了各种各样的功能和服务，比如管理Bean的生命周期、事务管理、安全性等，它是企业级应用开发的全方位解决方案。这个大家庭里有很多房间，每个…...

编程日记 2025/9/19 16:00:02

Ollama ModelFile(模型文件)

1. 什么是 Modelfile？ Modelfile 是 Ollama 的配置文件，用于定义和自定义模型的行为。通过它，你可以： 基于现有模型（如 llama2、mistral）创建自定义版本调整生成参数（如温度、重复惩罚&#…...

编程日记 2025/9/20 22:50:20

基于python深度学习遥感影像地物分类与目标识别、分割实践技术应用

我国高分辨率对地观测系统重大专项已全面启动，高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成，将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB，遥感大数据时…...

编程日记 2025/9/20 22:52:14

（蓝桥杯——10. 小郑做志愿者）洛斯里克城志愿者问题详解

题目背景小郑是一名大学生，她决定通过做志愿者来增加自己的综合分。她的任务是帮助游客解决交通困难的问题。洛斯里克城是一个六朝古都，拥有 N 个区域和古老的地铁系统。地铁线路覆盖了树形结构上的某些路径，游客会询问两个区域是否可以通过某条地铁线路直达，以及有多少条…...

编程日记 2025/9/20 22:53:24

基于 Ollama 工具的 LLM 大语言模型如何部署，以 DeepSeek 14B 本地部署为例

简简单单 Online zuozuo ：本心、输入输出、结果文章目录基于 Ollama 工具的 LLM 大语言模型如何部署，以 DeepSeek 14B 本地部署为例前言下载 Ollama实际部署所需的硬件要求设置 LLM 使用 GPU ，发挥 100% GPU 性能Ollama 大模型管理命令大模型的实际运行资源消耗基于 Ollam…...

编程日记 2025/9/19 5:28:45

大模型工具大比拼：SGLang、Ollama、VLLM、LLaMA.cpp 如何选择？

简介：在人工智能飞速发展的今天，大模型已经成为推动技术革新的核心力量。无论是智能客服、内容创作，还是科研辅助、代码生成，大模型的身影无处不在。然而，面对市场上琳琅满目的工具，如何挑选最适合自己的那…...

编程日记 2025/9/12 20:46:34

【05】密码学与隐私保护

5-1 零知识证明零知识证明介绍零知识证明的概念设P（Prover）表示掌握某些信息，并希望证实这一事实的实体，V(Verifier）是验证这一事实的实体。零知识证明是指P试图使V相信某一个论断是正确的，但却不向…...

编程日记 2025/9/18 20:40:50

Flink SQL与Doris实时数仓Join实战教程（理论+实例保姆级教程）

目录第一章：Regular Joins 深度解析 1.1 核心原理与适用场景 1.2 电商订单 - 商品实时关联案例 1.2.1 数据流设计 1.2.2 Doris 表设计优化 1.2.3 性能调优要点第二章：Interval Joins 实战应用 2.1 时间区间关联原理 2.2 优惠券使用有效性验证 2.2.1 业务场景说明 …...

编程日记 2025/9/16 0:29:01

DeepSeek 助力 Vue 开发：打造丝滑的范围选择器（Range Picker）

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 💕 目录 Deep…...

编程日记 2025/9/14 19:01:36

68页PDF | 数据安全总体解决方案：从数据管理方法论到落地实践的全方位指南（附下载）

一、前言这份报告旨在应对数字化转型过程中数据安全面临的挑战，并提供全面的管理与技术体系建设框架。报告首先分析了数字化社会的发展背景，强调了数据安全在国家安全层面的重要性，并指出数据安全风险的来源和防护措施。接着，报…...

编程日记 2025/9/19 16:33:38

【Github每日推荐】-- 2024 年项目汇总

1、AI 技术项目简述OmniParser一款基于纯视觉的 GUI 智能体，能够准确识别界面上可交互图标以及理解截图中各元素语义，实现自动化界面交互场景，如自动化测试、自动化操作等。ChatTTS一款专门为对话场景设计的语音生成模型，主要用…...

编程日记 2025/9/13 5:53:19

【Spring详解一】Spring整体架构和环境搭建

一、Spring整体架构和环境搭建 1.1 Spring的整体架构 Spring框架是一个分层架构，包含一系列功能要素，被分为大约20个模块 Spring核心容器：包含Core、Bean、Context、Expression Language模块 Core ：其他组件的基本核心&#xff…...

编程日记 2025/9/20 15:25:53

Spring Boot（8）深入理解 @Autowired 注解：使用场景与实战示例

搞个引言在 Spring 框架的开发中，依赖注入（Dependency Injection，简称 DI）是它的一个核心特性，它能够让代码更加模块化、可测试，并且易于维护。而 Autowired 注解作为 Spring 实现依赖注入的关键工具&…...

编程日记 2025/9/19 6:06:12

Machine Learning:Optimization

文章目录局部最小值与鞍点 (Local Minimum & Saddle Point)临界点及其种类判断临界值种类批量与动量(Batch & Momentum)批量大小对梯度下降的影响动量法自适应学习率AdaGradRMSPropAdam 学习率调度优化总结局部最小值与鞍点 (Local Minimum & Saddle Point) 我…...

编程日记 2025/9/9 18:14:04

wordpress get_footer()；与wp_footer()；的区别的关系

在WordPress中，get_footer() 和 wp_footer() 是两个不同的函数，它们在主题开发中扮演着不同的角色，但都与页面的“页脚”部分有关。以下是它们的区别和关系： 1. get_footer() get_footer() 是一个用于加载页脚模板的函数。它的主…...

编程日记 2025/9/18 13:40:14

Windows Docker运行Implicit-SVSDF-Planner

Windows Docker运行GitHub - ZJU-FAST-Lab/Implicit-SVSDF-Planner: [SIGGRAPH 2024 & TOG] 1. 设置环境我将项目git clone在D:/Github目录中。下载ubuntu20.04 noetic镜像 docker pull osrf/ros:noetic-desktop-full-focal 启动容器，挂载主机的D:/Github文…...

编程日记 2025/9/14 18:19:31

设计模式14：职责链模式

系列总链接：《大话设计模式》学习记录_net 大话设计-CSDN博客 1.概述职责链模式（Chain of Responsibility Pattern）是一种行为设计模式，它允许将请求沿着处理者链传递，直到有一个处理者能够处理该请求。这种模式通过…...

编程日记 2025/9/20 1:31:42

Golang GORM系列：GORM并发与连接池

GORM 是一个流行的 Go 语言 ORM（对象关系映射）库，用于简化数据库操作。它支持连接池和并发访问功能，这些功能对于高性能、高并发的应用场景非常重要。本文结合示例详细介绍gorm的并发处理能力，以及如何是哟个连接池提升…...

编程日记 2025/9/15 19:31:00

linux笔记：shell中的while、if、for语句

在Udig软件的启动脚本中使用了while循环、if语句、for循环，其他内容基本都是变量的定义，所以尝试弄懂脚本中这三部分内容，了解脚本执行过程。 （1）while循环 while do循环内容如下所示，在循环中还用了expr…...

编程日记 2025/9/19 11:01:45

【Java】逻辑运算符详解：、|| 与、 | 的区别及应用

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: Java 文章目录 💯前言💯一、基本概念与运算符介绍💯二、短路与与非短路与：&& 与 & 的区别1. &&：短路与（AND）2. …...

编程日记 2025/9/19 21:28:02

Java 设计模式之解释器模式

文章目录 Java 设计模式之解释器模式概述UML代码实现 Java 设计模式之解释器模式概述解释器模式(interpreter)：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。如果一种特定…...

编程日记 2025/9/20 13:48:47

关于前后端分离跨域问题——使用DeepSeek分析查错

我前端使用ant design vue pro框架，后端使用kratos框架开发。因为之前也解决过跨域问题，正常是在后端的http请求中加入中间件，设置跨域需要通过的字段即可，代码如下所示： func NewHTTPServer(c *conf.Server, s *conf…...

编程日记 2025/9/17 19:35:00

Linux下ioctl的应用

文章目录 1、ioctl简介2、示例程序编写2.1、应用程序编写2.2、驱动程序编写 3、ioctl命令的构成4、测试 1、ioctl简介 ioctl（input/output control）是Linux中的一个系统调用，主要用于设备驱动程序与用户空间应用程序之间进行设备特定的输入/…...

编程日记 2025/9/18 17:30:26

Windows 环境下 Grafana 安装指南

目录下载 Grafana 安装 Grafana 方法 1：使用 .msi 安装程序（推荐） 方法 2：使用 .zip 压缩包启动 Grafana 访问 Grafana 配置 Grafana（可选） 卸载 Grafana（如果需要） 下载 G…...

编程日记 2025/9/12 11:03:01

【操作系统】操作系统概述

操作系统概述 1.1 操作系统的概念1.1.1 操作系统定义——什么是OS？1.1.2 操作系统作用——OS有什么用？1.1.3 操作系统地位——计算机系统中，OS处于什么地位？1.1.4 为什么学操作系统？ 1.2 操作系统的历史1.2.1 操作系统…...

编程日记 2025/9/20 20:01:17

基于SSM+uniapp的鲜花销售小程序+LW示例参考

1.项目介绍系统角色：管理员、商户功能模块：用户管理、商户管理、鲜花分类管理、鲜花管理、订单管理、收藏管理、购物车、充值、下单等技术选型：SSM，Vue（后端管理web），uniapp等测试环境&#x…...

编程日记 2025/9/20 12:26:22

第3章 .NETCore核心基础组件：3.1 .NET Core依赖注入

3.1.1 什么是控制反转、依赖注入杨老师在书中进行了一系列的文字阐述，总结一下就是：软件设计模式中有一种叫做【控制反转】的设计模式，而依赖注入是实现这种设计模式的一个很重要的方式。也就是说学习依赖注入，是学习怎样实现控…...

编程日记 2025/9/19 14:41:50

排序与算法：插入排序

执行效果插入排序的执行效果是这样的： 呃……看不懂吗？没关系，接着往下看介绍算法介绍插入排序（Insertion Sort）是一种简单直观的排序算法。它的工作原理是通过构建有序序列，对于未排序数据&#xff0c…...

编程日记 2025/9/20 13:09:47

uniapp 打包安卓集成高德地图

接入高德地图 let vm this;uni.chooseLocation({success: function (res) {// console.log(位置名称： res.name);// console.log(详细地址： res.address);// console.log(纬度： res.latitude);// console.log(经度： res.long…...

编程日记 2025/9/20 11:28:47

python爬虫系列课程2：如何下载Xpath Helper

python爬虫系列课程2：如何下载Xpath Helper 一、访问极简插件官网二、点击搜索按钮三、输入xpath并点击搜索四、点击推荐下载五、将下载下来的文件解压缩六、打开扩展程序界面七、将xpath.crx文件拖入扩展程序界面一、访问极简插件官网极简插件官网地址：https://chrome.zzz…...

编程日记 2025/9/20 12:26:40

win10系统上的虚拟机安装麒麟V10系统提示找不到操作系统

目录预览一、问题描述二、原因分析三、解决方案四、参考链接一、问题描述 win10系统上的虚拟机安装麒麟V10系统提示找不到操作系统，报错：Operating System not found 二、原因分析国产系统，需要注意的点： 需要看你的系统类…...

编程日记 2025/9/8 6:00:51

基于微信小程序的宿舍报修管理系统设计与实现，SpringBoot（15500字）+Vue+毕业论文+指导搭建视频

运行环境 jdkmysqlIntelliJ IDEAmaven3微信开发者工具项目技术SpringBoothtmlcssjsjqueryvue2uni-app 宿舍报修小程序是一个集中管理宿舍维修请求的在线平台，为学生、维修人员和管理员提供了一个便捷、高效的交互界面。以下是关于这些功能的简单介绍： …...

编程日记 2025/9/8 6:00:49

分布式同步锁：原理、实现与应用

分布式同步锁：原理、实现与应用引言1. 分布式同步锁的基本概念1.1 什么是分布式同步锁？1.2 分布式锁的特性 2. 分布式锁的实现方式2.1 基于数据库的分布式锁实现原理优缺点示例 2.2 基于 Redis 的分布式锁实现原理优缺点示例Redlock 算法 2.3 基于 ZooK…...

编程日记 2025/9/13 20:12:37

Chrome多开终极形态解锁！「窗口管理工具+IP隔离插件

Web3项目多开，继ads指纹浏览器钱包被盗后，更多人采用原生chrome浏览器，当然对于新手，指纹浏览器每月成本也是一笔不小开支，今天逛Github发现了这样一个解决方案，作者开发了窗口管理工具IP隔离插件&#xff…...

编程日记 2025/9/6 1:41:24

FreeSwitch的应用类模块

FreeSWITCH 应用类模块（Applications）完整表格模块名称功能描述mod_callcenter提供呼叫中心功能，支持队列、座席管理、监控等。mod_conference提供多方会议功能，支持音频、视频会议。mod_blacklist提供黑名单功能，阻…...

编程日记 2025/9/16 4:54:03

【蓝桥杯集训·每日一题2025】 AcWing 6123. 哞叫时间 python

6123. 哞叫时间 Week 1 2月18日农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛，但她很难理解为什么他这么喜欢它。他说「竞赛中我最喜欢的部分是贝茜说『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。埃尔茜仍然不理解，所以农夫约翰将竞赛以…...

编程日记 2025/9/8 8:34:04

Unity 淡入淡出

淡入（Fade in）：类似打开幕布淡出（Fade out）：类似关上幕布方案一使用Dotween（推荐） using DG.Tweening; using UnityEngine; using UnityEngine.UI;public class Test : MonoB…...

编程日记 2025/9/15 10:42:36

PBR光照模型相关知识

PBR是基于物理的光照模型，与lambert光照模型以及Blinn-Phong光照模型有所不同一、三种光照模型的区别原理基础 Lambert 光照模型：基于朗伯余弦定律，该定律表明，漫反射光的强度与入射光的方向和物体表面法线的夹角的余弦值成正比…...

编程日记 2025/9/12 0:29:59

【Go | 从0实现简单分布式缓存】-2：HTTP服务端与一致性哈希

本文目录一、回顾1.1 复习接口二、http标准库三、实现HTTP服务端四、一致性哈希本文为极客兔兔“动手写分布式缓存GeeCache”学习笔记。一、回顾昨天已经开发了一部分项目，我们先来看看项目结构。分布式缓存需要实现节点间通信，建立基于 HTTP 的…...

编程日记 2025/9/15 1:15:21

STM32 低功耗模式

目录背景低功耗模式睡眠模式进入睡眠模式退出睡眠模式停止模式进入停止模式退出停止模式待机模式进入待机模式退出待机模式程序睡眠模式休眠模式配置进入休眠模式退出睡眠模式停止模式停止模式配置进入停止模式退出停止模式待机模式…...

编程日记 2025/9/18 5:03:34

AI 百炼成神：逻辑回归, 垃圾邮件分类

第二个项目：逻辑回归垃圾邮件分类项目代码下载地址：https://download.csdn.net/download/m0_56366541/90398247 项目目标学习逻辑回归的基本概念。使用逻辑回归算法来实现垃圾邮件的分类。理解如何处理文本数据以及如何评估分类模型的性能。项目步骤准备数据集我们将使…...

编程日记 2025/9/20 19:08:01

#渗透测试#批量漏洞挖掘#Apache Log4j反序列化命令执行漏洞

免责声明本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停止本文章读。目录 Apache Log4j反序列化命令执行漏洞一、…...

编程日记 2025/9/10 1:42:59

Docker__持续更新......

Docker 1. 基本知识1.1 为什么有Docker?1.2 Docker架构与容器化画图解释画图解释2. 项目实战 1. 基本知识 1.1 为什么有Docker? 用一行命令跨平台安装项目，在不同平台上运行项目。把项目打包分享运行应用。 1.2 Docker架构与容器化准备机器，在机…...

编程日记 2025/9/20 22:22:56

什么是语料清洗、预训练、指令微调、强化学习、内容安全；什么是megatron，deepspeed，vllm推理加速框架

什么是语料清洗、预训练、指令微调、强化学习、内容安全目录什么是语料清洗、预训练、指令微调、强化学习、内容安全语料清洗预训练指令微调强化学习内容安全什么是megatron，deepspeed，vllm推理加速框架语料清洗语料清洗是对原始文本数据进行处理的过程，旨在去除数据中的…...

编程日记 2025/9/18 13:30:05

Ubuntu虚拟机NDK编译ffmpeg

目录一、ffmpeg源码下载1、安装git(用于下载ffmpeg源码)2、创建源码目录，下载ffmpeg源码二、下载ubuntu对应的NDK，并解压到opt下1、下载并解压2、配置 ~/.bashrc 三、源码编译、1、创建编译脚本2、脚本文件内容3、设置可执行权限并运行4、编译的结果在…...

编程日记 2025/9/9 14:30:10

SQLAlchemyError: A transaction is already begun on this Session.

资料 sqlalchemy 事务 - 简书在 SQLAlchemy 中，事务是通过会话来管理的。当你开始一个事务（例如使用 async with db.begin()），它会开启一个新的事务，并在事务块结束时自动提交或回滚。如果在同一个会话中&#xff0c…...

编程日记 2025/9/11 4:21:51

STM32 HAL库USART串口DMA IDLE中断编程：避坑指南

HAL_UART_Receive接收最容易丢数据了,STM32 HAL库UART查询方式实例可以考虑用中断来实现,但是HAL_UART_Receive_IT还不能直接用,容易数据丢失,实际工作中不会这样用,STM32 HAL库USART串口中断编程：演示数据丢失, 需要在此基础优化一下. STM32F103 HAL库USART串口…...

编程日记 2025/9/10 19:55:13

打造一个有点好看的 uniapp 网络测速软件

大家好，我是一名前端小白。今天想和分享一个有点好看的网络测速 uniapp 组件的实现过程。这个组件不仅外观精美，而且具有完整的功能性，是一个非常适合学习和实践的案例。设计理念在开始coding之前，先聊聊设计理念。一个好的测…...

编程日记 2025/9/20 17:50:05

利用 pnpm 创建 vue3 项目

pnpm 包管理器 - 创建项目

Eslint 配置代码风格(Eslint用于规范纠错，prettier用于美观）

提交前做代码检查

因为 eslint 是全面检查。耗时，所以解决办法 ： 暂存区 eslint 校验

目录调整

vue-router4路由代码解析：

按需引入 Element Plus组件库（因为是 pc 端，所以该组件更合适）

pinia多组件共享数据的需求，通过pinia构建仓库和持久化

Pinia仓库统一管理（两个优化）：

pinia独立维护，需要将main.js中与 pinia相关的进行提取到 store文件夹下的 index.js文件中

仓库统一导出：

相关文章：

因为 eslint 是全面检查。耗时，所以解决办法：暂存区 eslint 校验