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.hqwc.cn/news/454665.html

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

相关文章

【SpringBoot】策略和模板模式的思考与实践

一、应用场景 之所以会将策略和模板模式放在一起,是因为这两种模式用的最多最广泛,而且基本都是联合使用的。在开始之前,先复习一下模式的定义: 模板模式(Template Pattern) 模板模式是在一个抽象类中定…

day21网页布局

文章目录 块元素和行内元素列表标签表格标签媒体元素页面结构分析iframe内联框架 块元素和行内元素 块元素:无论内容多少,该元素独占一行。(p标签、h1~h6…) 行内元素:内容撑开宽度,左右都是行内元素的可以排在一行。&#xff08…

基于CNN卷积网络的MNIST手写数字识别matlab仿真,CNN编程实现不使用matlab工具箱

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 卷积神经网络(CNN) 4.2 损失函数和优化 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 ......................…

外汇天眼:SIX推出了新的SIX参考利率加密货币和SIX实时加密货币指数

全球金融信息提供商SIX今天宣布推出新的SIX参考利率加密货币和SIX实时加密货币指数。新的SIX参考利率加密货币指数和SIX实时加密货币指数涵盖了主要的加密资产比特币(BTC)和以太坊(ETH),为市场及其表现提供了全面的快照…

Goland控制台日志打印错位

现象:Goland控制台打印日志,调整控制台界面大小后偶发性的日志内容错位 原因:未知(大概是bug) 解决方案: shift shift 进入Registry,取消go.run.process.with.pty勾选即可

《动手学深度学习(PyTorch版)》笔记7.5

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过&…

Qt|实现时间选择小功能

在软件开发过程中,QtDesigner系统给出的控件很多时候都无法满足炫酷的效果,前一段时间需要用Qt实现选择时间的小功能,今天为大家分享一下! 首先看一下时间效果吧! 如果有需要继续往下看下去哟~ 功能 1:开…

Vue-easy-tree封装及使用

1.使用及安装 下载依赖 npm install wchbrad/vue-easy-tree引入俩种方案 1.在main.js中引入 import VueEasyTree from "wchbrad/vue-easy-tree"; import "wchbrad/vue-easy-tree/src/assets/index.scss" Vue.use(VueEasyTree)2.当前页面引入 import VueEa…

PiflowX新增Apache Beam引擎支持

参考资料: Apache Beam 架构原理及应用实践-腾讯云开发者社区-腾讯云 (tencent.com) 在之前的文章中有介绍过,PiflowX是支持spark和flink计算引擎,其架构图如下所示: 在piflow高度抽象的流水线组件的支持下,我们可以…

2024第九届国际发酵培养基应用与发展技术论坛会议通知

会议简介 随着科技的不断发展,发酵技术已逐渐成为生物制造中的重要支撑,发酵技术应用领域更加广泛。发酵培养基是影响生物发酵产业技术水平、环境友好程度的重要因素之一,为进一步推动发酵培养基的科学应用,提升发酵培养基的高效、稳定应用&…

电商推荐系统

此篇博客主要记录一下商品推荐系统的主要实现过程。 一、获取用户对商品的偏好值 代码实现 package zb.grms;import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.conf.Configured; import org.apache.hadoop.fs.Path; import org.apache.hadoop.io.Doub…

开发大佬为什么都不喜欢关电脑?

引言 在平时工作中,咱们程序员这一群体往往展现出一些特有的行为习惯,其中之一便是不喜欢频繁地关闭电脑、拒绝关机、长久待机、特别是苹果的机器。 下面从技术分析与用户行为研究的角度出发,将深入探讨程序员倾向于保持电脑开机状态的原因…