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

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 registry

https://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) y

Vue.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_study
  npm install
  npm run dev

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

三、启动

npm install 安装依赖

wangdy@mb vue3_study % npm install

added 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.kler.cn/news/234336.html

相关文章:

  • 滑块验证码识别代码分享
  • 力扣236——二叉树的最近公共祖先
  • [2024]常用的pip指令
  • Docker 容器网络:C++ 客户端 — 服务器应用程序。
  • 【北邮鲁鹏老师计算机视觉课程笔记】01 introduction
  • 【服务器部署】Docker环境的安装
  • Linux内核有什么之内存管理子系统有什么——基础篇之struct vm_area_struct(2)
  • Bert与ChatGPT
  • Java多态原理
  • 学习数据结构和算法的第7天
  • 【MySQL】-12 MySQL索引(上篇MySQL索引类型前置-1)
  • 像素、分辨率、公差的概念
  • 相机图像质量研究(11)常见问题总结:光学结构对成像的影响--像差
  • Vue项目创建
  • 【Java】学习笔记:关于java.sql;
  • 基于vue+node.js的校园跳蚤市场系统多商家
  • Python图形用户界面
  • 假期day6
  • OSDI 2023: Conveyor One-Tool-Fits-All Continuous Software Deployment at Meta
  • ###C语言程序设计-----C语言学习(11)#数据的存储和基本数据类型
  • mfc110.dll是什么?解决mfc110.dll丢失windows系统常见问题
  • blender几何节点中样条线参数中的系数(factor)是个什么概念?
  • 2.10日学习打卡----初学RocketMQ(一)
  • Open CASCADE学习|2个TCL命令转C++
  • 【Linux】make和Makefile
  • Tomcat之虚拟主机
  • 基于微信小程序的校园二手交易平台
  • ChatGPT高效提问—prompt常见用法(续篇九)
  • Nginx实战:2-日志配置
  • wireshark抓包问题及学习