Vue-CLI安装方法

已于 2023-03-30 17:15:15 修改
阅读量3.3k 收藏 8
点赞数 3
文章标签： vue.js javascript 前端 node.js npm
于 2023-03-30 17:13:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63731304/article/details/129860962
版权

目录

一、安装Node.js及配置环境

1.下载并安装Node.js

2.本地查看Node.js是否安装成功

3.配置镜像源

 二、安装Vue-CLI

1.全局安装Vue-CLI

2.检查版本号

一、安装Node.js及配置环境

1.下载并安装Node.js

（1）浏览器地址栏输入nodejs.org，进入Node.js官网Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/zh-cn

（2）选择14版本以上进行下载
https://nodejs.org/dist/v18.15.0/node-v18.15.0-x64.msihttps://nodejs.org/dist/v18.15.0/node-v18.15.0-x64.msi

（3）下载完成后打开文件进行安装 

 （4）安装Node.js

①点击Next

②勾选I accept.... 然后点击Next

 ③选择安装目录：Node.js默认安装目录是C盘： “C:\Program Files\nodejs” ，可以根据自己需要更改(Change)位置，尽量不修改，然后点击Next

④直接点击Next

⑤ 勾选Automatically i.... ，然后Next

⑥点击Install，等待

 ⑦点击Finish

我们已经完成Node.js的安装

2.本地查看Node.js是否安装成功

①win+R输入cmd，打开“命令提示符”窗口

 ②使用node --version 或 node -v 检查node版本号

3.配置镜像源

 ①淘宝镜像源：

npm config set registry https://registry.npmmirror.com

 ②win+R输入cmd，打开“命令提示符”窗口，输入此命令，回车

 二、安装Vue-CLI

1.全局安装Vue-CLI

win+R输入cmd，打开“命令提示符”窗口，输入此命令，回车

npm install -g @vue/cli

2.检查版本号

win+R输入cmd，打开“命令提示符”窗口，输入此命令，回车

vue -V

 出现 @vue/cli 5.0.8 版本号则安装成功

Legreay
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue+Vue-Cli安装配置使用全过程详解
qq_53878224的博客
10-24 467
这里我看的是另一个博主的文章，写的非常详细，遇到问题可以看看讨论区推荐如express之类的模块用镜像安装。打开之前设置的node_global文件夹，在命令行中全局安装如果出现"Unhandled rejection Error:EACCES:permission denied"，说明操作权限不足，需要重新安装可采用如下代码。（不是很推荐，因为可能会出现一些错误）检查是否安装完成，如果终端输出版本号，表示 Node.js 已安装。
如何快速安装vue-cli脚手架
静水流深，沧笙踏歌
05-13 7232
vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。vue-cli官方提供了一个脚手架，用于快速生成一个vue的项目模板。它预先定义好目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，他能使我们的开发更加快速。vue-cli这个构建工具大大降低了webpack的使用难度，支持热部署，有webpack-dev-server的支持，相当于启动了一个请
Vue安装及环境配置教程(超详细图文教程)
java骨灰级码农，10年IT从业经验
05-18 1845
将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。到这里，Vue安装及环境配置就已经全部完成，如有不会，欢迎骚扰！先把路径改到刚刚创建的项目，然后再运行，语句如下。输出了版本号就说明Node.js已经安装成功。变量值：你的安装目录\node_modules。可以选择创建Vue2版本或者Vue3版本的项目。（注意中间有个空格）验证是否安装成功。创建vue项目，选择项目想要放的位置。系统变量中新增一个变量，如下👇。一直Next即可完成安装。打开cmd窗口，执行如下命令。安装webpack模板。
[VUE] Vue-CLI的安装、使用及环境配置（超详细）
热门推荐
leo的博客
11-20 3万+
Vue-CLI的安装、使用及环境配置的详细步骤（超详细）
安装 Vue-CLI 详细方法及踩坑记录
sywdebug的博客
11-18 7927
配置: 如果环境中没有配置全局目录，那么安装模块时会自动安装装到 C:\User\当前用户\Appdata\Roaming\npm 目录下。原因: 没有权限，以管理员身份运行即可，也有可能是 nodejs 安装后没有配置环境变量。这个玩意我也是第一次见到，清缓存等方法还会给我报错，就记录一下吧，搞了好长时间，最后参考。右键我的电脑 - - - 属性 - - - 高级系统设置 - - - 环境变量。或者使用下面命令安装 cnpm，然后使用 cnpm 进行安装。用户变量和系统变量应该都是可以的。
vue-cli全局安装
qq_25741071的博客
09-21 4776
一、安装node.js后检查是否安装成功 node -v npm -v node下载网址：http://nodejs.cn/download/ 注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上； 二、Vue-cli全局安装 a)、因为在国内npm安装会比较慢，所以这里推荐一下先安装淘宝镜像（官网：http://npm.taobao.org；） b)、在控制台执行命令：npm install cnpm -g --registry=https://registry.npm.ta
vue-cli（vue脚手架）安装 详细教程
keke2486的博客
08-26 2万+
vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。 一.安装vue-cli 1、 使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 注意：webpack 4.
vue-cli中安装方法(图文详细步骤)
01-21
vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 1、安装node，vue运行需要基于npm一定的版本，所以首先升级npm到最新的版本，而在安装的过程中个人比较喜欢淘宝的镜像，所以先安装cnpm（因为...
vue-cli-plugin-multiple-page:基于vue-cli https的buildwatch多页面条目插件
05-30
vue-cli-plugin-multiple-page 一个基于 vue-cli 捆绑多个页面的插件。 与vue-cli's pages配置不同，它是通过将多个页面分片到不同的 webpack 配置来处理的 用法 在你的 vue-cli 创建的项目中安装插件，如果没有请...
vue-cli-plugin-tailwind:Tailwind CSS的vue-cli插件
05-10
vue-cli-plugin-tailwind 一个将Tailwind CSS添加到您的vue-cli项目的插件。入门在您的vue-cli项目文件夹中，通过以下方式添加插件： vue add tailwind选择要生成的Tailwind配置： 无-不会创建一个配置文件。 如果...
安装vue-cli的简易过程
12-11
首先，安装Vue CLI之前，确保你的机器上已经安装了Node.js，因为Vue CLI是基于npm（Node Package Manager）的。你可以通过在命令行工具中输入`npm -v`来检查npm以及Node.js的版本。如果未安装或版本过低，你需要访问...
详解使用nodeJs安装Vue-cli
01-02
1、执行npm install –global vue-cli ，全局安装vue-cli —-因为默认是从国外服务器下，可以使用阿里巴巴在国内的镜像服务器。 产生通过config命令设置默认下载路径： npm config set registry ...
安装vue-cli&使用vue-cli搭建项目
qq_64001795的博客
09-26 4522
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。这三个部分分别代表了 html,js,css。
脚手架(vue-cli)的安装详细教程
weixin_62268437的博客
07-28 4337
这时候就会出现对应的版本，如果你能终端打印出来这个，说明已经成功一半了，但是这个版本太高了，有时候运行项目的时候会报错，此时我们需要把版本降低，那么如何把版本降低呢？可以把这个链接复制到浏览器回车，也可以左手按住ctrl，右手鼠标点击，他会发生页面跳转，一般是这样子的，但是不一定所有电脑都行，但是前者肯定是可以的！此时你会发现你可能卡到一个地方很久，一直没有动 ，这时候我们可以考虑去切换淘宝镜像或者阿里镜像，这样子下载会快许多！选择要安装的位置，不是必须要安装到C盘中，想安装到哪里就安装到哪里！
Vue-cli安装步骤详细版
qq_45801516的博客
03-12 1746
1.我选择自定义安装步骤。
Vue-cli 安装使用详细教学
gz775的专栏
07-07 2675
一:安装 设置npm的淘宝镜像: npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址 npm config get registry #查看镜像地址 全局安装命令: npm install -g @vue/cli 注意: 如果半天没动静(95%都是网速问题), 可以ctrl + c 停止安装，换一个网络环境来继续重新安装。检查是否安装成功 在任意小黑窗中：vue --version 如果可以看到版本号，就表示安
【已解决】‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。
m0_59778008的博客
04-02 6005
确保 Vue CLI 安装目录已添加到系统的 PATH 环境变量中。这样系统就可以在任何地方找到 Vue CLI 的命令。如果上述步骤没有解决问题，尝试重新安装 Vue CLI。通过以上步骤，应该就能解决这个问题了。
Vue CLI安装的详细步骤
qq_52959651的博客
12-11 1万+
Vue CLI安装的详细步骤 为了以后安装方便，写一个具体的步骤。 1.首先，打开vue官网，在生态系统的工具里找到Vue CLI，点击安装，先全局安装，直接打开cmd命令，执行以下命令。（我选的第一个） 2.执行完成后，再执行这个命令，查看版本。 3.如果上面两个都成功了，点击创建一个项目，执行以下命令。如何创建这个项目呢？首先，我们将项目创建在D盘或桌面，然后打开目录，在这个位置敲cmd命令，定位到当前的目录下。注意，一定不要在其他位置随便创建项目。 4.再执行以下这个命令，hello-word是你
vue-cli脚手架的安装
z1561599530b的博客
02-01 944
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂项目的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。CLI是Command-Line Interface（命令行界面）俗称脚手架。vue-cli是官方提供的一个脚手架(预先定义好的项目目录结构和基础代码),用于快速生成一个vue的项目模板.
vue-cli安装失败
最新发布
06-05
以下是一些常见的 vue-cli 安装失败的原因和解决方法： 1. 网络原因：请确认网络是否正常，可以使用命令行或者浏览器测试一下是否能够访问外网。 2. npm 安装失败：请升级 npm 版本，或者使用 cnpm 代替 npm 进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值