【Vue】pnpm创建Vue3+Vite项目
初始化项目
(1)cmd切换到指定工作目录,运行pnpm create vue命令,输入项目名称后按需安装组件

(2)使用vs code打开所创建的项目目录,Ctrl+~快捷键打开终端,输入pnpm install下载项目所需组件

(3)终端运行pnpm dev启动项目,浏览器访问Local后的地址为项目页面


目录结构
│ .eslintrc.cjs ESLint配置文件
│ .gitignore Git忽略文件和目录
│ .prettierrc.json Prettier配置文件
│ cypress.config.ts Cypress配置文件
│ env.d.ts TypeScript声明文件
│ index.html 主页
│ package.json Node.js依赖管理文件
│ README.md MD文档说明文件
│ README_CN.md 中文MD文档说明文件
│ tsconfig.app.json TypeScript配置文件,定义项目中其他文件的ts编译规则
│ tsconfig.json TypeScript配置文件,引用tsconfig.app.json、tsconfig.node.json和tsconfig.vitest.json
│ tsconfig.node.json TypeScript配置文件,定义vite.config.ts文件的编译规则
│ tsconfig.vitest.json TypeScript配置文件,定义Vitest测试框架编译规则
│ vite.config.ts Vite配置文件,定义Vite构建框架的构建行为
│ vitest.config.ts Vitest配置文件,定义Vitest测试框架的环境和行为
├─.vscode vscode配置目录
│ extensions.json 插件配置
│ settings.json 用户配置
├─cypress Cypress自动化测试框架目录
│ ├─e2e 测试用例目录,用于存放测试用例
│ │ example.cy.ts 默认测试用例
│ │ tsconfig.json 配置端到端测试的TypeScript编译选项
│ ├─fixtures 数据目录,存储测试过程中需要的静态测试数据
│ │ example.json 默认示例数据
│ └─support 公共目录,存放测试中需要的工具函数、自定义命令以及可以共享的配置
│ commands.ts 存放全局自定义命令
│ e2e.ts 存放配置设置
├─node_modules 存放所需组件,pnmp install后出现
├─public 存放静态资源,不会经过webpack处理
│ favicon.ico Vue默认图标
└─src 项目核心代码目录│ App.vue 根组件,主入口文件│ main.ts 应用入口文件,定义全局配置├─assets 静态资源目录,会经过webpack处理│ base.css 基础样式文件│ logo.svg 默认logo图标│ main.css 主要样式文件├─components 组件目录,存放可复用组件│ │ HelloWorld.vue Vue默认的示例组件│ │ TheWelcome.vue Vue默认的欢迎组件│ │ WelcomeItem.vue TheWelcome的子组件│ ├─icons 图标组件目录│ │ IconCommunity.vue 社区图标组件│ │ IconDocumentation.vue 文档图标组件│ │ IconEcosystem.vue 生态系统图标组件│ │ IconSupport.vue 支持图标组件│ │ IconTooling.vue 工具箱图标组件│ └─__tests__ 存放与组件相关的测试文件│ HelloWorld.spec.ts HelloWorld组件的测试文件├─router 存放路由相关的文件│ index.ts 路由配置核心文件,定义应用的路由规则、导航守卫和路由命名等├─stores 存放Vuex状态管理相关的文件│ counter.ts 用于管理与计数器相关的状态和操作└─views 存放页面级别的组件AboutView.vue 关于页面内容组件HomeView.vue 主页内容组件
相关文章:
【Vue】pnpm创建Vue3+Vite项目
初始化项目 (1)cmd切换到指定工作目录,运行pnpm create vue命令,输入项目名称后按需安装组件 (2)使用vs code打开所创建的项目目录,Ctrl~快捷键打开终端,输入pnpm install下载项目…...
springboot配置多数据源
springboot配置多数据源 学习新技术,争做新青年,欢迎围观,河南老乡在上海请,加,微,andyfau2022, ----获取数据源:null,数据源为null时默认使用主数据源的。 1-yml文件…...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案
墙体画线地图切分方案 针对问题:墙体两侧特征混淆误匹配,导致建图和定位偏差,表现为过门跳变、外月台走歪等 解决思路:预期的根治方案IGICP需要较长时间完成上线,先使用切分地图的工程化方案,即墙体两侧切…...
ChatGPT+Simple Mind Map生成思维导图:快速提升学习效率
一、告别杂乱笔记,一键生成清晰思维导图! 最近开始学习网络安全,一头扎进了各种协议、漏洞、防御机制的海洋中。信息量巨大,知识点零散,让我很快便陷入了“知识焦虑”——笔记越记越多,却越来越混乱&#…...
Day9 | Java框架 | SpringBoot
Day9 | Java框架 | SpringBoot SpringBoot简介入门程序概述起步依赖 基础配置配置文件格式:3种yaml语法规则yaml数据读取三种格式 多环境启动配置文件参数命令行参数多环境开发控制:Maven & SpringBoot 多环境兼容 配置文件分类:4种 整合…...
Wordpress右下角表单弹出插件
Ultimate Sticky Popup & Widgets Charcoal Making Machine | Equipment for Sale - Kingtiger...
影刀RPA实战:自动化批量生成条形码完整指南
今天我们聊聊使用影刀来实现批量生成条形码,条形码在零售行业运用非常广泛,主要作用表现在产品识别,库存管理,销售管理,防伪保护等,这些作用使其成为现代商业和工业环境中不可或缺的工具,它极大…...
Python Flask简介
简介 Flask 有两个主要依赖:路由、调试和 Web 服务器网关接口(Web Server Gateway Interface,WSGI) 子系统由:Werkzeug 提供模板系统由:Jinja2提供Werkzeug 和 Jinjia2 都是由 Flask 的核心开发者开发而成…...
视频监控平台是如何运作的?EasyCVR视频汇聚平台的高效策略与实践
随着科技的飞速发展,视频监控平台在社会安全、企业管理、智慧城市构建等领域发挥着越来越重要的作用。一个高效的视频监控平台,不仅依赖于先进的硬件设备,更离不开强大的视频处理技术作为支撑。这些平台集成了多种先进的视频技术,…...
欧拉下搭建第三方软件仓库—docker
1.创建新的文件内容 切换目录到etc底下的yum.repos.d目录,创建docker-ce.repo文件 [rootlocalhost yum.repos.d]# cd /etc/yum.repos.d/ [rootlocalhost yum.repos.d]# vim docker-ce.repo 编辑文件,使用阿里源镜像源,镜像源在编辑中需要单独复制 h…...
pcs升压变流一体机
在当今全球积极推进能源转型的大背景下,新能源技术的发展日新月异。其中,PCS 升压变流一体机作为一种关键的能源转换设备,正发挥着越来越重要的作用。它一般可分为10KV与35KV等级的。 PCS 升压变流一体机,全称为 Power Conversion…...
上海泗博EtherNet/IP转PROFIBUS DP网关EPS-320IP成都地铁项目应用案例
背景: 地铁,作为城市的活力脉搏,不仅是衔接城市生活的关键纽带,更是现代城市交通体系中不可或缺的核心组成部分。因此,确保地铁的稳定运行对任何一座城市都至关重要。 上海泗博自动化,作为与成都地铁项目合…...
猫鼠游戏: KaijiK病毒入侵溯源分析
1. 事件背景 近期,网宿平台某客户在使用云主机工作的时候突然出现主机卡顿,连接不稳定,网络断开的情况,并且收到了网宿主机入侵检测产品的告警信息。由于客户没有专职的安全人员,由运维人员兼任安全运营工作ÿ…...
【Hot100算法刷题集】双指针-02-盛水最多的容器(含暴力枚举、双指针法及其合理性证明)
🏠关于专栏:专栏用于记录LeetCode中Hot100专题的所有题目 🎯每日努力一点点,技术变化看得见 题目转载 题目描述 🔒link->题目跳转链接 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的…...
Spring和Spring FrameWork有什么关系?两者是同一个东西吗?
Spring和Spring Framework之间的关系可以归结为以下几点: 广义与狭义的理解 广义上的Spring: 广义上的Spring泛指以Spring Framework为基础的整个Spring技术栈。Spring已经发展成为一个由多个不同子项目(模块)组成的成熟技术体系…...
windows10 python 解决鼠标右键菜单中没有Edit with IDLE(不使用注册表编辑器)
随便选择一个py文件,右击打开属性。 打开方式:点击更改。 最下面:点击更多应用,点击在这台电脑上查找应用 搜索找到你自己按照的python路径下 Python39\Lib\idlelib\idle.bat 文件 点击打开,结束。...
一些深度学习相关指令
// 服务器上查看所有的环境版本 conda env list// 删除某一个环境 conda remove -n 环境名 --all终端输入命令:nvidia-smi,可以看显卡的使用情况指定使用哪张显卡: os.environ["CUDA_VISIBLE_DEVICES"] 2查看服务器的cuda版本&am…...
Python 实现自动配置华为交换机
Python 实现自动配置华为交换机 在网络运维中,配置交换机是非常重要的一步。如果我们可以使用 Python 来实现配置交换机,那么我们的工作效率将会大大提高。在本文中,我们将学习如何使用 Python 配置华为交换机。 背景知识 华为交换机是一种…...
上海亚商投顾:沪指探底回升 华为产业链午后爆发
上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 一.市场情绪 沪指昨日探底回升,深成指、创业板指盘中跌逾1%,午后集体拉升翻红。华为产业链午后走强…...
回归预测 | MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出
回归预测 | MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出 目录 回归预测 | MATLAB实现PSO-LSTM(粒子群优化长短期记忆神经网络)多输入单输出预测效果基本介绍模型介绍PSO模型LSTM模型PSO-LSTM模型程序设计参考资料致谢预测效果 Matlab实现PSO-LSTM多变量回归…...
SpringBoot-17-MyBatis动态SQL标签之常用标签
文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中,RouterProvider 是一个核心组件,用于提供基于数据路由(data routers)的新型路由方案。 它替代了传统的 <BrowserRouter>,支持更强大的数据加载和操作功能(如 loader 和…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)
引言:为什么 Eureka 依然是存量系统的核心? 尽管 Nacos 等新注册中心崛起,但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制,是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...
Python爬虫(一):爬虫伪装
一、网站防爬机制概述 在当今互联网环境中,具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类: 身份验证机制:直接将未经授权的爬虫阻挡在外反爬技术体系:通过各种技术手段增加爬虫获取数据的难度…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试,通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小,增大可提高计算复杂度duration: 测试持续时间(秒&…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
