【前端--Vue3创建一个新项目】

🚀 作者 :“码上有前”
🚀 文章简介 :前端–Vue3创建一个新项目
🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬
在这里插入图片描述

Vue3创建一个项目🍉​​​​​​​🍉​​​​​​​🍉

往期精彩内容

【前端高频面试题–HTML篇】
【前端高频面试题–CSS上篇】
【前端高频面试题–CSS下篇】
【前端高频面试题–JS上篇】
【前端高频面试题–JS下篇】
【前端高频面试题–ES6篇】
【前端高频面试题–ES7-ES11】
【前端–异步编程】
【前端高频面试题–TypeScript篇】

【前端高频面试题–git篇】
【前端高频面试题–微信小程序篇】

【前端高频面试题–Vue基础篇】
【前端高频面试题–虚拟DOM篇】
【前端高频面试题–Vue3.0篇】
【前端高频面试题–Vuex上篇】
【前端高频面试题–Vuex下篇】
【前端高频面试题–Vue生命周期篇】
【前端高频面试题–Vue组件通信篇】
【前端高频面试题–Vue路由篇】

【前端-Vue3创建一个新项目】
【前端大屏自适应缩放】
【前端Vue3 + TS项目开发一般流程】

🍓🍓检查node和Vue版本

  1. 🍓打开cmd
    使用win+r,在弹出的对话框中输入cmd,然后点击确定
    在这里插入图片描述
  2. 🍓接着查看node和vue的版本
    输入node -v 和vue -V(注意这里是大写的V)
    如果已经安装那么就会显示出对应的版本号,如果没有安装的话那么久进入官网选择合适的版本进行下载
    node官网
    如果没有安装Vue脚手架,需要使用node提供的包管理工具npm进行安装
npm install -g @vue/cli

安装成功之后使用vue -V进行查看版本,如果能看到表示安装成功
在这里插入图片描述
注意:要选择合适的node版本,太新了可能没有很好的兼容性,版本太低性能与功能不够齐全。特别注意的是vue3要求node10以上版本。关于安装node过程:

  • 见这篇文章
  1. 🍓开始创建vue3项目
    在对应的项目目录下创建vue3项目,在项目的目录栏中输入cmd
    在项目目录下打开cmd
    🍓弹出cmd对话框之后,输入以下代码开始创建项目
vue create demo-name

🍓之后出现是否使用镜像源,可能选择一次之后就再也不会出现了
命令中的demo-name是项目名字,提示中默认源网速较慢,是否使用淘宝镜像,淘宝镜像在国内,速度比较快(人性化)
在这里插入图片描述
🍓弹出选择哪个版本的vue创建项目,我们选择默认自动安装vue3
其他的意思是:
①default(vue3 babel,eslint):默认设置(直接enter)非常适合快速创建一个新vue3项目,没有带任何辅助功能的 npm包
② default(vue2 babel,eslint):默认设置(直接enter)非常适合快速创建一个新vue2项目,没有带任何辅助功能的 npm包
③ Manually select features:自定义配置(按方向键 ↓)是我们所需要的面向生产的项目,提供可选功能的 npm 包,即手动添加
选择手动安装看这篇文章
在这里插入图片描述
🍓提示选择哪个包管理工具来安装依赖,我们选择性能较为强大的pnpm包管理工具。关于pnpm、yarn、npm见这篇文章
![在这里插入图片描述](https://img-blog.csdnimg.cn/72bfe1fdd886491aa213b082d5737511.png在这里插入图片描述
🍓之后将自动运行项目
在这里插入图片描述
🍓运行上面蓝色命令
cd demo-name
pnpm run serve
在这里插入图片描述
进入以上提供的网址,项目就能显示出来,也表示项目创建成功
在这里插入图片描述
🍉 学无止境,看到这的同学,帮忙点个赞关注支持一下呗

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码上有前

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值