我们研究vue时,首先操作的就是vue的引用,大部分人为了方便直接在页面上引用vue.js,但是一些大型网站还是比较喜欢用vue的npm命令来安装vue并使用,之前研究vue时,研究过使用npm安装的方式,但是总是没装成功,当时因为一些原因就放弃了继续研究下去,直接引用vue.js的方式来学习vue。这两天刚好有时间来继续研究下vue的npm安装方式,中间也遇上了一些问题。折腾了两天总算搞完了,现在回想起来,也挺容易的。下面就从安装node.js到npm的设置,再到vue的安装的步骤来描述下过程。

第一步: 使用npm的命令来安装vue,首先电脑得安装node.js,才能使用,先从官网下载node.js,官网地址:https://nodejs.org/en/,除了更改安装路径,其他的直接默认“下一步”就可以。

注意:

node.js 最好安装到D盘,我本来是安装C盘,但是之前我电脑账户因为是公司的电脑,而当时我是非超级管理员的账户,node.js被我安装到了C盘,后面用npm的方式安装文件时,总是报错,提示没有权限。

当然如果你的账号是电脑的管理员,node.js装到C盘,但是在启动cmd前要用“使用管理员方式打开”,否则npm命令安装时可能会出现没有权限的错误。

个人是觉得装到D盘,可以避免一些错误,而且后期如果需要用npm安装一些插件啥的,或者是npm缓存,也可以节省C盘的磁盘空间。

第二步:查看node.js和npm是否已安装成功

1) “以管理员身份运行” cmd窗口,在窗口中输入命令: node -v

如上图所示,输入命令后,出现nodeJS版本号,则说明nodeJS已安装成功

2)输入npm -v 命令,可查看nodejs是否已安装内置npm,

如上图所示,如果有安装,则显示npm的版本号,一般情况下都自动安装npm,

如果输入npm -v 报错,则表示没有安装内置的npm,则需要自己另外安装npm,这种情况比较少.这里就不做演示了

3) 输入命令:path  , 查看是否有nodejs的环境变量

 

       如上图所示,如果有nondeJs的安装路径,则说明nodejs 已自动添加了path路径,如果没有,则需自己添加,添加方法:(以下是以win10为例)

右击“此电脑”,“属性” -> "高级属性" -> “高级” 标签页 -> “环境变量” :点击"path" -> 编辑->弹出框中点击空白行->浏览->选择nodejs安装的目录->确定->确定->确定->关闭属性窗口 ;

环境变量已添加完。

第三步:配置npm

1)在nodejs安装目录新建两个文件夹 npm_gobal 和 npm_cache :分别用于npm的全局路径和缓存路径。

npm默认全局路径地址和缓存路径是在C盘的appData目录下,如果后期需要使用或者查看很不方便,而且还给C盘增加压力,因此最好修改下,一般情况下建议放到nodejs的安装目录下。

2)设置npm全局路径和缓存路径的环境变量:

右击“此电脑”,“属性” -> "高级属性" -> “高级” 标签页 -> “环境变量” :点击"path" -> 编辑->点击弹出框中点击空白行->浏览->选择新建的npm_gobal文件夹->确定

->点击弹出框中点击空白行->浏览->选择新建的npm_cache文件夹->确定->确定->关闭属性窗口

3)“以管理员身份” 运行cmd, 用命令配置npm:

配置npm的全局路径: npm config set prefix "D:\Program Files\nodejs\npm_global"

            配置npm的缓存路径:npm  config set cache "D:\Program Files\nodejs\npm_cache"

更换镜像站为国内的淘宝镜像站:npm config set registry="http://registry.npm.taobao.org"

        

由此,npm已配置好,可通过命令: npm config ls  查看npm的所有配置

第四步: 命令安装vue,在cmd窗口中输入并执行命令: npm install -g vue-cli

    注意以上命令是安装全局的vue, 安装后可执行命令: vue --version 查看是否安装成功,如果安装成功可看到vue的版本号

如果需要安装局部vue,则在cmd窗口中输入并执行命令:npm install vue-cli  安装后可执行命令: npm vue --version 查看是否安装成功,如果安装成功可看到vue的版本号

注意:如果到第四步执行报rollbackFailedOptional verb npm-session 的错误,则需要设置npm的代理服务器,以下需要根据各自的网络需求来定:

   在cmd窗口执行下面两个命令:

命令1:npm config proxy 代理服务地址和端口

命令2:npm config set https-proxy 代理服务器地址和端口

有些还需要设置git代理服务器,有些不需要,如果有需要则执行以下两个命令:

命令1:git config --global http.proxy 代理服务地址和端口

命令2:git config --global http.proxy 代理服务地址和端口

如果所用网络不需要代理,则要把npm代理和git代理去掉

      删除npm 代理:

      命令1:npm config delete proxy

      命令2:npm config delete https-proxy

删除git代理:

      命令1:git config --global --unset http.proxy

      命令2:git config --global --unset https:proxy

        设置完成后,重新操作上面第四步,就可以了。

如果遇上其他问题,送你个解决方案:

百度吧,兄弟

安装node.js->npm->vue的更多相关文章

  1. Windows10安装node.js,vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

  2. Ubuntu14.04LTS下安装Node.js&NPM以及个人博客hexo的初始化配置

    什么是hexo Hexo 是一款基于node 的静态博客网站生成器作者 :tommy351是一个台湾的在校大学生...相比其他的静态网页生成器而言有着,生成静态网页最快,插件丰富(已经移植了大量Oct ...

  3. window下安装Node.js NPM

    一.安装Node.js 下载地址:http://nodejs.org/download/ 1..msi文件,直接安装,包括了npm,结束. 2..exe文件,把node.exe所在主目录,加入到系统P ...

  4. 安装 node.js npm,cnpm

    参考:https://blog.csdn.net/suiyuehuimou/article/details/74143436 https://www.liaoxuefeng.com/wiki/0014 ...

  5. 安装node.js和vue

    1.在官网上下载Node.js安装包  https://nodejs.org/zh-cn/ 2.点击安装,一直下一步下一步就行,这里就不在赘述了. 3.安装完之后,如果没有选安装路径的话,一般都是在[ ...

  6. CentOS 6.5安装Node.js, npm

    CentOS上可以通过下载*.tar.gz安装包的方式自己解压缩.编译的方式安装,同时还可以采用EPEL的方式安装: Node.js and npm are available from the Fe ...

  7. Centos6.9安装Node.js+npm爬坑

    Node.js选择 1.下载 wget https://nodejs.org/dist/v8.4.0/node-v8.4.0-linux-x86.tar.gz 2.解压 tar zxvf node-v ...

  8. 安装node.js / npm / express / KMC

    http://www.cnblogs.com/seanlv/archive/2011/11/22/2258716.html 1. 下载Node.js官方Windows版程序: http://nodej ...

  9. 【centos6.5 安装 node.js + npm】

    1.参考链接:http://www.jb51.net/article/116231.htm 2.下载的nodejs版本一定要是v0.12.10的(传送门:https://nodejs.org/en/b ...

  10. CentOS6.8 安装node.js npm

    环境:CentOS6.8_X64系统 一.到官方下载最新的编译好的安装文件,目前是6.9.4. $>cd /usr/local/src #定位到这个目录,下载的文件会在这个目录#使用wget下载 ...

随机推荐

  1. Web.Config配置文件中customErrors元素的使用方法

    在Web.Config配置文件中,customErrors元素提供有关ASP.NET 应用程序自定义错误消息的信息. 先看一下配置结构的示例: <configuration>   < ...

  2. vmware装centos7 无法上网

    现象 使用ip address看不到ip地址 ping www.baidu.com无法ping通 解决方式: 1.设置网卡 vi /etc/sysconfig/network-scripts/ifcf ...

  3. git pull push 所有分支

    因为远端 git 服务器上有很多分支,一个个分支pull太麻烦,所以找了 pull 所有分支的方法,如下: git branch -r | grep -v '\->' | while read ...

  4. oracle导入及导出dmp文件

    导出数据库步骤: exp 用户名/密码@实例名 file=导出的dmp文件存放路径(绝对路径) log=导出日志存放路径(建议记录log文件,方便后续核实数据是否完整导出和导入) 导入数据库步骤: 1 ...

  5. [LeetCode] 774. Minimize Max Distance to Gas Station 最小化加油站间的最大距离

    On a horizontal number line, we have gas stations at positions stations[0], stations[1], ..., statio ...

  6. 应用程序正常初始化(0xc0000135)失败。请单击“确定”,终止应用程序。

    应用程序正常初始化(0xc0000135)失败.请单击“确定”,终止应用程序. 没有安装对应版本的.NET FRAMEWORK.

  7. Tomcat免安装版执行tomcat9.exe闪退

    Tomcat免安装版点击startup.bat可成功启动,但是执行tomcat9.exe时却闪退,这是因为免安装版的tomcat不会自动把tomcat注册到windows服务里,需要手动注册. 解决办 ...

  8. web基础---->session的使用

    前几天在博问中,看到有人提到了有关session的问题,决定自己整理写一下有关session的原理!说起session,cookie必须是要谈的! 目录 Cookie的介绍 Cookie的使用 Ses ...

  9. LeetCode 86. 分隔链表(Partition List)

    86. 分隔链表 86. Partition List 题目描述 给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的 ...

  10. LeetCode 151. 翻转字符串里的单词(Reverse Words in a String)

    151. 翻转字符串里的单词 151. Reverse Words in a String