详细vue脚手架安装教程

已于 2022-06-25 00:44:11 修改
阅读量2.1k 收藏 6
点赞数 5
分类专栏： 前端 vue 文章标签： vue.js 前端
于 2022-06-25 00:42:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45775962/article/details/125454389
版权

VueCLI 安装教程 Node环境 npm Vue项目
关键词由CSDN通过智能技术生成
前端 同时被 2 个专栏收录
21 篇文章 1 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

Vue CLI的安装

在安装脚手架前，要先确认有node环境，确保node版本在10以上（vue官方文档说的，可以看往下的截图）

如果还没安装的小伙伴直接去node官网下载就好，步骤很简单，看菜鸟的安装步骤，不同类型的电脑都有介绍，一般直接默认选择第一个就可以，如果不会配置环境变量的小伙伴可以选择自动配置：Add to PATH，但是可能会在后续产生一些错误，所以不推荐，还是建议自己去配置环境！！！！

install-node-msi-version-on-windows-step5

如何知道有没有安装成功？

node --version
//在cmd或者PowerShell都可以使用这个命令查看

这是我的版本：
在这里插入图片描述

这个npm不需要我们自己再另去安装，在我们下载node的时候npm就已经跟着node下载了

NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具

npm --version

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7LJOE3C8-1656088651285)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220623164050545.png)]

当node环境没问题的时候就可以去安装脚手架了，我目前还在使用vue2，所以大家要注意自己使用的vue版本，命令可能会不太一样，但是都很简单，直接看vue官方文档，找到Vue CLI

如图：
在这里插入图片描述

然后直接在根据文档提供的安装方式，这里标注了几处要关注一下的地方
在这里插入图片描述

有些人的电脑直接打开cmd是安装不成功的,必须使用管理员模式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hls2LyhU-1656088651287)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220623160648083.png)]

安装完成，使用

vue --version //查看

在这里插入图片描述

开始使用cli创建vue项目
在这里插入图片描述

这样就表示创建成功，可以通过npm run serve运行项目
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

小小小张同学
关注
专栏目录
vue脚手架安装教程
Zhangq_1208的博客
11-02 3257
Model 模型层（业务逻辑层） 主要包含 JS 代码，用于管理业务逻辑的实现。： View 视图层 主要包含 HTML/CSS 代码，用于管理 UI 的展示。： ViewModel （视图模型层）是vue实例对象，用于将 data 与视图层的 DOM 进行动态绑定。
Macbook 苹果电脑 安装搭建Vue脚手架教程m1芯片Vue脚手架初学
No1banana的博客
05-05 8741
Macbook 苹果电脑 安装Vue脚手架教程 1.首先我们进入Node.js的官网，下载安装Node.js 如果你已经安装过可以忽略 网址http://nodejs.cn/ 2.直接点击下载，这里我下载的是18版本最新版的。 3.选择macOS版本后会直接下载 4.下载完成后直接点击安装即可 5.Node.js安装完成后接下来我们打开电脑的终端 6. 然后我们进入Vue的官网 https://cn.vuejs.org/ 7. 在*生态系统*处找到*Vue CLI*选项点击进入 8.点击‘起步’
vue脚手架安装过程
01-29
vue脚手架安装过程,只是简单的介绍了vue-cli的安装过程
【Vue脚手架安装教程】
热门推荐
zjyJul的博客
04-27 3万+
文章目录前言一、安装Node.js二、配置淘宝镜像1.将npm设置为淘宝镜像：2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 安装Vue脚手架之前，要先安装node.js配置环境 提示：以下是本篇文章正文内容，下面案例可供参考 一、安装Node.js 1.搜索node.js官网下载自己对应版本 https://nodejs.org/ 2.打开文件双击安装，一直点next。安装目录可以更换成自己的目录，最后点击in....
保姆级Vue项目安装配置步骤（包含vue-cli脚手架环境配置、Vue项目创建、运行）
最新发布
apple_68589597的博客
08-29 2085
保姆级Vue项目安装配置步骤（包含vue-cli脚手架环境配置、Vue项目创建、运行）
Vue脚手架安装
weixin_45641052的博客
02-12 5630
Vue脚手架安装
vue-cli脚手架的安装教程图解
10-18
在进行Vue-cli脚手架的安装之前，需要确保安装有Node.js环境，并且npm（Node.js的包管理器）的版本不低于3。可以使用node -v和npm -v命令在cmd（命令提示符）中检查Node.js和npm的版本。Vue-cli脚手架的推荐使用条件...
第一章 Vue脚手架安装.pdf
06-20
接下来，开始安装Vue脚手架，它允许快速构建Vue项目。安装命令为npm install -g @vue/cli 或 cnpm install -g @vue/cli。安装完成后，可以通过vue --version来查看已安装的Vue CLI版本。 创建Vue项目的开始点是使用...
vue脚手架安装
KongYue1202的博客
08-21 344
vue脚手架安装 vue脚手架安装及vue脚手架创建项目（详细步骤） 首先，我们要先到nodejs官网下载与电脑适配的nodejs文件到电脑上并安装 脚手架:（3） 如何: 安装脚手架的工具命令: npm i -g @vue/cli 电脑安装完命令后 ： 直接创建 vue create 文件夹名字 用命令反复创建脚手架: cd 要保存项目的文件夹完整路径 比如: cd C:\xampp\htdocs\dd\6_VUE\day04 用vue命令工具，创建一个项目的脚手架代码
Vue脚手架的安装（超详细篇，保姆级教程）
cfjbcg的博客
08-06 3468
打开一下你刚刚的安装目录nvm，双击打开，找到settings.txt，然后用记事本编辑打开，复制粘贴。nvm install 14 nvm install latest // 安装最新版本node。-g的意识是全局安装，就-g和-s，-s是局部安装，就是只在当前项目可以使用。这边的安装版本可以跟我的一样，安装16.20.2和14.21.3的版本。可以看到这个就说明你刚刚安装的版本成功了！16版本的node就是跟着8版本的npm。14版本的node就是跟着6版本的npm。在这边进行项目的运行，快捷键。
VUE脚手架安装
weixin_47198950的博客
12-28 933
** VUE脚手架安装 打开之后切换到指定盘符 *1. 先安装一个能创建脚手架项目的命令行工具: npm i -g @vue/cli 用vue命令，创建一个项目的脚手架代码文件夹 vue create 项目文件夹名* 脚手架文件夹创建成功后: Successfully created project project. Get started with the following commands: cd project //先进入项目文件夹（vue create后的那个文件夹——project
Vue_day02
Funny_Chou的博客
11-01 316
Vue_day02
Vue——Vue脚手架安装的详细教程
Bonsoir777的博客
09-29 3221
本文主要介绍有关 vue 中 脚手架的安装过程！！！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值