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

码上有前

已于 2024-02-16 17:18:00 修改

阅读量1k

点赞数 2

文章标签：前端 vue.js npm

于 2023-04-19 14:50:44 首次发布

本文链接：https://blog.csdn.net/qq_45832651/article/details/130240711

版权

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

Vue3创建一个项目🍉🍉🍉

往期精彩内容
🍓🍓检查node和Vue版本

往期精彩内容

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

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

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

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

🍓🍓检查node和Vue版本

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

npm install -g @vue/cli

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

见这篇文章

🍓开始创建vue3项目
在对应的项目目录下创建vue3项目，在项目的目录栏中输入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

进入以上提供的网址，项目就能显示出来，也表示项目创建成功

🍉 学无止境，看到这的同学，帮忙点个赞关注支持一下呗