vue脚手架安装以及安装失败问题解决办法

目录
  • 前言
  • 一、脚手架的命令安装
    • 1.1 命令查看版本信息
    • 1.2 通过键入命令安装脚手架
  • 二、node.js环境安装
  • 附：vue安装vue脚手架（vue-cli)错误总结
  • 总结

前言

在不少小伙伴学习使用vue的过程中，vue 的脚手架安装几乎是无可避免的；但是因为电脑配置、网络等等的问题会造成部分小伙伴的脚手架安装失败。

那我们本着遇到问题解决问题，没有问题创造问题的态度进行本期的问题解决。若发现文中有部分内容比较基础请酌情跳过，在刚开始学习的路上，总是有很多小白宝们不太懂，我也是这样过来的，希望这样能够友好一点，你们也要加油哦，前端路上，我们不再孤单

一、脚手架的命令安装

此处默认宝们已经完成node.js前期安装工作，若还未安装node.js的宝们请先直接跳到最后按照教程进行安装，然后再返回安装脚手架

1.1 命令查看版本信息

在通过安装node、npm等之后，我们通过命令行查看可以知道我们所安装的相关版本号，该过程没有问题我们继续进行脚手架的安装

node -v
npm -v
//命令可在powershell、cmd、IDE终端窗口中运行(使用时请选择复制)

1.2 通过键入命令安装脚手架

传统安装命令（不建议）

安装Vue2脚手架
npm install -g vue-cli
卸载Vue2脚手架
npm uninstall vue-cli -g

输入命令回车后便开始npm包的安装，因为npm服务器在国外，所以此处因为网络可能会出现第一个问题，即网络因素无法安装报错或长时间无反应，所以传统安装方式介于响应速度，不太建议。

反正这里我是装了好几个小时都没好，宝们自己选择哟

切换镜像源（建议使用）

查看当前使用的镜像源
npm config get registry

切换镜像源
切换至淘宝源：npm config set registry=http://registry.npm.taobao.org/
切换至华为源：npm config set registry=https://mirrors.huaweicloud.com/repository/npm/
切换至npm源：​​​​​​​npm config set registry=http://registry.npmjs.org
临时使用：npm --registry https://registry.npm.taobao.org install express

此处我们默认使用淘宝源

//查看是否安装成功
cnpm -v

用cnpm安装vue脚手架

//安装Vue2脚手架
cnpm install -g vue-cli

j检查脚手架安装情况

vue -V
//记住这里的-V是大写字母V

注意：

如果提示“无法识别”，有可能是npm的版本过低，更新npm包就可以了，然后继续上一步骤 npm安装脚手架就行

//更新一下版本就好了
npm install -g npm

如果安装失败的话，可能会出现以下报错

清除缓存重新安装即可

npm cache clean

二、node.js环境安装

首先进入node.js的官方网站，我们此处进入node.js中文网

或者直接进入node官网点击下载即可（一般系统会自动匹配相应的包，若下载后发现下载的包不对应系统则手动点击下载）

下载完成后双击开始安装，此处注意，在同意相关协议后最好使用默认安装路径，这样也能够尽可能地避免你后期使用过程中因为路径更改造成的一系列不必要的问题。

安装完成后回到文章顶部按照步骤安装脚手架即可。

听我一句劝，node就让他默认路径安装吧，不然你以后很有可能会找各种报错的原因

附：vue安装vue脚手架（vue-cli)错误总结

最忌重新安装vue-cli脚手架的时候，报出如下错误

根据提示将相应的文件夹删除之后，又让我删除新的文件。我突然猜想这是我第二次安装可能需要将里面所有的vue文件删除，所以我就将所有的vue文件删除了，果然安装就成功了。

总结

在通过一些列的环境安装后，我们就进入到下一阶段的项目创建，开始着手你的vue项目了，不过在这里还是先啰嗦一下，如果你之前没有正式学习过 Node.js和JavaScript建议先简单了解一下，对后面vue的学习会起一定的帮助

到此这篇关于vue脚手架安装以及安装失败问题解决办法的文章就介绍到这了,更多相关vue脚手架安装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-cli脚手架的安装教程图解

    vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,下面给大家介绍vue-cli脚手架的安装,具体内容如下所述: https://github.com/vuejs/vue-cli  官网 使用官方推荐的webpack 条件: node在4.以上,npm在3以上,查看版本号打开cmd输入,node -v npm -v; 安装步骤: 1.cmd打开命令行窗口 2.输入npm install vue-cli -g,然后回车等待 3.安装结束后输入vue 查看是否安装成功 4.运行vueinit

  • node.js与vue cli脚手架的下载安装配置方法记录

    node.js与vue cli脚手架的下载安装配置方法记录

    目录 一.node.js安装以及环境配置 1.下载vue.js 2.安装node.js 3.检查node程序是否安装成功 4.更改默认路径 5.添加环境变量 5.测试安装是否成功 二.安装vue-cli脚手架 1.检查node环境是否安装好 2.更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm 3.开始安装vue-cli 4.生成项目 5.打包上线 总结 一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en

  • 详解vue-cli 脚手架 安装

    一. node安装 1)如果不确定自己是否安装了node,可以在命令行工具内执行: node -v (检查一下 版本): 2)如果 执行结果显示: xx 不是内部命令,说明你还没有安装node , node 安装地址:http://nodejs.cn/download/ 注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上: 二. vue-cli 全局安装 命令行执行 : npm install -g vue-cli // 加-g是安装到全局 安装完成以后可以输入命令:vue

  • vue脚手架安装以及安装失败问题解决办法

    vue脚手架安装以及安装失败问题解决办法

    目录 前言 一.脚手架的命令安装 1.1 命令查看版本信息 1.2 通过键入命令安装脚手架 二.node.js环境安装 附:vue安装vue脚手架(vue-cli)错误总结 总结 前言 在不少小伙伴学习使用vue的过程中,vue 的脚手架安装几乎是无可避免的:但是因为电脑配置.网络等等的问题会造成部分小伙伴的脚手架安装失败. 那我们本着遇到问题解决问题,没有问题创造问题的态度进行本期的问题解决.若发现文中有部分内容比较基础请酌情跳过,在刚开始学习的路上,总是有很多小白宝们不太懂,我也是这样过来的

  • Python pip安装lxml出错的问题解决办法

    Python  pip安装lxml出错的问题解决办法 1.  在使用pip安装lxml过程中出现了一下错误: >>> pip install lxml C:\Users\Chen>pip install lxml Collecting lxml Using cached lxml-3.5.0.tar.gz Installing collected packages: lxml Running setup.py install for lxml ... error Complete

  • Python  pip安装lxml出错的问题解决办法

    Python  pip安装lxml出错的问题解决办法 1.  在使用pip安装lxml过程中出现了一下错误: >>> pip install lxml C:\Users\Chen>pip install lxml Collecting lxml Using cached lxml-3.5.0.tar.gz Installing collected packages: lxml Running setup.py install for lxml ... error Complete

  • Android studio 下的APK打包失败问题解决办法

    Android studio 下的APK打包失败问题解决办法 今天遇到了一个奇怪的问题,本来在Android studio 1.4上运行的好好的程序,到了我更新完的Android studio 2.1上就打包失败了,但是用调试机直接运行则没问题. 最后在app下的build.gradle下加入了这样的一段代码就通过了: lintOptions { abortOnError false checkReleaseBuilds false // 防止在发布的时候出现因MissingTranslatio

  • Android apk无法安装及闪退问题解决办法

    Android apk无法安装及闪退问题解决办法

    Android apk无法安装及闪退问题 app在部分手机上(低版本)打不开或打开就闪退的问题 之前做项目集成的是 环信的sdk ,环信的sdk 确实很好,客服 也很给力.但是在集成的过程中发现,apk 在手机上发布不了,要么就是,安装了 打不开,打开就闪退:问题有一下两方面 1.之前做过一个环信的即时通讯,集成好环信的sdk之后在4.x的手机上就打开就闪退,,只能在5.x和6.x手机上打开app 2.最近又碰到了同样的问题不过这次和上次不一样,这次是因为我的 as升级到了 2.3 之后出现的这

  • vue脚手架vue-cli的卸载与安装方式

    vue脚手架vue-cli的卸载与安装方式

    目录 前言 以下列举npm和yarn指令的方式: 补充:快速卸载Vue脚手架(vue-cli) 总结 前言 若电脑之前已经安装过vue-cli了,但是版本过低,比方说当前vue-cli的版本为2.9.6,然后我想升级到vue-cli的最新版本4.0.5,则需要将旧版本卸载,然后再重新安装@vue/cli. vue-cli:vue3.0之前版本使用此名称@vue/cli:vue3.0之后版本包括3.0版本使用此名称 以下列举npm和yarn指令的方式: 卸载指令: //卸载3.0之前的版本 npm

  • PyCharm安装库numpy失败问题的详细解决方法

    PyCharm安装库numpy失败问题的详细解决方法

    事情是这样的,博主初学python和机器学习,在跑一个代码的时候被提示出现以下错误: (能被提示出现这个错误,可见确实是初学了!) 图1:跑代码时候的报错 注:图1是安装好了numpy后出现的第二个错误,错误本质是一样的,都是缺少某个库 百度查资料后得知在PyCharm中有一个安装库的方法是:Settings>>Python Interpreter>>点击图2中红色圈起来的加号,出现图3 图2:安装库的一个方法 图3:点击图2的加号后出现的界面 顺利的话,只要继续在图3中输入num

  • Vue脚手架搭建及创建Vue项目流程的详细教程

    Vue脚手架搭建及创建Vue项目流程的详细教程

    目录 VUE脚手架搭建流程 安装国内淘宝镜像 安装 Vue 脚手架 Vue项目创建 项目结构解读 项目修改测试 总结 VUE脚手架搭建流程 1.安装 Node.js(推荐一个网站:http://nodejs.cn/) 2.下载安装完成之后进行测试,记住安装位置 node -v 测试 node 是否安装成功以及检查 node 版本 npm -v 测试 npm 是否安装成功以及检查 npm 版本 效果: 提示:如果碰到下面情况 可能原因: 可能是C:\Users\Administrator(user

  • win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法

    win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法

    win10下安装mysql 1. 官网下载mysql 网址:https://www.mysql.com/downloads/ download页面往下拉:点击下图红框: 按下图指示操作: 下载之后解压: 解压目录如下图所示: 2. 配置环境变量 此电脑->属性->高级系统设置->环境变量->用户变量中的path(双击)->编辑(添加mysql的安装目录下的bin目录).具体步骤如下图操作: (我一般会将用户变量和系统变量都添加) 3. 配置初始化的my.ini文件(新解压后的

随机推荐