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

【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. 事件背景 近期,网宿平台某客户在使用云主机工作的时候突然出现主机卡顿,连接不稳定,网络断开的情况,并且收到了网宿主机入侵检测产品的告警信息。由于客户没有专职的安全人员,由运维人员兼任安全运营工作&#xff…...

【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多变量回归…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

XCTF-web-easyupload

试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色&#xf…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...