当前位置: 首页 > 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多变量回归…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

【单片机期末】单片机系统设计

主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容(一)CDN 基础概念1. 定义2. 组成部分 (二)CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 (三)CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 :开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置,将微信开发者工具放入到Hbuilder中, 打开后出现 如下 bug 解…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章,抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法,已经有很多的工作和这个任务相关。这两年 diffusion 模型很火,大家又开始用 diffusion 模型做各种 CV 任务了&am…...