Vue3+vite搭建基础架构(1)---新建项目

Vue3+vite搭建基础架构(1)--- 新建项目

说明

这里记录下自己用Vue3+vite的搭建过程,不使用ts语法,方便以后直接使用。

官方文档

vue3官方文档:https://cn.vuejs.org/guide/introduction.html
vite官方文档:https://cn.vitejs.dev/guide/

创建vite项目

根据vite官方文档说明,Vite 需要 Node.js 版本 18+,20+。所以这里我本地项目搭建的node版本为18.19.0版本。
在这里插入图片描述
创建vite项目的npm命令:

npm create vite@latest

在这里插入图片描述
在这里插入图片描述
选择完成后,项目成功创建如下:
在这里插入图片描述
对应文本夹出现你的项目:
在这里插入图片描述
vite-demo项目目录结构如下:
在这里插入图片描述
查看package.json里面的依赖版本:
在这里插入图片描述

启动项目

在这里插入图片描述
加载项目依赖后,文件目录会出现node_modules,里面就是项目安装的依赖包。
在这里插入图片描述
浏览器页面如下:
出现该页面说明项目初始化成功,vue3+vite搭建成功。
在这里插入图片描述

  • 11
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值