Vue3快速上手(一)使用vite创建项目

在这里插入图片描述

一、准备

在此之前,你的电脑,需要安装node.js,我这边v18.19.0

wangdy@mb 2024code % node -v
v18.19.0

二、创建

执行npm create vue@latest命令即可使用vite创建vue3项目
有的同学可能卡主不动,可能是npm的registry设置的问题
先看下,默认是https://registry.npmjs.org/

wangdy@mb 2024code % npm config get registryhttps://registry.npmjs.org/

改为:https://registry.npmmirror.com,执行如下命令:

npm config set registry=https://registry.npmmirror.com

然后再执行npm create vue@latest命令就正常了,按提示和自己的需求一步步操作即可。

wangdy@mb 2024code % npm create vue@latest                                 
Need to install the following packages:
create-vue@3.9.1
Ok to proceed? (y) yVue.js - The Progressive JavaScript Framework✔ 请输入项目名称: … vue3_study
✔ 是否使用 TypeScript 语法? … 否 / 是
✔ 是否启用 JSX 支持? … 否 / 是
✔ 是否引入 Vue Router 进行单页面应用开发? … 否 / 是
✔ 是否引入 Pinia 用于状态管理? … 否 / 是
✔ 是否引入 Vitest 用于单元测试? … 否 / 是
✔ 是否要引入一款端到端(End to End)测试工具? › 不需要
✔ 是否引入 ESLint 用于代码质量检测? … 否 / 是正在构建项目 /Users/heqi/Documents/2024code/vue3_study...项目构建完成,可执行以下命令:cd vue3_studynpm installnpm run dev

项目结构如下:
在这里插入图片描述

三、启动

npm install 安装依赖

wangdy@mb vue3_study % npm installadded 92 packages in 2m

npm run dev 启动

VITE v5.0.11  ready in 1184 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h + enter to show help

四、访问

浏览器输入http://localhost:5173,查看访问结果。
在这里插入图片描述

END

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chapter 8 - 7. Congestion Management in TCP Storage Networks

TCP Flow Monitoring versus I/O Flow Monitoring TCP flow monitoring shouldn’t be confused with I/O flow monitoring because of the following reasons: TCP 流量监控不应与 I/O 流量监控混淆,原因如下: 1. TCP belongs to the transport layer (layer 4) of the OS…

C语言----内存函数

内存函数主要用于动态分配和管理内存,它直接从指针的方位上进行操作,可以实现字节单位的操作。 其包含的头文件都是:string.h memcpy copy block of memory的缩写----拷贝内存块 格式: void *memcpy(void *dest, const void …

数据库切片大对决:ShardingSphere与Mycat技术解析

欢迎来到我的博客,代码的世界里,每一行都是一个故事 数据库切片大对决:ShardingSphere与Mycat技术解析 前言ShardingSphere与Mycat简介工作原理对比功能特性对比 前言 在数据库的舞台上,有两位颇受欢迎的明星,它们分别…

基于OpenCV灰度图像转GCode的螺旋扫描实现

基于OpenCV灰度图像转GCode的螺旋扫描实现 引言激光雕刻简介OpenCV简介实现步骤 1.导入必要的库2. 读取灰度图像3. 图像预处理4. 生成GCode5. 保存生成的GCode6. 灰度图像螺旋扫描代码示例 总结 系列文章 ⭐深入理解G0和G1指令:C中的实现与激光雕刻应用⭐基于二值…

攻防世界 CTF Web方向 引导模式-难度1 —— 1-10题 wp精讲

目录 view_source robots backup cookie disabled_button get_post weak_auth simple_php Training-WWW-Robots view_source 题目描述: X老师让小宁同学查看一个网页的源代码,但小宁同学发现鼠标右键好像不管用了。 不能按右键,按F12 robots …

springboot微信小程序uniapp学习计划与日程管理系统

基于springboot学习计划与日程管理系统,确定学习计划小程序的目标,明确用户需求,学习计划小程序的主要功能是帮助用户制定学习计划,并跟踪学习进度。页面设计主要包括主页、计划学习页、个人中心页等,然后用户可以利用…

Elasticsearch(四)

是这样的前面的几篇笔记,感觉对我没有形成知识体系,感觉乱糟糟的,只是大概的了解了一些基础知识,仅此而已,而且对于这技术栈的学习也是为了在后面的java开发使用,但是这里的API学的感觉有点乱!然…

【零基础入门TypeScript】Union

目录 语法:Union文字 示例:Union类型变量 示例:Union 类型和函数参数 Union类型和数组 示例:Union类型和数组 TypeScript 1.4 使程序能够组合一种或两种类型。Union类型是表达可以是多种类型之一的值的强大方法。使用管道符号…

在java中一般什么时候用==

在Java中,使用 运算符用于比较两个对象的引用是否相同。下面是一些通常使用 的情况: 比较基本数据类型: 当比较两个基本数据类型(如 int、char、boolean 等)时,可以使用 运算符进行比较。它会直接比较两…

高仿原神官网UI 纯html源码

高仿原神官网UI源码介绍 如果您希望打造一个与原神官方网站相似的外观和用户体验,但又不想使用复杂的框架或模板,那么我们的高仿原神官网UI源码将是一个完美的选择。它采用纯HTML5构建,无需任何额外的CSS或JavaScript库支持,即可…

【Java万花筒】数据魔术师:探索Java商业智能与数据可视化

开发者的数据魔杖:掌握Java商业智能工具的秘诀 前言 在当今信息爆炸的时代,数据已经成为企业决策和业务发展的重要驱动力。为了更好地理解和利用数据,商业智能(BI)和数据可视化工具变得至关重要。本文将介绍几种基于…

代码随想录算法训练营第四十六天(动态规划篇)|01背包(滚动数组方法)

01背包(滚动数组方法) 学习资料:代码随想录 (programmercarl.com) 题目链接(和上次一样):题目页面 (kamacoder.com) 思路 使用一维滚动数组代替二维数组。二维数组的解法记录在:代码随想录算…

人工智能深度学习如何入门?

人工智能(AI)和深度学习是当今技术领域最热门的话题之一。如果你想要入门深度学习,以下是一些建议和步骤,可以帮助你开始这段旅程: 1. 建立数学基础 深度学习依赖于数学,特别是线性代数、概率论、统计学和…

2024/2最新升级ChatGPT Plus的方法

2024年2月最新升级方法:ChatGPT Plus全方位体验指南 随着2024年2月的到来,ChatGPT Plus迎来了全新的升级。对于追求更高效率和更强大功能的用户来说,升级至ChatGPT Plus无疑是提升工作和学习体验的关键。在本指南中,我将一步一步…

C#,十进制展开数(Decimal Expansion Number)的算法与源代码

1 十进制展开数 十进制展开数(Decimal Expansion Number)的计算公式: DEN n^3 - n - 1 The decimal expansion of a number is its representation in base -10 (i.e., in the decimal system). In this system, each "decimal place…

Zabbix 配置实时开通的LDAP认证-基于AD

介绍 本教程适用于6.4-7.0版本的Zabbix,域控(AD)使用Windows Server 2022搭建,域控等级为 2016。 域控域名为 songxwn.com 最终实现AD用户统一认证,统一改密,Zabbix用户自动添加。(6.4之前不…

使用npm包js-web-screen-shot做网页截图,可以对截图加文字,箭头等等,类似于微信截图

<template><div class"m-feedback-wrap" :style"{ top: ${feedbackHeight}px }"><div class"m-feedback-icon-wrap"><el-tooltipclass"item"effect"dark"content"内容"placement"left-…

服务运营 | 摘要:POMS 1月医疗文章合集

编者按 这一系列文章旨在给读者提供运筹学在医疗应用领域的概览。本文整理了Production and Operations Management在2024年1月刊中发布的医疗相关文章合集。 1.顾客订货行为对医疗产品分发效率的影响 文章名&#xff1a; How much do customer ordering practices drive med…

# 流量回放工具之 Goreplay 安装及初级使用

流量回放工具之 Goreplay 安装及初级使用 文章目录 流量回放工具之 Goreplay 安装及初级使用GoReplay使用场景环境搭建Golang环境安装Goreplay 安装 Windows 下使用基本使用其它使用注意点 GoReplay GoReplay是一个开源工具&#xff0c;用于捕获和重放实时HTTP流量到测试环境中…

代码随想录算法训练营第24天(回溯2)| 216.组合总和III 17.电话号码的字母组合

回溯的总结&#xff1a; 树的深度&#xff08;递归的层数&#xff09; 树的深度就是要取的数据的个数&#xff0c;通过path的size判断是否收集到足够的数据 树的宽度&#xff08;循环的范围&#xff09; 输的宽度就是搜索的范围&#xff0c;就是for循环的循环范围&#xff0c;…